[html] Inhoud vernaggeld tabel layout

[UltimateB]

Ik heb een tabel die ik wil gebruiken om producten te laten zien. Deze tabellen maken gebruik van een vaste breedte met een achtergrond afbeelding om er netje uit te zien. Alles gaat helemaal goed tot op het moment dat ik er iets instop en de text dan langer is dan de regel lengte.

Ik heb al geprobeerd:
- width in alleen css of alleen html
- Het geheel alleenstaand te laten zien
- Geneste tabel gebruiken / verwijderen
- width / heigth weggehaald bij <img>
- quotes bij width in bovenste gedeelte <td>'s
- Heel veel klooien wat ik niet meer weet

Nu zou dit best op te lossen zijn door PHP <br>'s in te laten voegen aan het eind van elke regel maar dit is een beetje omslachtig in mijn ogen. Weet iemand hoe dit op te lossen is? Of kan iemand me in de goede richting sturen?

Hieronder 3 plaatjes om te illustreren waar ik het over heb.


Zonder inhoud:

*klik*

Met inhoud:

*klik*

Mozilla:

*klik*

Zoals je ziet veranderd de browser de breedte van de cellen. Dit gebeurd overigens alleen in IE en Opera, niet in mozilla firebird. Andere browsers heb ik niet getest.

Hieronder de code die gebruikt is.

Code html:

HTML:

<tr>
 <td class="scroll" align="left"> 
  <table cellspacing="0" cellpadding="0" align="left" width="100%">

   <tr height="27"> 
    <td class="topLeftBorder">&nbsp;</td> 
    <td class="topMiddleBorder" style="width:10px;">&nbsp;</td>
    <td class="topLeftTitle">&nbsp;</td>
    <td class="topTitle">  
     <? echo $product[titel]; // Titel ophalen en laten zien ?> 
    </td>
    <td class="topRightTitle">&nbsp;</td>
    <td class="topMiddleBorder">&nbsp;</td>
    <td class="topRightBorder">&nbsp;</td>
   </tr>

   <tr>
    <td class="middleLeftBorder">&nbsp;</td>
    <td colspan="5" bgcolor="#FFFFFF" align="left">   

     <table>
      <tr valign="top">
       <td> 

        <img border="2" src="plaatjes/producten/
        <?  echo $catplaats[plaatjes]; // Wordt geset in productlijst.php
        $plaatje = p_plaatje($product[id]) ; // Naam plaatje ophalen
        echo $plaatje[plaatje]; ?>
        " width="240" height="178" align="left"> </td>

       </td>
       <td> <?  echo $product[omschrijving]; ?> </td>
      </tr>     
     </table>

    </td>
    <td class="middleRightBorder">&nbsp;</td>
   </tr>

   <tr>
    <td class="bottomLeftBorder">&nbsp;</td>
    <td colspan="5" class="bottomBorder">&nbsp;</td>
    <td class="bottomRightBorder">&nbsp;</td>
   </tr>

  </table>
 </td>
</tr>

Css:

Cascading Stylesheet:

table.product {
 width: 100%;
 text-align: left;
}

table.product tr td {
 height: 220px;
 background-color: white;
 vertical-align: top;
}
 
td.topLeftBorder {
 width: 10px;
 heigth: 27px;
 background-image:url("../plaatjes/algemeen/producten-rand-links-boven.gif");
 background-color:white;    
}

td.topMiddleBorder {
 background-image:url("../plaatjes/algemeen/producten-rand-boven.gif");
 background-color:white;    
}   

td.topLeftTitle {
 width: 10px;
 background-image:url("../plaatjes/algemeen/producten-rand-titel-links.gif");
 background-color:white;
}

td.topTitle {
 background-image:url("../plaatjes/algemeen/producten-rand-titel-midden.gif");
 background-color:white;
 width:200px;
}

td.topRightTitle {
 width: 10px;
 background-image:url("../plaatjes/algemeen/producten-rand-titel-rechts.gif");
 background-color:white;
} 

td.topRightBorder {
 width: 10px;
 background-image:url("../plaatjes/algemeen/producten-rand-rechts-boven.gif");
 background-color:white;    
}       

td.middleLeftBorder {
 width:10px;
 background-image:url("../plaatjes/algemeen/producten-rand-zijkant-links.gif");
 background-color:white;
}

td.middleRightBorder {
 width:10px;
 background-image:url("../plaatjes/algemeen/producten-rand-zijkant-rechts.gif");
 background-color:white;
}

td.bottomLeftBorder {
 width: 10px;
 height: 27px;
 background-image:url("../plaatjes/algemeen/producten-rand-links-onder.gif");
 background-color:white;    
}

td.bottomBorder {
 width: 10px;
 background-image:url("../plaatjes/algemeen/producten-rand-onder.gif");
 background-color:white;    
}

td.bottomRightBorder {
 width: 10px;
 background-image:url("../plaatjes/algemeen/producten-rand-rechts-onder.gif");
 background-color:white;    
}

Alvast bedankt voor jullie inzichten.

edit:

Heb de code een beetje opgeruimd met css. Nog steed het zelfde probleem helaas.

[ Voor 80% gewijzigd door UltimateB op 28-02-2004 01:58 . Reden: heb johnny's advies opgevolgt - mozilla pic toegevoegd. ]

[Johnny]

blegh, je gebruikt vieze HTML.

Bij het instellen van breedted in CSS moet je altijd een "eenheid" opgeven, pixels, centimeters, procenten, inches whatever.

Je hoeft ook niet voor iedere cel opnieuw alles in te stellen, zo maak je stijlen die op iedere cel van de tabel van toepassing zijn:

code:

table.naamBanTabel {
width: 100%;
text-align: left;
}

table.naamVanTabel tr td {
height: 220px;
background-color: white;
vertical-align: top;
}

code:

td.leftBottomBorder {
width: 10px;
height: 21px;
background-image url"plaatjes/algemeen/producten-rand-links-onder.gif");

vervolgens geef je die cel het attribuut class="leftBottomBorder".

Het maakt je code een stuk leesbaarder en sneller om pagina's te downloaden.

[sub]tabellen zijn niet bedoeld voor layout, je zou dit design ook kunnen maken zonder border images en tabellen door puur gebruk te maken van CSS.[/quote]

[UltimateB]

Ik zal dat stukje css eens proberen.

Ik heb het al geprobeerd in puur css maar ik krijg de layout dan niet correct in alle browsers, vandaar dat ik terug gevallen was op tabellen.

Ik ga even klooien. Dank je wel.


Ik heb de css geimplementeerd. Helaas nog steed hetzelfde probleem, de layout staat niet vast en gaat nog steeds naar de filisteinen als ik er iets in stop.

[ Voor 29% gewijzigd door UltimateB op 28-02-2004 01:55 ]

[Johnny]

alsjeblieft

Werkt in MSIE, Mozilla en Opera, alleen als het venster te smal is en er teveel tekst in staat gaat het over elkaar lopen in Mozilla en Opera, maar aangezien ik wel erg veel ruimte aan de zijkanten houdt, en veel tekst er heb in gezet lijkt dat me bij jou geen probleem.

[ Voor 6% gewijzigd door Johnny op 28-02-2004 14:02 ]

[UltimateB]

Wow, 1000 maal dank.

[Verwijderd]

Hallo,

mayb is dit offtopic, maar dit komt t dichtsbij mijn probleem (met search gezocht).

Ik heb t zelfde probleem als de eerste poster alleen ik heb dat als ik met opera op sites kijk (bijv. hi.nl). ik zie dan sommige plaatjes of banners over de tekst heen. Kan ik dit in de settings goed zetten of ligt t aan de site?

Graag reacties aub, want tis best irritant.


PS Opera pwnt IE

[crisp]

Verwijderd schreef op 28 augustus 2004 @ 00:49:
Hallo,

mayb is dit offtopic, maar dit komt t dichtsbij mijn probleem (met search gezocht).

Ik heb t zelfde probleem als de eerste poster alleen ik heb dat als ik met opera op sites kijk (bijv. hi.nl). ik zie dan sommige plaatjes of banners over de tekst heen. Kan ik dit in de settings goed zetten of ligt t aan de site?

Graag reacties aub, want tis best irritant.


PS Opera pwnt IE

dat ligt 9 van de 10 keer aan brakke (lees: IE-only) HTML van de site, maar daarvoor is dit topic in NOS: Websites die niet onder niet-IE browsers werken...(deel 2)

geen reden dus om dit topic te kicken, want imnsho heeft dit er weinig mee te maken...