HTML/CSS - lijst in combinatie met floats

[moozzuzz]

Hoi,

ik probeer een ledenlijst op een plusminus semantische wijze op het web te krijgen (ter vervanging van old-style HTML). Aangezien ik zelf nogal zot ben van het gebruik van UL voor alles dat met lijstjes te zien heeft, dacht ik dit op volgende wijze op te lossen:

HTML:

<ul>
  <li>
    <ul>
      <a href="#" class="foto"><img src="./users.xxx.jpg" ...></a>
      <li class="name">naam vd persoon</li>
      <li class="function">functie</li>
      <li class="phone">phone</li>
      <li class="etc">andere contact eigenschappen enz...</li>
      ...
    </ul>
  </li>
...
</ul>

Ik wil echter ook de miniatuur-foto's(100x100) inclusief link tonen naast het lijstje met persoonsgegevens. Ik dacht dit eerst met een float te doen en op zich werkt dat wel in FF, maar IE(6) weigert alle medewerking! Er is wel een klikbare zone (de A rond de IMG), maar die wordt niet gerenderd op het scherm .

Ik heb dan geprobeerd om de A absolute te plaatsen, doch ook hier geen succes in IE6: terwijl FF de foto'tjes mooi links bovenaan zet, gooit IE6 ze linksboven vanaf de padding (ipv vanaf de contentbox) en zodoende over de tekst.

Bovendien raak ik dan i/d problemen als er maar weinig gegevens getoond worden voor een betreffende persoon, de foto (als zijnde absolute = uit de flow) gewoon uit z'n box doorloopt (of niet helemaal getoond wordt)

De vraag nu: ben ik op het slechte pad (UL/LI) of vergeet ik iets essentieels of of of? Ik ben zelf uitgeput op andere mogelijkheden te zoeken... Tevens probeer ik ook een gastenboek in UL-vorm te krijgen en ook daar "verdwijnt" de floatende link

Cascading Stylesheet:

/* gestripte case */
ul {
    list-style: none;
    margin: 0px;
    padding:0px;
}
ul li {
    margin: 0px;
    padding: 0px 0px 0px 130px;
}
ul li ul {
    list-style: none;
    margin: 0px;
    padding:0px;
}
ul li ul li {
    margin: 0px; padding: 0px;
}
ul li ul li.phone { /* typisch truckje met icoontje als achtergrond */
    background: url('./icon.phone.gif') no-repeat top left;
    padding-left: 30px;
}
ul li a.foto {
    display: block;
    float: left;
}

[gertvdijk]

moozzuzz schreef op maandag 16 juni 2008 @ 13:22:

HTML:

<ul>
  <li>
    <ul>
      <a href="#" class="foto"><img src="./users.xxx.jpg" ...></a>
      <li class="name">naam vd persoon</li>
      <li class="function">functie</li>
      <li class="phone">phone</li>
      <li class="etc">andere contact eigenschappen enz...</li>
      ...
    </ul>
  </li>
...
</ul>

Eerst ff HTML leren
Je stopt nu een anchor los in een UL element... Kan me voorstellen dat een browser daar niks van bakt.
UL/LI keuze is niet verkeerd denk ik. Moet je het wel nog even leren toepassen.
En waarom twee niveaus ULs? Je kan toch gewoon elke foto in een LI stoppen en dan met <span class=...> of met P elementen werken? Of zelfs een UL erbinnen, maar dan gaat IE moeilijk doen vrees ik (te complex icm floats).

edit: tweede blik werpt me op andere gedachten.. Heb je misschien regel 3 en 4 verwisseld in je HTML? je CSS klopt wel namelijk.

[ Voor 11% gewijzigd door gertvdijk op 16-06-2008 13:30 ]

[Makkelijk]

^^^ Wel altijd weer leuk om te zien dat je zo makkelijk kleine dingetjes over het hoofd ziet waar je je kop op breekt. Hij heeft inderdaad regel 3 en 4 in zn HTML verwisseld zo te zien

[moozzuzz]

Bedankt voor de snelle reactie :^) In het voorbeeld op GoT inderdaad een regel omgegooid, want gestript uit m'n case waarbij ik een poging met achtergrondafbeelding had ondernomen (er was dus geen A meer in dat voorbeeld en die heb ik hier dan slordig genoeg op het verkeerde lijntje toegevoegd).

Dankzij de stripdown heb ik wél ontdekt dat ik in de loop van mijn denkproces op den duur verschillende strategiën door elkaar gebruikte. Voor de geinteresseerden zit ik nu met :

HTML:

<ul>
    <li>
        <ul>
            <li class="name" title="">Naam vd Persoon</li>
            <li class="function" title="">functie</li>
            <li class="tel" title="">telefoon of mobiel </li>
            <li class="email"><a href="mailto:em@il" title="">em@il</a></li>
        </ul>
        <a href="#" class="foto"><img src="./users.0.jpg" alt="Naam"></a>
    </li>
...

Het probleem met de verdwijnende floats bleef totdat ik een 2de position: relative toevoegde. De eerste vind ik relatief logisch, de tweede eigenlijk niet ... maar het werkt nu in IE...

Cascading Stylesheet:

#content ul { 
    list-style: none;margin: 0px;padding:0px; 
} 
#content ul li { 
    margin: 5px 0px;
    padding: 0px;      /* was links 130px, maar onzinnig */
    position: relative; /* zonder deze "verdwijnt" de float nog steeds */
} 
#content ul li ul { 
    position: relative; /* zonder deze "verdwijnt" de float nog steeds */
    float: right;
    width: 80%;         /* de foto is i/d praktijk zo'n 20% */
    list-style: none; margin: 5px 0px;padding:0px;
} 
#content ul li ul li { 
    margin: 0px; padding: 0px; 
} 
#content ul li ul li.function {
    font-style: italic;
    padding: 0px 0px 10px 0px;
}
#content ul li ul li.email { /* typisch truckje met icoontje als achtergrond */ 
    background: url('./icon.email.gif') no-repeat top left;
    padding-left: 30px; 
} 
#content ul li a.foto { 
    width: 19%; 
    height: 120px;
}

Noot: Heb even geen FF ter beschikking, maar als het in IE werkt, zal het zeker in FF werken :^)