[css]drie kolommen in li-element

[Verwijderd]

de bedoeling:


de html

HTML:

<div id="results">

<ul>
        
            <li>
                <div clas="foto">
                    [img]"image.aspx?image=ubqvjsxak.jpg"[/img]
                </div>
                <div class="first">
                    <span id="_ctl6_rptResults__ctl1_lblModel" class="model">E</span>
                    <span id="_ctl6_rptResults__ctl1_lblMotor" class="motortekst">tdi 150 pk</span>

                    <span id="_ctl6_rptResults__ctl1_lblKilometerstand" class="kilometerstand">10000</span>
                </div>
                
                <div class="second">                    
                    <span id="_ctl6_rptResults__ctl1_lblNieuwprijs" class="nieuwprijs">100</span>
                    <span id="_ctl6_rptResults__ctl1_lblOnzeprijs" class="onzePrijs">90,0000</span>
                    <span id="_ctl6_rptResults__ctl1_lblVoordeel" class="voordeel">10,0000</span>
                </div>

            </li>
        
            <li>
                <div class="foto">
                    [img]"image.aspx?image=lfsrkrlwd.jpg"[/img]
                </div>
                <div class="first">
                    <span id="_ctl6_rptResults__ctl2_lblModel" class="model">C-klasse</span>
                    <span id="_ctl6_rptResults__ctl2_lblMotor" class="motortekst">benzine</span>
                    <span id="_ctl6_rptResults__ctl2_lblKilometerstand" class="kilometerstand">10000</span>

                </div>
                
                <div class="second">                    
                    <span id="_ctl6_rptResults__ctl2_lblNieuwprijs" class="nieuwprijs">10000</span>
                    <span id="_ctl6_rptResults__ctl2_lblOnzeprijs" class="onzePrijs">100,0000</span>
                    <span id="_ctl6_rptResults__ctl2_lblVoordeel" class="voordeel">900,0000</span>
                </div>
            </li>
        
            </ul>

</div>

Zoals je ziet gebruik ik lijsten, elk li-element stelt een "record" voor.
Deze moet dan worden verdeeld over drie kolommen.

de css

Cascading Stylesheet:

 .first{
  margin-left:170px;
  margin-right:170px;

  


  }
  .second{
  float:right;
  width:170px;

  }
.foto{
float:left;
width:170px;
}

#results{

  margin-left:50px;
  border-color:#3300CC;
  border-style:solid;
  width:600px;  
  margin-top:0px;
padding-top:0px;

  }


#results li{
    
  list-style-type:none;
  background-color:#00CC66;
  height:200px;
  }
/*spans*/
.model{
display:block;
}
.motortekst{
display:block;
}
.kilometerstand{
display:block;
}
.nieuwprijs{
display:block;
}
.onzeprijs{
display:block;
}
.voordeel{
display:block;
}

resultaat

http://www.garagesmedts.be/test.htm (de kleuren zijn maar illustratief).

Problemen:
Het is helemaal naar de vaantjes precies. Voor één element luktet nog min of meer (http://www.garagesmedts.be/test2.htm)

Wie kan mij helpen?

[André]

Cascading Stylesheet:

.first {
  float:left;
}

.second {
  float:right;
  width:170px;
}

.foto {
  float:left;
  width:170px;
}

En bij de eerste foto een s toevoegn in class.

[Verwijderd]

Dank je

[klokop]

Zomaar een idee: kan je die foto-div niet weglaten en de foto als bg in de css def. van li zetten?

[SchizoDuckie]

Waarom gebruik je hier niet netjes een <table> voor? dit is toch tabulaire data

[Verwijderd]

Papa Eend schreef op 24 augustus 2004 @ 13:12:
Waarom gebruik je hier niet netjes een <table> voor? dit is toch tabulaire data

Ik denk dat ik hier de kolommen zou gebruiken om mijn data op te maken. Vervolgens zou ik een table in een table maken om mijn elementen onder elkaar te laten staan. Dan gebruik je de tabel toch voor layout?
Uiteraard mag je een tabel opmaken! Resultaten van de zoekopdracht van auto's zijn in principe tabulair, maar het is ook een opsomming.

klokop schreef op 24 augustus 2004 @ 12:58:
Zomaar een idee: kan je die foto-div niet weglaten en de foto als bg in de css def. van li zetten?

Jep, dit heb ik nu veranderd

[SchizoDuckie]

Verwijderd schreef op 24 augustus 2004 @ 13:31:
[...]

Ik denk dat ik hier de kolommen zou gebruiken om mijn data op te maken.

Dus? Daar is CSS toch voor?

Vervolgens zou ik een table in een table maken om mijn elementen onder elkaar te laten staan. Dan gebruik je de tabel toch voor layout?

euh
s

Uiteraard mag je een tabel opmaken! Resultaten van de zoekopdracht van auto's zijn in principe tabulair, maar het is ook een opsomming.

Dan kan je van elke tabel wel zeggen dat het een opsomming is. Dit soort dingen (nieuwprijs, onze prijs, voordeel) hoort imho echt in een table thuis. Dat er dan een plaatje naast staat mag je dan verwaarlozen. Je hoeft ook hiervoor geen tables te nesten, als je wat stoeit met rowspan ben je best snel klaar

Om het simpeler uit te leggen:
Ga er vanuit dat iemand GEEN css ondersteuning heeft, blind is, en toch je site moet kunnen snappen. Als dit soort gegevens in een tabel staat, is het duidelijk wat bij wat hoort

[ Voor 14% gewijzigd door SchizoDuckie op 24-08-2004 16:32 ]

[Verwijderd]

Als die foto's tevens kopjes zijn dan zou ik me zoiets kunnen voorstellen:

code:

<table>
 <tbody>
  <tr><th scope="rowgroup" rowspan="3">foto<td>Tekst 1<td>Tekst 1
  <tr><td>Tekst 2<td>Tekst 2
  <tr><td>Tekst 3<td>Tekst 3
 <tbody>
  <tr><th scope="rowgroup" rowspan="3">foto<td>Tekst 1<td>Tekst 1
  <tr><td>Tekst 2<td>Tekst 2
  <tr><td>Tekst 3<td>Tekst 3
 <tbody>
  <!-- etc. -->
</table>

(Misschien met iets meer metadata attributen.)

[DeFeCt]

afgezien daarvan.. een div in een li is dat symantisch verantwoord?

[Verwijderd]

DeFeCt schreef op 24 augustus 2004 @ 17:11:
afgezien daarvan.. een div in een li is dat symantisch verantwoord?

Semantisch sowieso, omdat een DIV niks aan semantiek afdoet of toevoegt. Syntactisch is er ook geen probleem omdat een LI block elementen mag bevatten voor zover ik weet.

[DeFeCt]

Verwijderd schreef op 24 augustus 2004 @ 23:49:
Syntactisch is er ook geen probleem omdat een LI block elementen mag bevatten voor zover ik weet.

en zo leren we elke dag weer bij