[CSS] Van complexe tabellen naar div's - Softwareontwikkeling

zondag 16 januari 2005 12:29

Acties:

Verwijderd

Topicstarter

Op mijn nieuwe website (http://www.tijs-d.info), maak ik gebruik van tabellen om alles op te bouwen (met daarin de afbeeldingen). Nu hoorde ik van iemand dat de toekomst layers zijn (div's dus) en tabellen eigenlijk niet bedoeld zijn om een layout op te bouwen. Ik dacht, waarom niet, en ik probeerde het eens.
En daar zit het probleem, ik heb wel enkele tutorials gelezen om een layout op te bouwen, maar nergens vind ik één waar de div's gecombineerd worden met afbeeldingen. Ook moeten alle afbeeldingen op 1 rij staan, anders klopt het niet.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tijs Dejonckheere</title>
<link rel="stylesheet" href="style2.css"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="laag1">
[img]"images/Tijs_01.jpg"[/img][img]"images/Tijs_02.jpg"[/img][img]"images/Tijs_03.jpg"[/img][img]"images/Tijs_04.jpg"[/img]</div>
<div id="laag2">
[img]"images/Tijs_06.jpg"[/img]<object class="animatie" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="160" height="124"><param name="movie" value="Flash/menu.swf"><param name="quality" value="high"><embed src="Flash/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="124"></embed></object><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="602" height="169"><param name="movie" value="Flash/home.swf"><param name="quality" value="high"><embed src="Flash/home.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="602" height="169"></embed></object>[img]"images/Tijs_10.jpg"></div>
<div[/img]qs</div><div id="laag3">{content}</div><div id="rechts">fgfd</div>
<div id="laag4">ksjdfmskq</div>
<div id="laag5">sdkflmqk</div>

</body>
</html>

Mijn vraag nu: moet ik toch doordoen met div's (in combinatie met afbeeldingen) of blijven bij tabellen?

zondag 16 januari 2005 12:34

Acties:

M-ThijZ

Riding on Rails

Als het met tabellen goed werkt voor je, waarom zou je het dan veranderen? Met div/css kun je dus content van layout scheiden en het is vrij makkelijk om wat wijzigingen aan te brengen in de layout, maar als het goed werkt zou ik het niet veranderen tenzij het je puur interesseert.

zondag 16 januari 2005 12:39

Acties:

Fatamorgana

Fietsen is gezond.

Ik werk ook nog gewoon met tabellen. Ik probeer wel eens met divs, maar dan zit ik vaak erg lang te zoeken tot het in alle browsers werkt omdat ik gewoon altijd met tabellen heb gewerkt. Helaas geldt nog steeds, tijd is geld en als het sneller gaat met tables gebruik ik gewoon tables.

zondag 16 januari 2005 12:57

Acties:

Clay

cookie erbij?

De overstap van table based layout naar css based layout is inderdaad geen makkelijke. Het eerste wat je moet beseffen is dat het - niet - een kwestie is van de TDs renamen naar DIVs, en deze inclusief IMG geneste tags positioneren met CSS.

HTML:

1	<div id="logo">[img]"logo.gif"></div[/img]

... is dus net zo fout als TDs met spacer gifs, hoeveel CSS je hier ook tegenaan zou gooien.

Dat layers de toekomst zijn is trouwens ook een hardnekkig fabeltje. De <Layer> is een Netscape 4 tag die je in complexe DHTML scripts kon gebruiken. In Internet explorer kon je datzelfde al beter met DIVs doen. Dit is allemaal "layers" gaan heten omdat het alleen goed werkte als het absoluut gepositioneerd was, en dus een soort van gelaagd "zweefde" over de rest van je content.

Inmiddels kan alles (iig heel veel) wat toen met bergen javascript moest met CSS, in combinatie met elk willekeurig HTML element wat jij daarvoor gebruiken wil; niet alleen maar divs dus. Absuluut positioneren is naast floaten en het gebruik van verschillende display types gewoon 1 van de verschillende CSS bouwstenen die je gebruiken kan bij het CSSen van een design, en is dus al lang niet meer de heilige graal van je layout. Sterker nog, als je alles met position:absolute; neerzet ontneem je jezelf van een aantal essentiele CSS hulpmiddelen, en wordt het dus alleen maar moeilijker

edit:
een paar tips dan

Als je nu dus een design voor je site hebt kan je je html al van te voren af hebben. De CSS voorziet dit later wel van een gezicht. Afbeeldingen die deel uitmaken van je interface kan je vanuit CSS als background-image aan elk willekeurig element hangen. De IMG tag is puur en alleen voor afbeeldingen bedoeld die deel uitmaken van je content, immers is het markup, en dat is data. Voor die data moet je de meest toepasselijke HTML tag gebruiken; tekst meestal in <P>s, titels in <Hx> (x = 1,2,3,4 ..), lijsten in (un)ordered- of definition lists etc.

De meeste van deze elementen hebben een standaard layout, zodat ze er ook zonder enige CSS nog zinnig uitzien. Zo hebben headers een groter font en wat margin ruimte, en staat er voor list items een bullet. Dit kan je - zonder uitzondering - allemaal overschrijven vanuit CSS zodat het er anders uitziet. Er is dus b.v. geen reden om voor een lijst links geen list te gebruiken "omdat die bullet dan in de weg zit", of zelfs omdat ze dan onder elkaar staan terwijl jij ze naast elkaar wil hebben; het kan allemaal veranderd worden met CSS.

Waarvoor dient die DIV dan? Nou nergens voor eigenlijk. Je zou het gebruik ervan zelfs zoveel mogelijk moeten voorkomen. Het staat voor "division", en is alleen maar handig om stukken data te groeperen. Bijkomend voordeel is dat je dan nog een element hebt om met CSS te manipuleren, en zeker gezien de brakheid van Internet Explorer ga je ze inderdaad wel nodig hebben, maar in de essentie is de DIV een betekenisloos element, en mag je die niet gebruiken als er een beter HTML element is om dat deel data, waarvoor je het in gedachten had, te omschrijven.

[ Voor 40% gewijzigd door Clay op 16-01-2005 13:11 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 16 januari 2005 13:26

Acties:

Verwijderd

div is niet helemaal betekenisloos:

HTML:

<div class="chapter">
<h1 />
<p />
<p />
</div>

is bijvoorbeeld zinnig gebruik ervan, je groepeert zo een aantal paragrafen en een heading in 1 soort hoofdstukblok. Maar voor de rest idd eens met clay: gebruik div niet als de hoer van html
http://www.rikkertkoppes.com/thoughts/smurf-language

zondag 16 januari 2005 13:40

Acties:

JeromeB

woei

Verwijderd schreef op zondag 16 januari 2005 @ 13:26:
div is niet helemaal betekenisloos:
HTML:
1
2
3
4
5
<div class="chapter">
<h1 />
<p />
<p />
</div>
is bijvoorbeeld zinnig gebruik ervan, je groepeert zo een aantal paragrafen en een heading in 1 soort hoofdstukblok. Maar voor de rest idd eens met clay: gebruik div niet als de hoer van html
http://www.rikkertkoppes.com/thoughts/smurf-language

Je legt het probleem niet echt duidelijk uit. In je voorbeeld is een divje namelijk niet per definitie nodig. Het volgende voorbeeld maakt het naar mijn mening stukken duidelijker.

De tweede paragraaf hoort in dit geval zowel bij kopje 1 en kopje 2.

code:

<h1>kopje 1</h1>
<h2>kopje 2</h2>
<p>deze tekst hoort bij kopje 2
<p>deze tekst hoort bij kopje 2

Als we nu willen dat de tweede paragraaf niet bij kopje 2 hoort dan is een divje handig.
De tweede paragraaf hoort alleen bij kopje 1.

code:

<h1>kopje 1</h1>
<div>
    <h2>kopje2</h2>
    <p>deze tekst hoort bij kopje 2
</div>
<p>deze tekst hoort bij kopje 1

PC load letter? What the fuck does that mean?

zondag 16 januari 2005 15:56

Acties:

Verwijderd

Topicstarter

Nu heb ik wat geprutst met div's en bekom ik dit:
http://tijs.downfire.com
Ik zoals je ziet zit ik weer met een probleem. Ik heb vijf "rijen" div's, waarvan er 1 100% moet worden uitgelijnd, zodat het volledige scherm gevuld is (dit werkt feilloos met tabellen, maar hier dus niet). Ik heb al gezocht hier op GoT, en het probleem komt vaak voor, maar er is nooit een pasklare oplossing. Het feit dat ik met images werk vergemakkelijkt de zaak niet (daar ik met vaste hoogtes zit voor mijn divs).

Vast hoogte

Vaste hoogte

100% hoogte

Vaste hoogte

Tenzij iemand deze kwestie kan oplossen, besluit ik dat tabellen net iets simpeler zijn. Trouwens, een ander motivatie om met layers te beginnen was dat http://www.tijs-d.info/ met een horizontale scrollbar zit (ik dacht dat dat door de tabellen kwam, niet dus).
Weet iemand hier een oplossing voor? Of gewoon de hosting contacteren?

[ Voor 10% gewijzigd door Verwijderd op 16-01-2005 16:02 ]

zondag 16 januari 2005 16:15

Acties:

Verwijderd

Ik zoals je ziet zit ik weer met een probleem. Ik heb vijf "rijen" div's, waarvan er 1 100% moet worden uitgelijnd, zodat het volledige scherm gevuld is (dit werkt feilloos met tabellen, maar hier dus niet).

Hmm, test57 is zeer vaak gelinkt.

Tenzij iemand deze kwestie kan oplossen, besluit ik dat tabellen net iets simpeler zijn. Trouwens, een ander motivatie om met layers te beginnen was dat http://www.tijs-d.info/ met een horizontale scrollbar zit (ik dacht dat dat door de tabellen kwam, niet dus).

Misschien handig om te leren waar je eigenlijk mee bezig bent?

Weet iemand hier een oplossing voor? Of gewoon de hosting contacteren?

Ja, de mensen die je server instellen zullen vast weten waar die scrollbar vandaan komt.

zondag 16 januari 2005 16:33

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zondag 16 januari 2005 @ 16:15:
Misschien handig om te leren waar je eigenlijk mee bezig bent?

Van waar die brutale ondertoon? Ik ben misschien geen professional zoals jij, maar daarom hoef je zo niet te reageren.
Achteraf gezien kan het niet anders dat het aan de hosting ligt (die horizontale scrollbar).

zondag 16 januari 2005 16:49

Acties:

Verwijderd

niks hosting, je content is gewoon te breed, punt.

zondag 16 januari 2005 17:13

Acties:

Genoil

Verwijderd schreef op zondag 16 januari 2005 @ 16:33:
[...]

Van waar die brutale ondertoon? Ik ben misschien geen professional zoals jij, maar daarom hoef je zo niet te reageren.
Achteraf gezien kan het niet anders dat het aan de hosting ligt (die horizontale scrollbar).

Je hebt het zelf blijkbaar al door dat op dit subforum de betere HTML-experts van Nederland rondhangen. Deze gasten zien binnen luttele seconden dat verreweg de meeste zogenaamd unieke problemen waaraan een [HTML/CSS] topicstart gewijd is, allemaal op dezelfde basisprincipes gestoeld zijn. Sommigen hebben naast hun kennis een dusdanig geduld dat ze telkens maar weer netjes een oplossing aandragen (zie Clay's uitstekende lap tekst), anderen hebben dit al zo vaak gedaan dat ze misschien een beetje brutaal overkomen. Ik zou zeggen, trek je er niet teveel van aan, je kunt veel van deze mensen leren dus jaag ze niet tegen je in het harnas.

Nu sta je echter in je hemd door heel hard te beweren dat die horizontale scrollbalk er door je hosting provider ingezet wordt

zondag 16 januari 2005 19:22

Acties:

Verwijderd

Topicstarter

Genoil schreef op zondag 16 januari 2005 @ 17:13:
[...]
Nu sta je echter in je hemd door heel hard te beweren dat die horizontale scrollbalk er door je hosting provider ingezet wordt

Ik ben er zeker van: als je op http://tijs.downfire.com kijkt, zie je geen scrollbar. Als je naar http://www.tijs-d.info gaat, dan zie je er wel een (dat domein is wordt geredirect naar http://tijs.downfire.com onder de optie "Cloaked"). De in mijn ogen, logische conclusie is, dat het iets met de hoster (wel ja, het bedrijf dat instaat voor mijn domein) te maken heeft.

zondag 16 januari 2005 19:30

Acties:

Verwijderd

mijn conclusie is nog steeds dat het aan jou ligt (frames), d'r wordt ook helemaal niks geredirect

overigens zie ik nu op beide pagina's geen scrollbar, maar je zal wel aan het pielen zijn

[ Voor 14% gewijzigd door Verwijderd op 16-01-2005 19:30 ]

zondag 16 januari 2005 19:46

Acties:

Genoil

Verwijderd schreef op zondag 16 januari 2005 @ 19:30:
mijn conclusie is nog steeds dat het aan jou ligt (frames), d'r wordt ook helemaal niks geredirect

overigens zie ik nu op beide pagina's geen scrollbar, maar je zal wel aan het pielen zijn

Ik zie (in Firefox) ook geen scrollbars (ook geen verticale, trouwens

), in IE wel. De reden dat die horizontale scrollbar erin zit, is dat je een tabel hebt met een breedte van 100%. Als je vervolgens content hebt die hoger is dan je browservenster, gaan er 16px van je beschikbare vensterbreedte af, maar daar heeft width="100%" schijt aan. Dus krijg je altijd een horizontale scrollbar indien je een verticale hebt. Waarom er helemaal geen scrollbars in FF zijn is me ff een raadsel...

zondag 16 januari 2005 19:51

Acties:

Verwijderd

body
{
overflow: hidden;
}

mij niet

voor IE zou je dit voor het HTML element moeten doen. Maar dit is natuurlijk een non-oplossing. Content is gewoon te breed (dat flash ding)

overigens ontgaat het nut van flash me hier een beetje, maakt je pagina niet echt accessible

zondag 16 januari 2005 19:55

Acties:

Genoil

Verwijderd schreef op zondag 16 januari 2005 @ 19:51:
body
{
overflow: hidden;
}

mij niet voor IE zou je dit voor het HTML element moeten doen. Maar dit is natuurlijk een non-oplossing. Content is gewoon te breed (dat flash ding)

overigens ontgaat het nut van flash me hier een beetje, maakt je pagina niet echt accessible

ag gut dr zit ook nog een stylesheet in, zondagavond...

zondag 16 januari 2005 19:56

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zondag 16 januari 2005 @ 19:30:
mijn conclusie is nog steeds dat het aan jou ligt (frames), d'r wordt ook helemaal niks geredirect

overigens zie ik nu op beide pagina's geen scrollbar, maar je zal wel aan het pielen zijn

Ik gebruik geen frames, het is domeinnaam.be die die frames instelt (daarin staan sleutelwoorden om zo opgenomen te worden in zoekmachines).
En ik zie nog steeds frames (maar jij gebruikt waarschijnlijk FFX)
http://piranha.f2o.org/bewijs.jpg

zondag 16 januari 2005 20:08

Acties:

Rowanov

Kop eens wat anders...

Verwijderd schreef op zondag 16 januari 2005 @ 19:56:
[...]

Ik gebruik geen frames, het is domeinnaam.be die die frames instelt (daarin staan sleutelwoorden om zo opgenomen te worden in zoekmachines).
En ik zie nog steeds frames (maar jij gebruikt waarschijnlijk FFX)
http://piranha.f2o.org/bewijs.jpg

En waarom zou Firefox die frames niet zien?

zondag 16 januari 2005 20:09

Acties:

Verwijderd

wie heeft je dat wijsgemaakt? meta descriptions helpen geen zak (in google) en frames zijn al helemaal niet handig voor zoekmachines, en toegankelijkheid, dus die zou ik gewoon ditchen

verder geef je in je frameset aan dat er 2 rows zijn en heb je uiteindelijk maar 1 <frame> element. Geen idee of het direct daar aan ligt, maar het zou kunnen. Ik zou het gewoon wegdoen iig

zondag 16 januari 2005 20:16

Acties:

Genoil

Ik ben maar even zo vrij geweest je source te kopieren, en zowel de pagina als de frameset met de pagina erin op m'n eigen host te zetten. Kun je zien dat het dus gewoon NIET aan je host ligt en WEL aan je frameset. (het is niet relevant of je .info host via een of ander menuutje een frameset voor je bouwt of dat je er zelf 1 gebruikt, het is en blijft een frameset en de oorzaak van je probleem (had ik hiervoor al ongeveer beschreven)

http://www.meneer.net/test/fs.html (frameset)
http://www.meneer.net/test/pg.html (pagina)

Op Firefox zie je hier geen verschil trouwens...komt vast door een iets andere interpretatie van 100% width.

[ Voor 11% gewijzigd door Genoil op 16-01-2005 20:18 ]

zondag 16 januari 2005 20:22

Acties:

Johnny

ondergewaardeerde internetguru

Verwijderd schreef op zondag 16 januari 2005 @ 19:56:
[...]

Ik gebruik geen frames, het is domeinnaam.be die die frames instelt (daarin staan sleutelwoorden om zo opgenomen te worden in zoekmachines).
En ik zie nog steeds frames (maar jij gebruikt waarschijnlijk FFX)
http://piranha.f2o.org/bewijs.jpg

Maar jij kiest er toch voor om domeinnaam.be dat te laten doen?

Enne, die sleutelwoorden, die staan er niet eens, en ookal zouden ze er staan, dan zouden ze nog niet werken omdat de grote zoekmachines tegenwoordig al lang niet meer zoekwoorden lezen.

Als je gevonden wil worden via zoekmachines zou je veel beter van frames af kunnen stappen, zorgen dat er links naar je website zijn op andere websites, zorgen dat je navigatie in HTML is, in plaats van Flash en unieke inhoud aanbieden, iets waar iemand iets aan heeft.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zondag 16 januari 2005 20:39

Acties:

Genoil

hah gevonden, mijn verhaal over die 100% klopte bij nader inzien toch niet helemaal

Deze tag (onderaan je content) hier zorgt voor het probleem:

code:

<p />

IE maakt er een zootje van als tags op deze manier gesloten worden, indien de tag potentieel wel content kan bevatten (dus <p />, <div /> gaat fout, <br /> , <hr />, <input /> geen probleem) . Je moet dus:

code:

<p></p>

Ik hoop niet dat je je hostingprovider al boos gemaild hebt