Archief - discussie: Div's

soepkieke · 3 jun 2004

wtf is diene div enzo, aleja, ik lees overal maar div als ge ier zo is leest enzo, div is toch ni zo machtig? buite da ge er me kunt uitlijne dan?? (voor zover ik weet toch)

of is er nog meer da ik ni weet van diene div?

LunchBox · 3 jun 2004

een div is oppermachtig! je kan ze positioneren waar ook op je scherm - je kan ze voor of achter een object plaatsen - kortom je kan het zien als layers in photoshop // het werkt veel handiger dan tables eens je weet hoe je ze opbouwt via css -- en zijn zeer gemakkelijk aan te spreken met javascript voor extra functionaliteit. (verplaatsen, verbergen, resizen)

tzijn dus eigenlijk containers die je kan stylen (background-image, border-width) en waarin je op vrij eenvoudige wijze een design (afbeeldingen & tekst) naar html kan opbouwen. de code is overzichtelijker dan die van tables dus om alles valid te krijgen zit je niet zo lang te prutsen.

soepkieke · 3 jun 2004

enne

sorry voor het lastig doen ze
maar weet ge der een goe voorbeeld van ofzo

want op goeogel vinde alleen ma van die brol voorbeeldjes waar ge de echte kracht ni van zie

Dece · 3 jun 2004

www.csszengarden.com
enig nadeel van div positioning is dat het pas echt ondersteund wordt vanaf IE6.0 en dat je soms wat langer bezig zit met te prullen om alles crossbrowser te laten passen zoals je dat wenst(alle ik toch

)

soepkieke · 3 jun 2004

nog wa voorbeelde of niks echt duidelijk meer?
thx alvast

BertG · 3 jun 2004

mjah, tevens is het ook zo, dat GEEN ENKELE browser volledig css ondersteunt.
Zowel de Mozilla motor als die in IE6 passen niet alle regels toe zoals het hoort!

soepkieke · 3 jun 2004

mja, da wetek maja, daar lig ik ni van wakker ze, ik ga er toch niks ingewikkeld me doen, kwil gewoon wete wa de mogelijkhede ewa zijn en oe ge da ewa doe (diene div dan he)
maybe nog wa voorbeelde ofzo? of codes van eige sites ofzo?

|t3st · 3 jun 2004

kzou zeggen probeer het allemaal es zelf
leer css op www.w3schools.com/css
en www.csszengarden.com kunt ge de css es gewoon overnemen en veranderen om te zien wavoor effect het heeft

proberen is de sleutel van de kennis (samen met verstaan maar door te proberen verstaat men)

greetz Sluttie

Lashknife · 3 jun 2004

LunchBox zei:
het werkt veel handiger dan tables eens je weet hoe je ze opbouwt via css

zou je eens effe de code kunnen laten zien van deze table maar dan in divs?

Code:

<table border="1">
<tr>
<td>top left</td>
<td rowspan="2">top mid left rowspan 2</td>
<td>top mid right</td>
<td>top right</td>
</tr>
<tr>
<td>row 2 left</td>
<td>row 2 mid right</td>
<td rowspan="3">row 2 right</td>
</tr>
<tr>
<td colspan="3">row 3 left, mid left, mid right</td>
</tr>
<tr>
<td>bottom left</td>
<td>bottom mid left</td>
<td>bottom mid right</td>
</tr>
</table>

ik weet het, dit is een rare table om een layout in te steken, maar zo komen alle dingen aan bod... (de border="1" uiteraard enkel maar om ni in de knoop te liggen met row/colspans

)

soepkieke · 3 jun 2004

ja, als iemand daar een voorbeeldje van kan geve, kan ewa handig zen voor mij, om is te zien oe diene div in zen werk ga

`SeriOUs · 3 jun 2004

Even vermelden:
w3c (degenen die de regels van het web opstellen) willen html veel stricter gaan maken. Nadat ze een aantal jaren geleden een heleboel tags en attributen hadden toegevoegd, werden webpagina's al rap erg slecht opgebouwd.
Nu willen ze via css en xhtml echt stricte normen opleggen. Dit zal op lange termijn alles tengoede komen. Alles zal meer crossbrowser worden, zoeken op internet wordt stukken gemakkelijker (inhoud & design worden gescheiden), alles laadt sneller, ... Natuurlijk zal dit, moest het al ooit echt verwezenlijkt worden, allemaal op lange termijn gebeuren. Daarom begin je beter nu al je opmaak met div's te plaatsen. Waarom?
Elke tag heeft zijn eigen functie. <li> voor lijsten, <p> voor paragrafen, ...
tabellen en cellen worden gebruikt voor data te vergelijken, divisions (div's) voor de pagina op te delen in verschillende delen. (een beetje zoals secties in word).
Daarom gebruik je dus beter divisions om je webpagina te schikken dan tables.

soepkieke · 3 jun 2004

dus maw woorde
www.noxa.net/soepkieke
dit is een perfect voorbeeld om me divs te gaan werke dan?

kan der iemand een mooi kort en duidelijk voorbeeld geve pls?

zou het me echt vele duidelijker make oe der aan te beginne ze

en dan oe zit da, me al die resoluties enzo? in % werke of gewoon een kleion formaat pakke?

`SeriOUs · 3 jun 2004

Lashknife zei:
zou je eens effe de code kunnen laten zien van deze table maar dan in divs?
...
code
...
ik weet het, dit is een rare table om een layout in te steken, maar zo komen alle dingen aan bod... (de border="1" uiteraard enkel maar om ni in de knoop te liggen met row/colspans )

Ik ga volledig akkoord dat dit erg moeilijk zou worden. Maar je zal met div's anders te werk moeten gaan. Niet meer in cellen denken. Het is dus ook geheel nutteloos om dit na te maken zonder te weten waarvoor elke cel bedoeld is, en of sommige cellen met div's en css niet overbodig worden. (wat vaak het geval is. Zeker als css 3.0 ingevoerd wordt.)

soepkieke zei:
dus maw woorde
www.noxa.net/soepkieke
dit is een perfect voorbeeld om me divs te gaan werke dan?

kan der iemand een mooi kort en duidelijk voorbeeld geve pls?
zou het me echt vele duidelijker make oe der aan te beginne ze

en dan oe zit da, me al die resoluties enzo? in % werke of gewoon een kleion formaat pakke?

moest ik niet in de examens zitten had ik u graag geholpen.

soepkieke · 3 jun 2004

maar oe zit da dan? me die divs
moe ge een plaats ingeve enzo? of is da zoals bij tabelle meer?

`SeriOUs · 3 jun 2004

soepkieke zei:
maar oe zit da dan? me die divs
moe ge een plaats ingeve enzo? of is da zoals bij tabelle meer?

http://css.maxdesign.com.au/floatutorial/ Dit is bv. al een deftige tutorial.

LunchBox · 3 jun 2004

even een div-voorbeeld van jouw probleemstelling gemaakt lashknife:
http://www.web-lab.be/_showcase/forumDivTest.htm

zij die denken dat het veel rekenwerk vereist zijn overigens verkeerd, je moet enkel op een div waar een border opzit 2px aftrekken aan de kant van deze border (in dit geval boven-en zijkanten) wil je het oorspronkelijke formaat behouden.

dit kan je dus op 2 manieren benaderen, ofwel de buitenste cell 2px hoger/breder maken en alles laten staan, ofwel de inner-elementen 2px verkleinen en dan zit je met veel meer onafgeronde waarden.

een nuttige tip misschien, positioneer alles met een scherm-margin van 0px en dus maak zeker je site oorspronkelijk links boven tegen de kant.. daarrond zet je dan een position div waarmee je meteen alles hierbinnen kan gaan verplaatsen naar waar je wenst. (zo moet je geen onnodige berekeningen maken)

moeten nu deze cellen variabele hoogte krijgen dan bouw ik de div-structuur anders op en kan je bepaalde top/left-waarden weglaten en breaks plaatsen. als het veel veranderingen zou vergen worden er simpele javascriptjes geschreven of waarden naar php doorgegeven - kortom layouts maken met divs is niet onoverkomelijk moeilijk en je hebt heel veel controle over elke div afzonderlijk. (probeer dat maar eens met cellen van een table)

soepkieke · 3 jun 2004

zalig, merci voor da voorbeeld he

it makes me happy
enne, die fotokes enzo, is dan me achtergrond gedaan zeker? of me z-layers?
aleja, beide ga he

merci he

deadlock · 3 jun 2004

`SeriOUs zei:
Even vermelden:
w3c (degenen die de regels van het web opstellen) willen html veel stricter gaan maken. Nadat ze een aantal jaren geleden een heleboel tags en attributen hadden toegevoegd, werden webpagina's al rap erg slecht opgebouwd.
Nu willen ze via css en xhtml echt stricte normen opleggen. Dit zal op lange termijn alles tengoede komen. Alles zal meer crossbrowser worden, zoeken op internet wordt stukken gemakkelijker (inhoud & design worden gescheiden), alles laadt sneller, ... Natuurlijk zal dit, moest het al ooit echt verwezenlijkt worden, allemaal op lange termijn gebeuren. Daarom begin je beter nu al je opmaak met div's te plaatsen. Waarom?
Elke tag heeft zijn eigen functie. <li> voor lijsten, <p> voor paragrafen, ...
tabellen en cellen worden gebruikt voor data te vergelijken, divisions (div's) voor de pagina op te delen in verschillende delen. (een beetje zoals secties in word).
Daarom gebruik je dus beter divisions om je webpagina te schikken dan tables.

Ha! da kan rechtstreeks in mijn eindwerk

soepkieke · 3 jun 2004

hmm, enne hoe krijg ik diene nu mooi in het midde van men beeld gezet?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
		body{background-color:#eee;font-family:tahoma;font-size:10px;margin:0;}
		div{position:absolute;border:1px black solid;}
		#plaats{top:50;left:50;}
		#top{width:900px;height:100px;}
		#menu{top:101px;width:80px;height:399px;}
		#inhoud{height:399px;width:819px;top:101px;left:81px;}
		#kader{width:902px;height:502px;;background-color:white;}
	</style>
</head>
<body>
<div id="plaats">
	<div id="kader">
		<div id="top"></div>
		<div id="menu"></div>
		<div id="inhoud"></div>
	</div>
</div>
</body>
</html>

(ja is geript, ma is ma testje, om het concept effe beet te hebbe

)

LunchBox · 3 jun 2004

#plaats{top:50;left:50;} vervangen door:

Code:

#plaats{border:0;top:50%;left:50%;margin-left:-451px;margin-top:-251px;}

let erop dat je maten een eenheid moet geven zodra ze van 0 verschillen

Archief - discussie: Div's

soepkieke

Legacy Member

LunchBox

Legacy Member

soepkieke

Legacy Member

Dece

Legacy Member

soepkieke

Legacy Member

BertG

Legacy Member

soepkieke

Legacy Member

|t3st

Legacy Member

Lashknife

Legacy Member

soepkieke

Legacy Member

`SeriOUs

Legacy Member

soepkieke

Legacy Member

`SeriOUs

Legacy Member

soepkieke

Legacy Member

`SeriOUs

Legacy Member

LunchBox

Legacy Member

soepkieke

Legacy Member

deadlock

Legacy Member

soepkieke

Legacy Member

LunchBox

Legacy Member