[Table2Semantiek]Krijg table niet omgebouwd - Softwareontwikkeling

dinsdag 3 januari 2006 10:47

Acties:

Verwijderd

Topicstarter

Sinds kort ben ik me aan het verdiepen in structural markup om mijn lay-out in tabellen om te zetten.
Nu heb ik de volgende tabel:

HTML:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
  <TR>
    <TD COLSPAN="2">
      [img]"images/LinksBoven.jpg"[/img]</TD>
    <TD STYLE="background:#cc3300 url(images/TitelTabel.jpg);">
      Paard en wagen</TD>
    <TD COLSPAN="2">
      [img]"images/RechtsBoven.jpg"[/img]</TD>
  </TR>
  <TR>
    <TD>
      [img]"images/LinksMidden.jpg"[/img]</TD>
    <TD WIDTH="183" HEIGHT="100%" COLSPAN="3" STYLE="background:#cc3300 url(images/Middenstuk.jpg);">
    <UL STYLE="padding-left: 20px;font-size: 1.4em;font-weight: bold;">
    <LI>Links1</LI>
    <LI>Links2</LI>
    <LI>Links3</LI>
    <LI>Links4</LI>
    <LI>Links5</LI>
    <LI>Links6</LI>
    <LI>Links7</LI>
    <LI>Links8</LI>
    <LI>Links9</LI>
    <LI>Links10</LI>
    <BR>
    meer...
    </UL>
</TD>
    <TD>
      [img]"images/RechtsMidden.jpg"[/img]</TD>
  </TR>
  <TR>
    <TD COLSPAN="2">
      [img]"images/LinksOnder.jpg"[/img]</TD>
    <TD STYLE="background:#cc3300 url(images/MiddenOnder.jpg);">
       </TD>
    <TD COLSPAN="2">
      [img]"images/RechtsOnder.jpg"[/img]</TD>
  </TR>
  <TR>
    <TD>
      [img]"images/spacer.gif"[/img]</TD>
    <TD>
      [img]"images/spacer.gif"[/img]</TD>
    <TD>
      [img]"images/spacer.gif"[/img]</TD>
    <TD>
      [img]"images/spacer.gif"[/img]</TD>
    <TD>
      [img]"images/spacer.gif"[/img]</TD>
  </TR>
</TABLE>

Een voorbeeld is te zien op:
http://www.bontepaarden.nl/linksNew/vakje.html
Deze tabel verschaalt netjes in de breedte en hoogte naar gelang de inhoud.
Dat is wat ik wil hebben.

Nu ben ik deze code aan het omzetten, maar ik krijg niet eens de eerste rij voor elkaar.
De bedoeling is op de hoekpunten (cel 1 en 3) een plaatje met vaste breedte en in het midden (cel 2) een plaatje met variabele breedte met daarop een tekst.

HTML:

<BODY>
<div id="content">

<DIV ID="tabelKlein">

[img]"images/LinksBoven.jpg"[/img]
<SPAN ID="top2">Titel</SPAN>
[img]"images/RechtsBoven.jpg"[/img]
</DIV>

</DIV>  

</BODY>

en de css:

Cascading Stylesheet:

#tabelKlein{
    min-width: 200px;
    min-height: 250px;
    display: inline;
    margin: 10px;
}
#top2{
    display: block;
    padding-top: 20px;
    font-weight: bold;
    font-size: 2.0em;
    text-align: center; 
    height: 50px;
    width: 100%;    
    background: #C30 url(images/TitelTabel.jpg) top left repeat-x;
}
#content {
    position: absolute;
    top: 20px;
    left: 20px; 
}

Wat er gebeurt is dat het laatste plaatje op de volgende regel komt.
Zie voorbeeld: http://www.bontepaarden.nl/linksNew/tabelKlein.html
Als ik in #top2 display: block verander in block: inline blijft het laatste plaatje netjes op de eerste regel maar wordt de tussencel niet getoont.
Ik ben al even aan het zoeken hoe ik dit moet oplossen. Ik zie wel veel voorbeelden van kolomstructuren zonder plaatjes maar die krijg ik ook niet aangepast.
Zou iemand me even een schop in de goede richting willen geven $_/-\o_$

dinsdag 3 januari 2006 11:25

Acties:

Sappie

De Parasitaire Capaciteit!

Een schop in de goede richting dan

Ik denk dat je een heel eind op weg geholpen zult zijn met de volgende zoekterm, nl "rounded corners". Zijn meerdere manieren om die te bewerkstelligen en over het algemeen ontkom je niet aan wat extra markup of wat javascript. Je moet voor jezelf maar beslissen wat je het fijnste vindt. Een snelle zoektocht op google leverde me deze link (met extra markup om de ronde hoeken te creëren), waar je iig al wat aan hebt denk:

http://www.redmelon.net/tstme/4corners/

Het enige wat dan nog wel eens tricky kan worden is de titel; mocht je daar niet uitkomen, dan zien we het wel

[ Voor 6% gewijzigd door Sappie op 03-01-2006 11:45 ]

Specs | Audioscrobbler

dinsdag 3 januari 2006 11:40

Acties:

Michali

img tags zou ik alleen gebruiken voor afbeeldingen die echt in relatie met de content staan (en dus niet in het design zelf zitten). Andere afbeeldingen zou ik gewoon in de stylesheet planten dmv. background properties. Dus zoals in het voorbeeld van Sappie wordt aangegeven.

[ Voor 9% gewijzigd door Michali op 03-01-2006 11:48 ]

Noushka's Magnificent Dream | Unity

dinsdag 3 januari 2006 11:44

Acties:

Sappie

De Parasitaire Capaciteit!

Had de sites niet goed doorgekeken, maar ben het eens met wat Michali zegt.. heb daarom die link ook maar even weggeëdit.

Specs | Audioscrobbler

dinsdag 3 januari 2006 16:39

Acties:

Boelie-Boelie

Er zijn daarnaast nog heel veel andere manieren voor rounded corners.

Cogito ergo dubito

dinsdag 3 januari 2006 17:11

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 03 januari 2006 @ 10:47:

HTML:

<BODY>
<div id="content">

<DIV ID="tabelKlein">

<IMG SRC="images/LinksBoven.jpg" WIDTH="73" HEIGHT="70" ALT="">
<SPAN ID="top2">Titel</SPAN>
<IMG SRC="images/RechtsBoven.jpg" WIDTH="65" HEIGHT="70" ALT=""">
</DIV>

</DIV>  

</BODY>

Probeer jezelf ook alvast aan te leren tags en properties lowercase te schrijven, en zeker geen uppercase/lowercase door elkaar gebruiken.
Probeer ook zo min mogelijk div en span te gebruiken als er elementen zijn die beter aansluiten bij de content. Verder vind ik een id 'tabelKlein' hier wel erg niet-passend - het is toch geen tabulaire data?

Intentionally left blank