[HTML] Basistabel wil niet mooi werken

Hallo,

ik was net even bezig met iets (heeel) basis te proberen. Normaal lukt html toch redelijk goed enzo maar hier kom ik zelf dus niet uit.


code:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td colspan="2" background="header_background.jpg">[img]"header.jpg"></td[/img]  
  </tr>
  <tr>
    <td background="menu_background.jpg" width="163">MenuMenu</td>
    <td align="center">Inhoud</td>
  </tr>
</table>

Zoals je ziet heel simepele code, die in FF ook werkt. Maar in IE geeft dit dus een heel raar resultaat. Hier te bekijken: http://pconfig.no-ip.org/omm/index1.htm
(Afbeeldingen kloppen nog niet helemaal maar dat zijn zorgen voor later)

Mvg
Thomas

Standaardantwoord: tabellen zijn voor tabulaire data, niet voor opmaak. Lees eens wat over divs en CSS, en pas dat liever toe.

Daarnaast maakt IE blijkbaar je linkerkolom breder dan ie moet zijn. Probeer eens een vaste grootte op te geven voor de rechterkolom?

quote:

-NMe- schreef op dinsdag 07 februari 2006 @ 18:20:
Standaardantwoord: tabellen zijn voor tabulaire data, niet voor opmaak. Lees eens wat over divs en CSS, en pas dat liever toe.

wat minder standaard antwoord: divs zijn voor hoofdstuk indeling en globale structuren, niet voor opmaak Lees wat over semantiek en CSS en pas dat liever toe

Hm dus ik doe eigelijk niets fout, alleen IE interpreteert de code gewoon verkeerd?

quote:

mophor schreef op dinsdag 07 februari 2006 @ 18:58:
wat minder standaard antwoord: divs zijn voor hoofdstuk indeling en globale structuren, niet voor opmaak Lees wat over semantiek en CSS en pas dat liever toe

Flauwerd.

quote:

Thomson schreef op dinsdag 07 februari 2006 @ 20:26:
Hm dus ik doe eigelijk niets fout, alleen IE interpreteert de code gewoon verkeerd?

Semantisch gezien doe je zelfs heel veel fout. Waarom IE het verkeerd doet weet ik niet, maar misschien gaat het wel goed als je breedtes en achtergronden met CSS opgeeft in plaats van in je HTML (zoals het ook hoort ). Als je dan toch tabellen wil blijven gebruiken voor je layout, kijk dan dus liever toch even naar wat CSS voor je kan doen.

Ok, als ik even op tutorial van CSS zoek dan wordt het vooral gebruikt voor tekstdecoratie. Nu zie ik ook wel in dat je bijvoorbeeld met divs kunt gaan werken en die op een bepaalde plaats gaat zetten mbh van CSS. Is dat dan meer zoals het moet? Lijkt me veel extra werk, het is natuurlijk wel allemaal wat eleganter maar toch

"Standaard"linkje: http://home.parse.nl/~michiel/semantiek.html .

Onthou ook even dat zodra je met colspans gaat werken zonder expliciet overal width's te specificeren, de standaarden niet duidelijk zijn hoe precies te renderen. Browsers doen dat dus naar eigen inzicht.

Sowieso zijn afmetingen voor tabel-cellen enkel een richtlijn voor de render-engine tenzij table-layout:fixed is opgegeven. Je maakt het hier al moeilijk voor de render-engine door je eerste row te beginnen met 1 enkele cel met een colspan, daardoor weet de browser nog niet wat de breedte van de individuele cellen moet worden. Browsers worden gemaakt op performance en reflow is kostbaar.

Al zou een tabel hier wel het geschikte element zijn, en zou fixed layout dan ook echt noodzakelijk zijn inclusief de colspan in de eerste row, dan zou je nog een colgroup kunnen definieren met de juiste afmetingen:

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13

<table style="table-layout: fixed; width: 500px;">   <colgroup>     <col width="200">     <col width="300">   </colgroup>   <tr>     <td colspan="2">bla</td>   </tr>   <tr>     <td>bla</td>     <td>bla</td>   </tr> </table>

crisp wijzigde dit bericht 07-02-2006 22:26 (6%)

quote:

Thomson schreef op dinsdag 07 februari 2006 @ 21:00:
Ok, als ik even op tutorial van CSS zoek dan wordt het vooral gebruikt voor tekstdecoratie. Nu zie ik ook wel in dat je bijvoorbeeld met divs kunt gaan werken en die op een bepaalde plaats gaat zetten mbh van CSS. Is dat dan meer zoals het moet? Lijkt me veel extra werk, het is natuurlijk wel allemaal wat eleganter maar toch

CSS wordt onder andere gebruikt voor tekstdecoratie. Je kan (lees: wil / moet) het echter ook inzetten voor de volledige opmaak van je pagina. Op deze manier kan je de inhoud (HTML) volledig gescheiden houden van de opmaak (CSS).

Het is in het begin misschien wat meer werk omdat je goed door moet hebben hoe het werkt, maar als je eenmaal een degelijke opzet hebt, kan het je bijzonder veel werk uit handen nemen.

Vergeet vooral niet bovenstaand linkje (http://home.parse.nl/~michiel/semantiek.html) door te lezen!

quote:

mophor schreef op dinsdag 07 februari 2006 @ 18:58:
[...]
wat minder standaard antwoord: divs zijn voor hoofdstuk indeling en globale structuren, niet voor opmaak Lees wat over semantiek en CSS en pas dat liever toe

Div's zijn voor logische secties van je pagina. Typische secties zijn headers, menu's en footers. Niks hoofdstukindelingen dus. Wat betreft semantiek: als je div's moet gaan toevoegen om louter opmaakredenen is dat onjuist. Echter door de verschillende browsers ben je daartoe soms wel genoodzaakt.

quote:

ZeilDude schreef op woensdag 08 februari 2006 @ 11:33:
[...]

Div's zijn voor logische secties van je pagina. Typische secties zijn headers, menu's en footers. Niks hoofdstukindelingen dus. Wat betreft semantiek: als je div's moet gaan toevoegen om louter opmaakredenen is dat onjuist. Echter door de verschillende browsers ben je daartoe soms wel genoodzaakt.

correct, maar toch echt wel ook voor hoofdstukindeling hoor

http://www.w3.org/TR/html401/struct/global.html#h-7.5.5


code:

<div>
  <h1>
  <p>
  <p>
  <ul>
  <div>
    <h2>
    <p>
    <p>
  </div>
</div>

dat is typisch (correct) divgebruik (heb er al eens wat uitgebreider over geschreven: http://www.rikkertkoppes.com/thoughts/about-div)

overigens is "headers en footers denken" ook iets te opmaakgericht ergens, een groep elementen dat visueel een header vormt hoeft structureel niets met elkaar te maken te hebben, een div om je header te markeren is dus niet altijd nodig (ok, vaak is het gewoon wel het geval, maar wat ik probeer te bedoelen is: niet opmaakdenken, maar structuurdenken)

mophor wijzigde dit bericht 08-02-2006 11:49 (25%)

Ik heb voorheen ook altijd sites gemaakt met tables, nog steeds vind ik dit erg handig werken. Maar div'jes hebben ook zijn voordelen. En ik moet toch eens de overstap maken. Nu lukken layouts wel aardig met css maar ik zit nu toch echt met een probleem.
Ik probeer de volgende layout te maken:



Hij moet dus ongeacht de resolutie in het midden blijven staan, dus is position: absolute niet mogelijk, met tables zou dit geen probleem zijn. Alleen ik kom er echt niet uit in css.
Is het wel mogelijk om zo'n design te maken met css?
En zo ja, kan iemand me dan op weg helpen want het wilt echt niet lukken

quote:

Niek-X schreef op donderdag 09 februari 2006 @ 00:37:
Ik heb voorheen ook altijd sites gemaakt met tables, nog steeds vind ik dit erg handig werken. Maar div'jes hebben ook zijn voordelen.

tabellen werken helemaal niet handig. Los daarvan, met semantische html, divs en css heb je veel sneller resultaat, plus dat het nog veel andere voordelen heeft (betere SEO, veel lichtere paginas - laden sneller etc)

quote:

En zo ja, kan iemand me dan op weg helpen want het wilt echt niet lukken

probeer eens faux columns

Of je kijkt naar dit veel nieuwer artikel (theorie is al redelijk oud): http://www.positioniseverything.net/articles/onetruelayout/

quote:

Niek-X schreef op donderdag 09 februari 2006 @ 00:37:
Ik heb voorheen ook altijd sites gemaakt met tables, nog steeds vind ik dit erg handig werken. Maar div'jes hebben ook zijn voordelen. En ik moet toch eens de overstap maken. Nu lukken layouts wel aardig met css maar ik zit nu toch echt met een probleem.
Ik probeer de volgende layout te maken:

[afbeelding]

Hij moet dus ongeacht de resolutie in het midden blijven staan, dus is position: absolute niet mogelijk, met tables zou dit geen probleem zijn. Alleen ik kom er echt niet uit in css.
Is het wel mogelijk om zo'n design te maken met css?
En zo ja, kan iemand me dan op weg helpen want het wilt echt niet lukken

Dit is wel een erg basisvraag over 1 van de meest gebruikte layouts. Kijk bijvoorbeeld eens naar GoT, daar wordt dit ook gebruikt (mits je 'gecentreerd' aan hebt staan in je preferences). Zorg dat de gehele layout in een containerdiv staat, en geef die margin:0px auto 0px auto; en een fixed breedte als width:800px; mee, en voilà! Je zou die aparte div zelfs nog weg kunnen laten, en voorgaande properties aan het body element hangen