4 svar · 409 visningar · startad av aasah
Ursäkta knasig rubrik...
Jag har en meny som bygger på en "<ul>, <li>"-lista som definieras till ett drop-down-meny-utseende mha CSS. Detta utseende definieras för aliaset #nav enbart.
Men sedan har jag "<ul>, <li>"-listor på några av mina sidor, vilka jag vill ska se ut som listor. Dessutom vill jag att de ska ha samma margin och padding som alla andra element på sidan. Så då la jag in:
li, ul, ol {
margin: 5px;
padding: 5px;
}
Problemet är att då åker även menyns li och ul element iväg... Hur löser jag detta? Nav definieras enligt:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 6em;
}
#nav li {
float: left;
width: 6em;
}
#nav li ul {
position: absolute;
width: 6em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Ge listan ett class-attribut, eller lägg den i en div med ett class-attribut.
.lista li, .lista ul, .lista ol {
margin: 5px;
padding: 5px;
}
...
<div class="lista">
<ol>
...
</ol>
</div>
Edit: Och för att svara mer specifikt på din fråga: När du skriver li, ul, ol så syftar du på alla element med det taggnamnet, även om de har ett class-attribut.
Hmm...
Grundinställning:
ul padding 5 pixel samt margin 5 pixel
li padding 5 pixel samt margin 5 pixel
Navigationen ställer bara in padding och margin för ul, vilket ger att:
#nav ul - egen regel - noll i marginal och noll i padding
#nav li - regel saknas, men li har en regel om att margin och padding skall ha 5 pixel margin och padding, så då gäller den.
Lägg till #nav li (och kanske #nav ol om du vill använda ol för navigeringen ;) ) i din första regel bara så bör det funka
#nav, #nav ul, [b]#nav li, #nav ol[/b] {
padding: 0;
margin: 0;
list-style: none;
}
nitro2k01 skrev:
Edit: Och för att svara mer specifikt på din fråga: När du skriver li, ul, ol så syftar du på alla element med det taggnamnet, även om de har ett class-attribut.
Åhå... det är ju onekligen bra att veta.
Jarvklo - Tack för en ordentlig utredning! Men...
jarvklo skrev:
Lägg till #nav li (och kanske #nav ol om du vill använda ol för navigeringen ;) ) i din första regel bara så bör det funka
#nav, #nav ul, [b]#nav li, #nav ol[/b] { padding: 0; margin: 0; list-style: none; }
Funkar det när man har en separat definition för #nav li alldeles nedanför? (Se citerad CSS ovan.)