Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
made
Threadersteller
Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 24.04.2006 15:34
Titel Hilfe! Probleme mit <li> listen-Menü |
|
|
Hallo,
normalerweise google ich so lange bis ich die Lösung für das Problem habe, aber ich komplett am verzweifeln, weil ich den Fehler einfach nicht finde:
Ich habe ein CSS menü mit einer Liste gestaltet:
die aktive/geladene Seite (in diesem fall Home) wird anders formatiert und durch wird die aktive seite erkannt. das funkst alles und ist schön.
ABER: komischerweise rückt das Aktive Listenelement immer ein, ohne dass ich es ihm sage (siehe bild: home"button" überlappt nach rechts, bzw. ist verschoben)
Kann mir bitte jemand helfen, ich finde das Problem einfach nicht!
hier das css-stylesheet:
Code: | /* Die Navigation */
#navigation{
position:absolute;
text-align: left;
top:180px;
height:100%;
float:left;
background: blue;
width:170px;
padding: 0px 0px 0px 0px;
margin-left:0px;
border-left:3px double #fc0;
border-right:3px double #fc0;
border-bottom:3px double #fc0;
border-top:0px double #fc0;
color:#eee;
}
#navi {
display: block;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: left;
background-color:#22f;
width:99%;
}
html>body #navi {width:auto;}
#navi ul, li {
display: block;
width:99%;
border:0em solid #17a;
padding:0px;
margin:0px;
list-style: none;
}
html>body #navi ul,
html>body #navi li {width:auto;}
#navi a {
display: block;
list-style-type: none;
color: #fff;
background-color:transparent;
text-decoration: none;
font: bold 0.8em verdana, sans-serif;
border-width:1px;
border-style:solid;
border-color:#5bd #035 #068 #6cf;
border-left:1em solid #fc0;
padding:0.1em 0.1em 0.1em 0.9em;
margin: 0px;
width:99%;
}
html>body #navi a {width:auto;}
#navi a:hover {
display: block;
color: #ddd;
background-color:transparent;
text-decoration: none;
font: bold 0.8em;
margin: 0px;
border-color:#069 #6cf #5bd red;
padding:0.1em 0.1em 0.1em 0.9em;
width:99%;
}
html>body #navi a:hover {width:auto;}
/* Die aktiven Menüpunkte */
body#home li#homenavi a,
body#chapter1 li#chapter1navi a,
body#chapter2 li#chapter2navi a,
body#chapter3 li#chapter3navi a,
body#chapter4 li#chapter4navi a,
body#chapter5 li#chapter5navi a,
body#chapter6 li#chapter6navi a,
body#kontakt li#kontaktnavi a,
body#impressum li#impressumnavi a {
position:relative;
display: block;
list-style-type: none;
font: bold 0.8em;
margin: 0px;
background-color:#44a;
text-decoration:none;
border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;
width:99%;
color: #fff;
}
body#home li#homenavi,
body#chapter1 li#chapter1navi,
body#chapter2 li#chapter2navi,
body#chapter3 li#chapter3navi,
body#chapter4 li#chapter4navi,
body#chapter5 li#chapter5navi,
body#chapter6 li#chapter6navi,
body#kontakt li#kontaktnavi,
body#impressum li#impressumnavi {
display: block;
list-style-type: none;
margin: 0px;
background-color:transparent;
text-decoration:none;
border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;
color: #226;
width:99%;
}
html>body body#home ul#homenavi,
html>body body#home li#homenavi a,
html>body body#chapter1 li#chapter1navi a,
html>body body#chapter2 li#chapter2navi a,
html>body body#chapter3 li#chapter3navi a,
html>body body#chapter4 li#chapter4navi a,
html>body body#chapter5 li#chapter5navi a,
html>body body#chapter6 li#chapter6navi a,
html>body body#kontakt li#kontaktnavi a,
html>body body#impressum li#impressumnavi a,
html>body body#home li#homenavi,
html>body body#chapter1 li#chapter1navi,
html>body body#chapter2 li#chapter2navi,
html>body body#chapter3 li#chapter3navi,
html>body body#chapter4 li#chapter4navi,
html>body body#chapter5 li#chapter5navi,
html>body body#chapter6 li#chapter6navi,
html>body body#kontakt li#kontaktnavi,
html>body body#impressum li#impressumnavi
{
width:auto;
}
|
und noch das html:
Code: |
[...]
<div id="navigation">
<ul id="navi">
<li id="homenavi"><a href="index.html">HOME</a></li>
<li id="chapter1navi"><a href="chapter1/index.html">MENÜ #1</a></li>
<li id="chapter2navi"><a href="chapter2/">MENÜ #2</a></li>
<li id="chapter3navi"><a href="chapter3/">MENÜ #3</a></li>
<li id="chapter4navi"><a href="chapter4/">MENÜ #4</a></li>
<li id="chapter5navi"><a href="chapter5/">MENÜ #5</a></li>
<li id="chapter6navi"><a href="chapter6/">MENÜ #6</a></li>
<li id="kontaktnavi"><a href="contact/">CONTACT</a></li>
<li id="impressumnavi"><a href="imprint/">IMPRINT</a></li>
</ul>
</div> [...]
|
Vielen Dank schon mal!
made
|
|
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mo 24.04.2006 19:21
Titel
|
|
|
Hi
du vergibst dem Listenpunkt ja auch ein padding-left von 0.9em. Somit verschiebt sich der Inhalt in dem Listenpunkt um diesen Wert nach links
|
|
|
|
|
Anzeige
|
|
|
njow
Dabei seit: 23.04.2006
Ort: Löhne
Alter: 38
Geschlecht:
|
Verfasst Mo 24.04.2006 19:43
Titel
|
|
|
ehhm ... nach rechts
|
|
|
|
|
made
Threadersteller
Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 24.04.2006 19:50
Titel
|
|
|
aber das steht in allen drin....dann müssten ja alle verrutschen - ausserdem ist padding doch für den innen-abstand (zwischen border und (Text-)Inhalt),oder?
best made
|
|
|
|
|
njow
Dabei seit: 23.04.2006
Ort: Löhne
Alter: 38
Geschlecht:
|
Verfasst Mo 24.04.2006 19:56
Titel
|
|
|
beim padding kommt es ganz drauf an wo du es einsezt. in 'div', 'span' etc ist es der abstand von der outline zum content.
auf den layern direkt ist es natürlich der abstand zu anderen layern bzw anderem content.
zum problem:
falls du firefox benuzt, dann würde ich dir web-developer als plugin empfehlen. damit ist es möglich die seite zu inspizieren, und online z.b. css eigenschaften zu bearbeiten.
bei den links würde ich a:visited auch definieren
stelle sicher, dass alle links kein padding bzw margin-left besitzen.
lg barry
Zuletzt bearbeitet von njow am Mo 24.04.2006 19:58, insgesamt 1-mal bearbeitet
|
|
|
|
|
made
Threadersteller
Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 24.04.2006 20:07
Titel
|
|
|
ich schreibe den kram nur im editor....sonst nischt. aber das Plugin guck ich mir mal an ...
Wenn das normale Menü (nicht aktuelle Seiten) die gleichen Eigenschaften (padding/margin) wie die aktuelle Seite hat, sollte es doch eigentlich kein problem sein?
viel mehr vermute ich, dass es vielleicht mit <ul> zu tun hat. Weil ich <ul> für nicht aktuelle Menüpunkte definiert habe, aber ich hab langsam das gefühl es liegt daran, dass <ul> für den aktuellen Menüpunkt nicht definiert ist. hab nur keine ahnung wie....?
guck mal: padding hat die gleichen werte, dann kann es doch nicht wg. padding unterschiedlich aussehen?
nicht aktuelle Menüpunkte:
Code: | #navi {
display: block;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: left;
background-color:#22f;
width:99%;
}
html>body #navi {width:auto;}
#navi ul, li {
display: block;
width:99%;
border:0em solid #17a;
padding:0px;
margin:0px;
list-style: none;
}
html>body #navi ul,
html>body #navi li {width:auto;}
#navi a {
display: block;
list-style-type: none;
color: #fff;
background-color:transparent;
text-decoration: none;
font: bold 0.8em verdana, sans-serif;
border-width:1px;
border-style:solid;
border-color:#5bd #035 #068 #6cf;
border-left:1em solid #fc0;
padding:0.1em 0.1em 0.1em 0.9em;
margin: 0px;
width:99%;
}
html>body #navi a {width:auto;}
#navi a:hover {
display: block;
color: #ddd;
background-color:transparent;
text-decoration: none;
font: bold 0.8em;
margin: 0px;
border-color:#069 #6cf #5bd red;
padding:0.1em 0.1em 0.1em 0.9em;
width:99%;
}
html>body #navi a:hover {width:auto;}
|
Aktive Menüpunkte:
Code: |
body#home li#homenavi a,
body#chapter1 li#chapter1navi a,
body#chapter2 li#chapter2navi a,
body#chapter3 li#chapter3navi a,
body#chapter4 li#chapter4navi a,
body#chapter5 li#chapter5navi a,
body#chapter6 li#chapter6navi a,
body#kontakt li#kontaktnavi a,
body#impressum li#impressumnavi a {
position:relative;
display: block;
list-style-type: none;
font: bold 0.8em;
margin: 0px;
background-color:#44a;
text-decoration:none;
border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;
width:99%;
color: #fff;
}
body#home li#homenavi,
body#chapter1 li#chapter1navi,
body#chapter2 li#chapter2navi,
body#chapter3 li#chapter3navi,
body#chapter4 li#chapter4navi,
body#chapter5 li#chapter5navi,
body#chapter6 li#chapter6navi,
body#kontakt li#kontaktnavi,
body#impressum li#impressumnavi {
display: block;
list-style-type: none;
margin: 0px;
background-color:transparent;
text-decoration:none;
border-color:#069 #6cf #5bd white;
padding:0.1em 0.1em 0.1em 0.9em;
color: #226;
width:99%;
}
html>body body#home ul#homenavi,
html>body body#home li#homenavi a,
html>body body#chapter1 li#chapter1navi a,
html>body body#chapter2 li#chapter2navi a,
html>body body#chapter3 li#chapter3navi a,
html>body body#chapter4 li#chapter4navi a,
html>body body#chapter5 li#chapter5navi a,
html>body body#chapter6 li#chapter6navi a,
html>body body#kontakt li#kontaktnavi a,
html>body body#impressum li#impressumnavi a,
html>body body#home li#homenavi,
html>body body#chapter1 li#chapter1navi,
html>body body#chapter2 li#chapter2navi,
html>body body#chapter3 li#chapter3navi,
html>body body#chapter4 li#chapter4navi,
html>body body#chapter5 li#chapter5navi,
html>body body#chapter6 li#chapter6navi,
html>body body#kontakt li#kontaktnavi,
html>body body#impressum li#impressumnavi
{
width:auto;
} |
ps: also alle browser zeigen mir übrigens das padding als abstand vom rand zum text.
|
|
|
|
|
made
Threadersteller
Dabei seit: 24.04.2006
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
njow
Dabei seit: 23.04.2006
Ort: Löhne
Alter: 38
Geschlecht:
|
Verfasst Mo 24.04.2006 20:14
Titel
|
|
|
eben kurz zum firefox-pugin:
es ist nicht möglich es im nachhinein zu installieren.
du musst also firefox installieren ( bzw vorher deinstallieren ), und dann unter art oder so 'benutzerdefiniert' klicken.
erst da kommt die auswahl für das plugin.
hmm bin gerade auch nen bisl verwirrt. vielleicht schickst du uns mal den link der seite, damit man sich ein besseres bild machen kann.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Problem mit Listen-Menü (horizontal)
CSS Listen Menü - komisches Margin
CSS Menü - Probleme mit IE
Probleme mit Menü
Probleme mit DHTML-Menü
CSS/Javascript Menü bereitet Probleme
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|