[CSS] Krijg Unordered List niet goed gedefinieerd

[Reveller]

Ik heb de volgende

HTML:

<style>
.linksPadding {
  padding: 3px 0px 3px 30px;
}

#navcontainer { width: 100%; }

#navcontainer ul {
    margin-left: 0;
    padding-left: 25;
    list-style-type: disc;
    font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a {
    display: block;
    padding: 4px 9px 4px 9px;
    width: 100%;
    border-bottom: 1px solid #DE724A;
    font-family:'Trebuchet MS',verdana, arial, sans-serif;
    font-size: 12px;
}

#navcontainer a:link, #navlist a:visited {
    color: #FFF;
    text-decoration: none;
}

#navcontainer a:hover {
    background:#B32A00;
    text-shadow: 2px 2px 3px #551302;
    color: #FFF;
}
</style>

<div class="linksPadding">
  <div id="navcontainer">
    <ul id="navlist">
    <li><a class="navigatorLink" href="">Over Ons</a></li>
    <li><a class="navigatorLink" href="">Producten</a></li>
    <li><a class="navigatorLink" href="">Diensten</a>
      <ul id="navlist">
      <li><a class="navigatorLink" href="">Particulier</a>
        <ul id="navlist">
    <li><a class="navigatorLink" href="">Dienst A</a></li>
    <li><a class="navigatorLink" href="">Dienst B</a></li>
    </ul>
      </li>
      <li><a class="navigatorLink" href="">Zakelijk</a></li>
      </ul>
    </li>
    <li><a class="navigatorLink" href="">Contact</a></li>
    <li><a class="navigatorLink" href="">Sitemap</a></li>
    </ul>
  </div>
</div>

Dit levert het volgende resultaat op (als ik met de muis op "Dienst B" sta):



De bedoeling is echter:



Met andere woorden: ook al heb ik een lijst in een lijst, ik wil graag dat wanneer iemand over een link - op welk niveau in de boom dan ook - gaat, de volledige celbreedte een andere achtergrond kleur krijgt. Ook de oranje lijntjes moeten even breed lopen.

Ik speel nu al uren met de margin en padding van de UL, LI en A tags, maar volgens mij doe ik iets fundamenteels voud. Wie helpt mij op weg of kent een goede tutorial hierover?

Ik hoop dat er wel een oplossing is. Ik heb er een behoorlijke tijd over gedaan om mijn PHP scriptje zo te krijgen dat hij correcte lijst-in-lijst HTML uitspuugt. En nou zul je zien dat ik op design niveau vast loop

Het alternatief is een scriptje schrijven dat een enkele laag LI's aanmaakt, maar deze indent:

HTML:

<ul>
<li>&gt;<a href="">Over Ons<a></li>
<li>&gt;<a href="">Producten<a></li>
<li>&gt;<a href="">Diensten<a></li>
<li>&nbsp; &gt;<a href="">Particulier<a></li>
<li>&nbsp;&nbsp; &gt;<a href="">Dienst A<a></li>
<li>&nbsp;&nbsp; &gt;<a href="">Dienst B<a></li>
<li>&nbsp; &gt;<a href="">Zakelijk<a></li>
<li>&gt;<a href="">Contact<a></li>
<li>&gt;<a href="">Sitemap<a></li>

Maar dat is eigenlijk niet zoals het hoort...toch?

[crisp]

nee, je doet niets voudt, maar je element begint nu eenmaal niet helemaal links door de padding van het parent-element.
Dit effect is op de 'nette' manier gewoonweg niet te bereiken.

[Verwijderd]

je kan proberen alle margin en padding op 0 te zetten (left dan iig), de list-style-type uit, en dan in elke <li> een plaatje en een stukkie tekst zetten. Het plaatje zorgt dan voor het bolletje (of eventueel nog iets anders) en drukt de tekst ook op z'n goede plaats.

of wellicht is in plaats van een plaatje een lege span met float: left; en een achtergrond nog wel ff iets netter, dan zit de definitie van je (layout gerichte) plaatje niet in je HTML, maar in je CSS

[ Voor 30% gewijzigd door Verwijderd op 24-07-2004 09:47 ]

[djluc]

Volgens mij moest je een negatieve margin gebruiken o.i.d. maar precies weet ik het niet.

[zubauza]

djluc schreef op 24 juli 2004 @ 12:37:
Volgens mij moest je een negatieve margin gebruiken o.i.d. maar precies weet ik het niet.

idd, dit zou moeten werken

code:

li {
margin-left: -30px;
padding-left: 30px;
}

[crisp]

negatieve margin kan wel, maar dan moet je wel van tevoren bepalen wat je indent-level is, en op basis daarvan dan een aparte class toekennen; je krijgt dan zoiets in je CSS:

Cascading Stylesheet:

li.indent1 {
  margin-left: 0px;
  padding-left: 0px;
}
li.indent2 {
  margin-left: -30px;
  padding-left: 30px;
}
li.indent3 {
  margin-left: -60px;
  padding-left: 60px;
}
/* etcetera */

[zubauza]

crisp schreef op 24 juli 2004 @ 13:40:
negatieve margin kan wel, maar dan moet je wel van tevoren bepalen wat je indent-level is, en op basis daarvan dan een aparte class toekennen

aaah idd daar had ik niet aan gedacht

[Reveller]

@iedereen - bedankt! Ik ga het eens proberen met negatieve margins, al is het wel jammer dat je dan nog steeds een aparte class moet maken voor elke level...hoewel ik ook die classes uit de .css zou kunnen gooien en in het bestand zelf tussen style tags met php kan genereren...ik kom er nog op terug...

[coubertin119]

crisp schreef op 24 juli 2004 @ 13:40:
negatieve margin kan wel, maar dan moet je wel van tevoren bepalen wat je indent-level is, en op basis daarvan dan een aparte class toekennen; je krijgt dan zoiets in je CSS:

Cascading Stylesheet:

li.indent1 {
  margin-left: 0px;
  padding-left: 0px;
}
li.indent2 {
  margin-left: -30px;
  padding-left: 30px;
}
li.indent3 {
  margin-left: -60px;
  padding-left: 60px;
}
/* etcetera */

Kan je niet gewoon met selectors werken?

Cascading Stylesheet:

ul li { /*eerste niveau*/ }
ul li li { /*tweede niveau*/ }

Classes zijn nutteloos imho in dit geval .

[Verwijderd]

coubertin119 schreef op 24 juli 2004 @ 15:15:
[...]
Kan je niet gewoon met selectors werken?

Cascading Stylesheet:

ul li { /*eerste niveau*/ }
ul li li { /*tweede niveau*/ }

Classes zijn nutteloos imho in dit geval .

Hier ben ik het mee eens, en dan alles een margin en padding van 0 geven, en per niveau dieper meer padding geven waarmee je het indenten laat zien. Zo heb je volgens mij overal de background ook goed zonder met negatieve margins te werken.

[edit] En let op! Je id moet uniek zijn! (Ik zie een paar keer id="navList")

quote: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

[ Voor 35% gewijzigd door Verwijderd op 25-07-2004 14:18 ]

[crisp]

coubertin119 schreef op 24 juli 2004 @ 15:15:
[...]
Kan je niet gewoon met selectors werken?

Cascading Stylesheet:

ul li { /*eerste niveau*/ }
ul li li { /*tweede niveau*/ }

Classes zijn nutteloos imho in dit geval .

slim! dat ik daar niet aan gedacht heb

[Reveller]

Ik heb nu het volgende:

HTML:

<style>
#navcontainer {
  width: 100%;
  padding-top: 10px;
  padding-left: 30px;
}

#navcontainer ul {
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 0px;
}

#navcontainer ul li {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: disc;
  margin: 0px;
}

#navcontainer ul li li {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: square;
  margin-left: 0px;
  padding-left: 0px;
}
</style>

<div id="navcontainer">
  <ul>
  <li><a href="">Over Bedrijf</a>
    <ul>
    <li><a href="">Erik</a></li>
    <li><a href="">Annelieke</a></li>
    </ul>
  </li>
  <li><a href="">Producten</a></li>
  </ul>
</div>

Dit geeft de volgende output:



Als ik dan de padding-left van #navcontainer ul li li verander in 25, krijg ik:



Met andere woorden: de vakjes blijven niet even breed. Wie weet raad Bovendien, maar dat is voor later zorg, wil ik graag de discs en squares binnen de oranje lijntjes hebben ipv erbuiten. Voorlopig hoop ik dat iemand een oplossing biedt voor het hoofdprobleem.

[ Voor 21% gewijzigd door Reveller op 25-07-2004 15:58 ]

[Verwijderd]

Reveller schreef op 25 juli 2004 @ 15:56:Met andere woorden: de vakjes blijven niet even breed. Wie weet raad Bovendien, maar dat is voor later zorg, wil ik graag de discs en squares binnen de oranje lijntjes hebben ipv erbuiten. Voorlopig hoop ik dat iemand een oplossing biedt voor het hoofdprobleem.

Maak background-images van de bullits en positioneer die ook, afhankelijk van de diepte.

Cascading Stylesheet:

ul li {
    background:url(bullit.gif) 10px 0;
}

ul li li {
    background-position 20px 0;
}

ul li li li {
    background-position 30px 0;
}

etc.

P.S. Als je de lijntjes ook door wilt laten lopen. Zet de margin en padding dan op 0 en gebruik text-indent voor het positioneren van de tekst. Let wel op dat de tekst niet afbreekt, want de volgende lijn komt weer gewoon helemaal links.

[ Voor 17% gewijzigd door Verwijderd op 25-07-2004 20:15 ]

[Savantas]

Dat gaat niet lukken, de lijn staat ten slotte bij <a> en niet bij <li>, en de link zelf begint pas na aanhef van de list-item.
Je zou als bullit een pijltje met bottomline (gewoon in Pshop oid dus lijntje in bullitplaatje bijvoegen, in juiste kleur en dikte) kunnen nemen, maar vergt even meten waar precies het leijntje moet komen om precies aan te laten sluiten op de lijn van de link. Daarnaast vergt dit later bij verandering van dikte/kleur wat extra werk.
Of misschien bij elke <li> een lijn ipv bij de link, maar dat werkt ook niet lekker, omdat je soms een li in een li hebt, zodat er nog geen lijn onder komt omdat niveau 1 nog niet afgesloten is...

Wat wel beter werkt is de bullit niet toekennen aan de <li>, maar aan je <a> als background:

code:

<style>
#navcontainer
{ font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 00px;
padding-left: 0px;
width: 208px }

#navcontainer a
{ background: url(bullit.gif) no-repeat 0px ;
display: block;
padding: 4px 15px;
border-bottom: 1px solid #de724a;
width: 100% }

#navcontainer a:link, a:visited
{ color: #FFF;
text-decoration: none }

#navcontainer a:hover
{ background:#B32A00;
text-shadow: 2px 2px 3px #551302;
color: #FFF }

#navcontainer ul
{ margin-left: 0px;
padding-left: 0px }

#navcontainer ul li
{ text-indent: 0px;
list-style-type: none; }

#navcontainer ul li li
 { text-indent: 10px;
list-style-type: none; }

#navcontainer ul li li li
{ text-indent: 20px;
list-style-type: none; }
</style>

Ah, Resistanz heeft eenzelfde oplossing. En een nettere CSS!
Enig verschil is dat hij de bullits ook laat inspringen bij 2e en 3e niveau.

[ Voor 59% gewijzigd door Savantas op 26-07-2004 11:33 . Reden: typo ]

[Verwijderd]

Dit lijkt te werken in Firefox en IE 6:

HTML:

#navMenu {
    background-color: #CD3201;
    color: #000000;
    padding: 20px;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    width: 300px;
}

#navMenu li a {
    display: block;
    background-color: transparent;
    color: #FFFFFF;
    border-bottom: 1px solid #DE724A;
    text-decoration: none;
    padding: 5px;

    /* IE only, stretching the anchor size to 100% */
    _width: 100%;
}
#navMenu li a:hover {
    background-color: #B32A00;
    text-shadow: 2px 2px 3px #551302;
    color: #FFFFFF;
}

#navMenu ul, #navMenu ul li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#navMenu ul li a {
    padding-left: 20px;
    background: url("bullet.gif") 5px center no-repeat;
}
#navMenu ul li li a {
    padding-left: 40px;
    background: url("bullet.gif") 25px center no-repeat;
}
#navMenu ul li li li a {
    padding-left: 60px;
    background: url("bullet.gif") 45px center no-repeat;
}
  -->
  </style>
</head>

<body>


<div id="navMenu">
  <ul>
    <li><a href="#">Over Ons</a></li>
    <li><a href="#">Producten</a></li>
    <li><a href="#">Diensten</a>
      <ul>
        <li><a href="#">Particulier wil soms nog wel eens 
              zeggen dat de tekst langer is dan gedacht enzo</a>
          <ul>
            <li><a href="#">Dienst A</a></li>
            <li><a href="#">Dienst B</a></li>
          </ul>
        </li>
        <li><a href="#">Zakelijk</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Sitemap</a></li>
  </ul>
</div>

Zie http://www.rszdesign.com/test/test.html

[ Voor 37% gewijzigd door Verwijderd op 26-07-2004 10:42 ]

[Verwijderd]

Zeg, is dat niet heel erg vies, om de bullet weg te halen en dan dmv een ge-offset achtergrondplaatje weer terug te faken?

[Verwijderd]

Verwijderd schreef op 26 juli 2004 @ 11:37:
Zeg, is dat niet heel erg vies, om de bullet weg te halen en dan dmv een ge-offset achtergrondplaatje weer terug te faken?

Vies voor wie?? Als CSS niet wordt ondersteund zie je de normale bullet toch? Het enige nadeel is dat je hem niet kan laten meeresizen...

[Verwijderd]

Vies voor mijn gevoel .

Maar je zal wel gelijk hebben .

[zubauza]

misschien heb je hier wat aan:

http://css.maxdesign.com.au/listutorial/sub_master.htm

maar die bullet of disc ofzo kan je dan vergeten denk ik

dan toch maar de vieze manier van ReSistanZ