Archief - xHTML/CSS: Hoe dit maken zonder tables?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
C

Cakeman

Legacy Member
Ik ben een voorstander van zoveel mogelijk divs en zo weinig mogelijk tables te gebruiken om de layout van een site te maken. Wanneer ik een site maak, probeer ik dat ook toe te passen, maar er zijn zaken waarvan ik gewoon niet weet hoe ik eraan moet beginnen met divs terwijl het met tables op 5 minuten klaar is.

Bijvoorbeeld deze 'content box': http://www.plaintalking.be/images/box.gif

De volgende zaken maken het in dit geval moeilijk (voor mij althans) om het op te lossen:
  • de ronde hoeken
  • de 'dropshadow' rond de volledige box
  • de box heeft boven- en onderaan een gradient kleur
  • de box moet 'rekbaar' zijn de hoogte en liefst ook in de breedte
Hoe maak ik zoiets zonders tables?
K

KoenDK

Legacy Member
gewoon in photoshop alles mooi slicen

top en bottom en middenstuk

middenstuk zal uitrekken in functie van height:auto;


en voor de rest is dit niet meer dan een div in een div met background-image
volgens mij
C

Cakeman

Legacy Member
KoenDK zei:
gewoon in photoshop alles mooi slicen

top en bottom en middenstuk

middenstuk zal uitrekken in functie van height:auto;


en voor de rest is dit niet meer dan een div in een div met background-image
volgens mij
Klik om te vergroten...
Dus bijvoorbeeld:
Code: 
<div id="top">
  <div id="middle">
    <div id="bottom">Hier komt de tekst</div>
  </div>
</div>
Waarbij:
#top de linker en rechter randen als achtergrond heeft
#middle de bovenrand + bovenste gradient kleur als achtergrond heeft
#bottom de onderrand + onderste gradient kleur als achtergrond heeft en uiteindelijk de tekst zal bevatten

Edit: ik heb dit net zo geprobeerd, en het werkt inderdaad.

Ik dacht altijd dat dé reden om met divs te werken de semantiek was. Wanneer je op deze manier werkt heb je toch 2 divs die semantisch geen enkele waarde of geen enkel nut hebben? En dan is die box nog niet eens 'rekbaar' in de breedte... Hoe meer ik 'semantisch' probeer te werken, hoe meer ik er een dubbel gevoel over krijg :s
d

dJeez

Legacy Member
Bij CSS3 wordt dat probleem properder opgelost, maar aangezien zo goed als geen enkele browser momenteel de volledige CSS2 standaard ondersteunt zullen we daar nog even op mogen wachten :p.

Een iets properder oplossing (die semantisch ook mooi klopt) kan je vinden op : http://virtuelvis.com/gallery/css/rounded/

Maar uiteraard kan IE (ook IE 7) die niet correct renderen wegens geen support voor de :before en :after pseudo elements, het degradeert echter wel mooi (op IE krijg je gewoon rechthoekige kaders te zien).
X

Xavez

Legacy Member
Gewoon zo:

Code: 
<div id="wrapper">
   <div id="top"></div>
   <div id="content"></div>
   <div id="bottom"></div>
</div>

Kan toch niet eenvoudiger? Tenzij uw div flexibel moet zijn (e.g. meerekken met de inhoud in de breedte)
C

Cakeman

Legacy Member
Xavez zei:
Gewoon zo:

Code: 
<div id="wrapper">
   <div id="top"></div>
   <div id="content"></div>
   <div id="bottom"></div>
</div>

Kan toch niet eenvoudiger? Tenzij uw div flexibel moet zijn (e.g. meerekken met de inhoud in de breedte)
Klik om te vergroten...
Het probleem is dat de tekst in #content over de gradient background van de #top en #bottom moet lopen. Dat gaat bij deze oplossing niet.
X

Xavez

Legacy Member
Ik vraag me wel af hoe je dat met een tabel zou doen eigenlijk =). Dat gaat toch ook niet? ;).

Ik blijf zoeken naar een oplossing :).

Edit: kan je die afbeelding eens zonder tekst geven? Zou hem eens willen slicen... :)
C

Cakeman

Legacy Member
Xavez zei:
Ik vraag me wel af hoe je dat met een tabel zou doen eigenlijk =). Dat gaat toch ook niet? ;).

Ik blijf zoeken naar een oplossing :).

Edit: kan je die afbeelding eens zonder tekst geven? Zou hem eens willen slicen... :)
Klik om te vergroten...
Het is ondertussen al gelukt hoor. Ik heb een oplossing met divs en eentje met tables.

Maar ik blijf het vreemd vinden dat de divs vanuit semantisch standpunt aangeraden worden maar dat van zodra je een ietswat ingewikkeld design hebt, je divs zonder semantische waarde moet gaan toevoegen.

Dit is die met divs:
Dus bijvoorbeeld:

Code: 
<div id="top">
  <div id="middle">
    <div id="bottom">Hier komt de tekst</div>
  </div>
</div>
Waarbij:
#top de linker en rechter randen als achtergrond heeft
#middle de bovenrand + bovenste gradient kleur als achtergrond heeft
#bottom de onderrand + onderste gradient kleur als achtergrond heeft en uiteindelijk de tekst zal bevatten
S

Smoerf

Legacy Member
gewoon 1 div :)
HTML: 
<div id="text">
<img src="i/top_text.gif" width="200px" height="15px" />
bla bla bla bla
</img src="i/bottom_text.gif" width="200px" height="15px" />
</div>
probleem is wel dat als je je pagina dan zonder stijl bekijkt dat je dan een probleem hebt...
dus, daarom is het beter om divs zonder semantische waarde toe te voegen :)
X

Xavez

Legacy Member
Cakeman zei:
Het is ondertussen al gelukt hoor. Ik heb een oplossing met divs en eentje met tables.

Maar ik blijf het vreemd vinden dat de divs vanuit semantisch standpunt aangeraden worden maar dat van zodra je een ietswat ingewikkeld design hebt, je divs zonder semantische waarde moet gaan toevoegen.

Dit is die met divs:
Dus bijvoorbeeld:

Code: 
<div id="top">
  <div id="middle">
    <div id="bottom">Hier komt de tekst</div>
  </div>
</div>
Waarbij:
#top de linker en rechter randen als achtergrond heeft
#middle de bovenrand + bovenste gradient kleur als achtergrond heeft
#bottom de onderrand + onderste gradient kleur als achtergrond heeft en uiteindelijk de tekst zal bevatten
Klik om te vergroten...
Jupz, had de oplossing ondertussen ook gevonden maar bon :p.

Ik wil toch wel je tables-oplossing eens zien... Ik kan me écht niet inbeelden hoe je dat zou doen...
C

Cakeman

Legacy Member
Xavez zei:
Jupz, had de oplossing ondertussen ook gevonden maar bon :p.

Ik wil toch wel je tables-oplossing eens zien... Ik kan me écht niet inbeelden hoe je dat zou doen...
Klik om te vergroten...
Ik heb de tables versie ondertussen al verwijderd :(

Het kwam ongeveer hier op neer:
Code: 
<table id="theTable">
  <tr>
    <td id="topLeft"></td>
    <td id="top"></td>
    <td id="topRight"></td>
  </tr>
  <tr>
    <td id="left"></td>
    <td id="middle">Tekst</td>
    <td id="right"></td>
  </tr>
  <tr>
    <td id="bottomLeft" valign="bottom"><img src="bottomleftgradient.gif" /></td>
    <td id="bottom"></td>
    <td id="bottomRight" valign="bottom"><img src="bottomrightgradient.gif" /></td>
  </tr>
</table>

En de css:
Code: 
#theTable { background-image:url(topgradient.gif); background-repeat:no-repeat; }

#topLeft { background-image:url(topLeft.gif); width:14px; height:14px; background-repeat:no-repeat; }
#top { background-image:url(top.gif); background-repeat:repeat-x; height:14px; }
#topRight {background-image:url(topRight.gif); width:14px; height:14px; background-repeat:no-repeat; }

#left { background-image:url(left.gif); background-repeat:repeat-y; }
#middle { background-image:url(bottomgradient.gif); background-repeat:no-repeat; background-position:bottom; }
#right { background-image:url(right.gif); background-repeat:repeat-y; }

#bottomLeft { background-image:url(bottomLeft.gif); width:14px; height:14px; background-repeat:no-repeat; }
#bottom { background-image:url(bottom.gif); background-repeat:repeat-x; height:14px; }
#bottomRight {background-image:url(bottomRight.gif); width:14px; height:14px; background-repeat:no-repeat; }
C

Cakeman

Legacy Member
Smoerf zei:
gewoon 1 div :)
HTML: 
<div id="text">
<img src="i/top_text.gif" width="200px" height="15px" />
bla bla bla bla
</img src="i/bottom_text.gif" width="200px" height="15px" />
</div>
probleem is wel dat als je je pagina dan zonder stijl bekijkt dat je dan een probleem hebt...
dus, daarom is het beter om divs zonder semantische waarde toe te voegen :)
Klik om te vergroten...
Dan kan de tekst niet over de gradients bovenaan en onderaan van de box lopen.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan