html en css: lijst met twee kolommen

[Compuhair]

Ik wil in html een lijst maken. In deze lijst heb je als het ware twee kolommen; de linkerkolom heeft een plaatje, en de rechter kolom bevat content.

Dit is een voorbeeld:



Ik wil dit graag maken met behulp van <ul> en <li>. Dus ik heb deze html geschreven:

code:

<ul>
    <li>
        <span class="details">
        <img src="http://0.tqn.com/d/g/5105.jpg" alt="Angry face" />
        </span>
        <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    </li>

    <li>
        <span class="details">
        <img src="http://0.tqn.com/d/g/5105.jpg" alt="Angry face" />
        </span>
        <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    </li>
</ul>

En dit is de bijbehorende css:

code:

ul
{
    font-family: Arial;
    list-style-type: none;
    margin-left: 200px;
}

.left
{
    position: relative;
    left: -100px;
    border-width: 0px;
    width: 1px;
}

.right  
{
    border-width: 0px;
    display: inline;
}

Maar jammergenoeg levert dat het volgende resultaat op:



Zoals je ziet springt de tekst in. En de tekst staat veel lager dan het plaatje. Met align kan ik daar niks aan veranderen.

Weten jullie hoe dit makkelijk op te lossen is?

[Ealanrian]

na een snel testje lijkt een float left op de afbeeldingen je probleem op te lossen.

[peterkuli]

Waar gebruik jij de classes left en right? Ik zie alleen maar de class details in je html.

Daarnaast is <span> een inline element, wellicht is een <div> beter op z'n plaats omdat het een block element is? Maar dat weet ik niet zeker.

[Compuhair]

Ik heb Float geprobeerd.

Het gekke is alleen dat het tweede plaatje gaat inspringen als je je browser scherm breed maakt. Als je je browser scherm smal maakt, dan zie je een terugloop in de tekst.

Dit is nu mijn code:

html:

code:

 <ul>
        <li>
            <span class="details">
            <b>Naam</b>
            <br />
            <img src="http://0.tqn.com/d/g/5105.jpg" alt="Angry face" />
            <br />
            Subtitle: Master of the universe
            <br />
            Extra: Dit en dat
            </span>
            <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </li>

        <li>
            <span class="details">
            <img src="http://0.tqn.com/d/g/5105.jpg" alt="Angry face" />
            <br />
            Subtitle: Master of the universe
            <br />
            Extra: Dit en dat
            </span>
            <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </li>
    </ul>

css:

code:

ul
{
    font-family: Arial;
    list-style-type: none;
    margin-left: 100px;
}

li
{
    margin-bottom: 50px;
}
.details
{
    position: relative;
    left: -50px;
    border-width: 0px;
    width: 180px;
    float:left;
}

.content  
{
    background:#FFF;
    border-width: 0px;
    display: inline;
}

[Ealanrian]

als je dan nog een clear:left op li zet zal die er onderstaan en waarschijnlijk ook links, (moeilijk testen op werk)

[Compuhair]

peterkuli schreef op woensdag 09 juni 2010 @ 11:56:
Waar gebruik jij de classes left en right? Ik zie alleen maar de class details in je html.

Sorry, copy-paste fout. Zie de nieuw code in mijn vorige post.

Daarnaast is <span> een inline element, wellicht is een <div> beter op z'n plaats omdat het een block element is? Maar dat weet ik niet zeker.

Heb ik geprobeerd, maar dan krijg ik de image en de content niet naast elkaar, maar onder elkaar.

[Grote Schurk]

De rechter span als block renderen, en een vaste breedte opgeven. Dan komen ze niet meer onder elkaar.

[Bosmonster]

Wat ik met dit soort dingen nog wel eens doe is de LI op position relative met een padding links voor de tekst en de image position absolute op 0,0. Zo hoef je helemaal niet met floats, clears en extra elementen te kutten

[mcDavid]

Bosmonster schreef op woensdag 09 juni 2010 @ 12:16:
Wat ik met dit soort dingen nog wel eens doe is de LI op position relative met een padding links voor de tekst en de image position absolute op 0,0. Zo hoef je helemaal niet met floats, clears en extra elementen te kutten

En als je plaatje een keertje hoger is dan je tekst is je hele layout naar de stront.

[R4gnax]

mcDavid schreef op woensdag 09 juni 2010 @ 12:42:
[...]

En als je plaatje een keertje hoger is dan je tekst is je hele layout naar de stront.

Maar aangezien het plaatje position: absolute is, kun je CSS clip: rect() gebruiken en heb je dat probleem niet.

[Bosmonster]

mcDavid schreef op woensdag 09 juni 2010 @ 12:42:
[...]

En als je plaatje een keertje hoger is dan je tekst is je hele layout naar de stront.

Goh.. min-height?

[mcDavid]

Bosmonster schreef op woensdag 09 juni 2010 @ 13:09:
[...]


Goh.. min-height?

Werkt alleen als ieder plaatje altijd exact dezelfde hoogte heeft.

[mcDavid]

R4gnax schreef op woensdag 09 juni 2010 @ 12:57:
[...]


Maar aangezien het plaatje position: absolute is, kun je CSS clip: rect() gebruiken en heb je dat probleem niet.

Kan wel, maar dat lijkt me eerder een design-keuze dan een workaround om maar position:absolute te kunnen gebruiken.

[Compuhair]

Het lukt nu wel aardig, met float enzo. Alleen als de content tekst maar 1 regel is, dan begint de nieuwe Line Item te hoog, en loopt dus door de voorgaande image heen.
Op een of andere manier werkt de margin-bottom: 50px niet.
Dus de hoogte van een line-item wordt niet correct herkend.

Is dat nog op te lossen?

[ Voor 10% gewijzigd door Compuhair op 09-06-2010 13:41 ]

[mcDavid]

Wat heb je nu staan dan?

[Bosmonster]

mcDavid schreef op woensdag 09 juni 2010 @ 13:14:
[...]

Werkt alleen als ieder plaatje altijd exact dezelfde hoogte heeft.

Ik zeg ook dat ik dat soms gebruik, bijvoorbeeld als de plaatjes een vaste hoogte hebben, wat meestal het geval is met dit soort opsommingen (thumb).

Ik zeg nergens dat ik dit per se altijd wel gebruiken, dat verzin je er zelf bij.

Blijft een betere oplossing dan allemaal extra elementen en floats en clears als je het mij vraagt.

[ Voor 10% gewijzigd door Bosmonster op 09-06-2010 13:42 ]

[Compuhair]

css:


ul
{
font-family: Arial;
list-style-type: none;
margin-left: 200px;
}

li
{
position: relative;
margin-bottom: 50px;

}
.details
{
position: absolute;
left: -200px;
border-width: 0px;
width: 220px;
}

.content
{
background:#FFF;
border-width: 0px;
display: block;
width: 400px;
}

[Bosmonster]

HTML:

<li>
   <img class="visual"... >
   Lorem ipsum....
</li>

Cascading Stylesheet:

li {
   position: relative;
   min-height: 100px; /* hoogte van de afbeelding */
   padding-left: 120px;
}

li img.visual {
   position: absolute;
   left: 0;
   top: 0;
}

Klaar, geen extra elementen, geen floats en andere meuk. Werkt perfect als de afmetingen vast zijn van de afbeeldingen, wat dus meestal het geval is in dit soort overzichtjes.

[OkkE]

Of anders is dit misschien ook een oplossing:

.

HTML:

<li>
   <img class="visual"... >
   Lorem ipsum....
</li>

Cascading Stylesheet:

ul li { overflow: hidden; padding-left: 120px; }
ul img.visual { display: block; float: left; margin-left: -120px; }

[Bosmonster]

Ja kan ook, scheelt nog 2 regels (display:block is overbodig als je float)

[Hiroj]

Ik had het persoonlijk op deze manier gedaan

code:

<ul>
    <li>
        <div class="img">
            <img src="" alt="Mijn plaatje" />
        </div>
        <div class="content">
            Mijn content komt hier
        </div>
    </li>
    <li>
        <div class="img">
            <img src="" alt="Mijn plaatje" />
        </div>
        <div class="content">
            Mijn content komt hier
        </div>
    </li>
</ul>

Met deze CSS

code:

Jou <ul> en <li> code
...

div.img
{
    float:left
    width:100px;
    height:100%;
}
div.content
{
    float:left;
    margin-left:20px;
    width:500px;
}

EDIT als jij nu een plaatje plaatst zal er nooit tekst onder komen te staan. Dit wil je als ik je plaatje zie.

[ Voor 9% gewijzigd door Hiroj op 11-06-2010 15:12 ]

[Bosmonster]

2 extra (zinloze) divs nodig per li

[NiteSpeed]

Die div's en span's zijn totaal niet nodig. Je hebt al een <li> waar je een #id aan kan hangen. Vervolgens pak je alle images die onder dat #id vallen en je bent al een stap verder.