Hjelp med liste

Hjelp med liste

Innleggav guzh » lør 10.05.2008 18:38

Jeg har en liste som ser slik ut;
Kode: Merk alt
<ul class="subnav">
   <li class="sub"><a href="#">Inspirasjon</a>
      <ul class="children">
         <li class="sub"><a href="#">Foto</a></li>
         <li class="sub"><a href="#">Grafisk design</a></li>
      </ul>
</li>
   <li class="sub"><a href="#">Jobb &amp; Arbeid</a></li>
   <li class="sub"><a href="#">Livet</a></li>
   <li class="sub"><a href="#">Reiser</a></li>
</ul>


Lista er horisontal, men "children"-klassen er vertikal..
Jeg får problemer da jeg ønsker at listeelementene skal ha en padding på 5px (altså 5 rundt hele).
Grunnen er at dette også går inn på "Children"-klassen. Dette ønsker jeg ikke..
Jeg skal ha en hover-funksjon og på "Inspirasjon" blir blir dette en slags ramme rundt "Children"-klassen...

finnes det noen løsning på dette?
medlem i 194 måneder
 

Re: Hjelp med liste

Innleggav musher » lør 10.05.2008 21:25

Sett forskjellige elementer i css-en

En heter ul, li og en heter ul, li, ul, li

Moderator
Brukerens avatar
medlem i 230 måneder
 

Re: Hjelp med liste

Innleggav guzh » lør 10.05.2008 23:46

men betyr ikke "ul, li" at både ul og li skal ha følgende innstillinger?
eller er det bare noe jeg har trodd i evigheter?

har forresten lagt merke til et par CSS-dokumenter som har inneholdt < og * f.eks:
Kode: Merk alt
html>body #themeswitcher select {margin-left:-12px;}

Kode: Merk alt
* html .contenttext p{overflow:hidden;width:99%;}

hva betyr disse?
medlem i 194 måneder
 

Re: Hjelp med liste

Innleggav tjodolv » søn 11.05.2008 1:58

ul, li betyr "både ul og li"
ul li og ul>li betyr "alle li som er underelementer av ul"
ul.children li betyr "alle li som er underelementer av ul med klasse 'children'"
Asterisken * er en joker, som betyr "alt", feks vil dette:
Kode: Merk alt
div#maincontent * {
    color: #f00;
}

bety at alle elementer som kommer inni diven som har id #maincontent skal ha rød farge på tekst. Tekst som plasseres inni diven uten noen tag rundt seg vil ikke påvirkes av dette.

Dersom du setter en stil på ul, vil stilen på ul.children overskrive denne på alle ul som har children klassen. Dette er fordi css reglene sier at jo mer spesifikk en stil er, jo høyere prioritet har den.

Edit: Spesifikasjonene fra W3C forklarer det egentlig ganske greit:
http://www.w3.org/TR/REC-CSS2/selector.html
http://www.w3.org/TR/REC-CSS2/cascade.html

Brukerens avatar
medlem i 208 måneder
 

Re: Hjelp med liste

Innleggav Giltvedt » søn 11.05.2008 2:24

Se heller som har skrevet gode tutorials på stylingen av menyen som CSS.Maxdesign.com.

Moderator
Brukerens avatar
medlem i 242 måneder
 

Re: Hjelp med liste

Innleggav guzh » søn 11.05.2008 14:23

ok, takk for svar (:

jeg har lest en del på CSS.Maxdesign.com., men har ikke funnet noe mer om problemet mitt..

Jeg klarte ikke å forklare problemet mitt ordentlig, så jeg laget et par illustrasjoner:
Nå ser det slik ut:
Bilde
Det prikkete er paddingen, de solide strekene er li. (padding i children er 0)
jeg skal ha en egen bakgrunnsfarge på children (blå strek), og jeg syns det ser dumt ut når de da får bakgrunnsfargen til parent (rød strek) som en ramme rundt seg

Jeg ønsker å få det slik:
Bilde
(padding er 5px)

beklager at jeg formulerer meg litt kronglete, men det er litt vanskelig når jeg ikke er helt inni dette ;\
medlem i 194 måneder
 

Re: Hjelp med liste

Innleggav decodex » man 12.05.2008 19:30

tjodolv skrev:ul li og ul>li betyr "alle li som er underelementer av ul"


Litt utydelig akkurat der. ul>li vil kun treffe på alle li-elementer som er direkte under et ul-element. I akkurat dette eksempelet skal jo ikke noe annet forekomme, men synes det er viktig å påpeke at ul li og ul>li teknisk sett ikke er synonymer. div>a er f.eks. ikke det samme som div a.

Når det gjelder problemstillingen til trådstarter, så antar jeg du har noe á la:
Kode: Merk alt
ul li {
padding: 5px;
}


Om du så ønsker å fjerne padding på li-elementer i undermenyer, kan du legge til:

Kode: Merk alt
ul li ul li {
padding: 0;
}


Men ettersom du har en del klasser å utnytte her ville det kanskje vært bedre å være mer spesifikk, slik at du kun setter padding via:

Kode: Merk alt
ul li.sub {
padding: 5px;
}


På den måten vil ikke li-elementer i ul med klassen «children» bli berørt.

Brukerens avatar
medlem i 217 måneder
 

Re: Hjelp med liste

Innleggav guzh » man 12.05.2008 20:57

jeg fant ut av det, ved å ha padding på li a i stedet (:

noen ganger tenker man litt kort XD
medlem i 194 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Ingen registrerte brukere