skip to content

Beukeys Webdesign

inhoud

Artikel: Positioneren zonder divjes

Zonder divjes

Na 2 experimentjes van een divless webdesign, wil ik hier duidelijker uitleggen hoe je zo'n pagina kan maken. Het is niet zo dat ik tegen divjes ben, maar dit artikel laat wel zien dat je niet zo snel naar divjes hoeft te grijpen wanneer je iets wil positioneren.

De reden van het experimentje was trouwens dat ikzelf teveel divjes gebruikte en het ook vaak op andere sites zie. Daarnaast is het zo, dat bij de toekomstige standaard xhtml 2.0 je - waarschijnlijk - geen div's meer mag gebruiken voor het positioneren, maar dit alles via stylesheets behoort te doen.

update 07-11-'06: het bleek te gaan om een 1 april grap; Bij xhtml 2.0 mogen wel gewoon <div> en <span> gebruikt worden: projectsevenextern.

update 07-10-'10: in het verhaal hieronder heb ik het over IE; ik gebruikte toen IE6

De body-container

Vaak zie je bij sites dat in de <body> een div (heeft vaak een id met als naam 'container' of 'wrapper') gezet wordt met een width van - iets minder dan - 800px; hij zit dan mooi in het midden en op computers met resolutie 800*600 ziet het er ook nog goed uit. Buiten de container om wordt veelal geen tekst geschreven, je ziet alleen een background-color of background-image.

Als je het html-document nu nader bekijkt, dan zit de <body> al in een <html>, waar je dus eigenlijk niets mee doet! In plaats van de div-container gebruik ik daarvoor de <body> die een width van 760px krijgt. Dit werkt in FF en Opera. Voor IE moet het html-document een xhtml-doctype krijgen, anders blijft de width gewoon 100%.

om de <body> mooi in het midden te krijgen - en daar buitenom alvast een kleurtje - zet je in de Css:

	html {
		color:black;
		background-color:#D9CCC3;
		}
	
	body {
		left:50%;
		margin-left:-380px;
		position:absolute;
		width:760px;
		}
	

update: een betere manier

De W3C-validator voor Css geeft vaak een waarschuwing, wanneer je wel een achtergrond kleur hebt aangegeven maar geen kleur. Persoonlijk vind ik het wel stoer dat de stylesheet geen fouten heeft en ook geen waarschuwingen krijgt, dus heb ik de <html> een color:black gegeven, ook al komt er geen tekst smile.

Zonder er al teveel over uit te weiden, wordt dit een xhtml-pagina ( IE is dan ook blij). Een goede professionele webdesigner werkt - naar mijn mening - volgens de laatste ontwikkelingen: dat betekent dus gescheiden xhtml en css, en rekening houden met usability, accessibility en semantisch te werk gaan. de doctype moet dan ook een lang: krijgen (zodat screenreaders weten in welke taal ze moeten spreken).

voorbeeld 1

Header en menu

Hier kies ik ervoor om de header in een <h1> te zetten; zoekmachines zullen dit ook als belangrijke hoofdstuk beschouwen. Dus is de titel ook nog relevant - en dat lijkt me best wel logisch :)) - dan klopt het semantisch ook nog eens. De <h1> in de <body> kun je dan een mooi achtergrond-image geven.

Omdat een menu strikt genomen een lijst is, gebruiken we daarvoor uiteraard een lijst. Het eerste menu wordt een horizontale menu.

voorbeeld 2

De inhoud

Zou je hierna alleen maar tekst gebruiken, dan is dat vrij eenvoudig te plaatsen:

voorbeeld 3

Ietsjes mooier maken - met Css - en het ziet er al leuker uit!

voorbeeld 3b

Paragrafen of elementen naast elkaar

Dit is een betere uitdaging :)) echter, dit is al gerealiseerd in het eerste experimentje, waar ik 2 elementen naast elkaar heb. In versie 3 van dat experimentje zijn de elementen gepositioneerd met float:left en float:right. je kan ook zien welke elementen ik daar heb gebruikt: een form, lijst, tabel, en natuurlijk header en paragraaf. Naast het horizontale menu zit er ook 'n tweede - welbekende Son of SuckerFish extern - Dropdownmenu in.

Elementen naast elkaar

Jawel, nog een keer 2 elementen naast elkaar, want in versie 3 ging het makkelijk omdat ik maar een keer float:left hoefde toe te passen, de rest zat met een float:right aan de rechterkant. Dit stukje is dus nog nie af. Nu ben ik aan het uitproberen om 2 elementen naast elkaar te krijgen (andere manier dan bij het vorige experiment) (hier zou een voorbeeldje moeten komen, maar dat heb ik nog niet smile)

update 1:dat valt nog niet mee! na veel gestoei met 'float left' en 'float right', wel of geen 'clear'...denk ik dat dit niet de manier is - ja, je kan het in twee divjes stoppen, maar dan is het niet meer zonder div... In IE ziet het er wel goed uit (zie voorbeeld 4) maar in FF niet.

voorbeeld 4

en zoals al beschreven is: absoluut positioneren extern is denk ik ook niet de oplossing. De volgende site ga ik ook nog bestuderen: positioniseverything extern...en misschien is een juiste combinatie van float en position:relative een oplossing...but tricky!

update2: nou, ik heb even de bron bekenen, maar dat is een brug te ver...diverse hacks, only-IE-Css..en ga zo maar door...

Twee kolommen (lijsten)

update 3 (2 dagen later): nog steeds geen voorbeeld gemaakt, maar ik zat even te denken...met 2 kolommen gebruik je normaal 2 divjes waarin je links en rechts gescheiden houd (gegroepeerd)..ik zou ook 2 lange lijsten kunnen gebruiken (linkerlijst en rechterlijst), dan is het weer gegroepeerd..en hoef ik maar 1x float:left en float:right toe te passen..en twee lange kolommen naast elkaar kun je semantisch gezien toch twee lijsten noemen? smile

voorbeeld 5

Met het gebruik van de lijsten, zouden de zoekprogramma's de hoofdstukken minder belangrijk achtten (denk ik?) omdat je namelijk de <li>-tags gebruikt; maar wat blijkt - en wat ik niet wist - je kan de <h>-tags gewoon in de lijst gebruiken! en ook de <p>-tag, alhoewel dit misschien niet hoeft, en of dit dan weer semantisch beter is...daweknognie.

	<ul>
	  
	  <li>
	  
	    <h2> hoofdstuk 1 </h2>
	     
	    <ul><li><p>...inhoud...</p></li></ul>
		 
	  </li>
	  
	  
	  <li>
	  
	    <h2> hoofdstuk 2 </h2>
	     
	    <ul><li><p>...inhoud...</p></li></ul>
		 
	  </li>
	  
	</ul>

Drie kolommen (lijsten)

uiteraard met behulp van lijsten

voorbeeld 6

op dit punt - want het verhaal is nog niet af - wil ik even benadrukken dat voorbeeld 6:

omdat in de rechterkolom te weinig tekst naast het plaatje zit, zag het er alleen in FF niet goed uit. in de Css moest ik dit toepassen:

#rechts li {min-height:200px;}

Toch een bug?

bij het maken van dit artikel stuit ik hier waarschijnlijk op een 'IE-bug'; de google-ads - het middelste lijstje - had ik even later via css iets aangepast met margin en padding en zie hier het resultaat:

voorbeeld 6b

(het verschil is dus alleen in IE te zien, onderaan valt een gedeelte weg (update: in IE versie 7 is het niet meer te zien). Bij refreshen - F5 - kun je zien wel gedeelte steeds wegvalt. Bij gebruik van border:1px werd het nog erger.

Overigens zit er waarschijnlijk ook een bug in voorbeeld 6, want ook daar valt soms het onderste gedeelte weg (dat kun je dan weer tevoorschijn halen met refreshen)

Hoe zit het met nog kleinere schermresoluties?

Oops...het lijkt wel ik m'n eigen verhaal nu onderuit ga halen. Want het viel me nu pas op dat, wanneer je de window nog kleiner maakt, er tekst aan de linkerkant verdwijnt. Maar gelukkig is daar ook weer een oplossing voor, en oooh zo simpel. Het lag aan hoe ik het gecentreerd had. Dit is beter:

	body { 
		margin:10px auto;
		width:760px;
		}
	

Zie hoe het werkt (maak het scherm kleiner met de muis) in de verbeterde versie van voorbeeld 6

voorbeeld 6c

Footer

Een Footer - voetnoot - kun je onderaan zetten, en is in dit geval ook verstandig, want wanneer je 'iets' onderaan zet met een clear:both, dan is de waarschijnlijke bug daarbij ook 'opgeklaard'.

voorbeeld 7

In de rechterkolom heb ik nu even geen <h> of <p> gebruikt, gewoon om te laten zien dat het ook zonder kan.

Rounded Corners

...Rounded Corners extern - ofwel ronde hoeken - wil ik nog uitproberen...alhoewel je voor Firefox direkt klaar bent met -moz-border-radius:20px;

De border-radius is iets wat pas in de toekomstige Css3 gebruikt wordt - w3c-validator geeft dan ook een foutmelding voor je stylesheet - maar FF snapt het al. De overige browsers ondersteunen het nog niet.

voorbeeld 8 extern (ronde hoeken zijn dus alleen te zien in mozilla-browsers zoals Firefox)

xhtml/xml

het gaat nu nog even boven mijn pet...maar ik kom er achter (april 2006) dat xhtml valid nog niet betekent dat je site xhtml is (geparsed wordt); het document laat ik nu beginnen met de volgende code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">

en direkt ook een 'trick' om IE ook nog mee te laten doen, alsof het een volwaardige browser is in 2006(!).
bron: www.w3.org extern

En helaas pindakaas! alleen in IE trouwens; de body neemt nu zijn volledige breedte over het scherm.

voorbeeld 9a extern

Hier heb ik nu een div (dus niet meer divless) toegepast.In de stylesheet moesten er ook nog een aantal wijzigingen toegepast worden, omdat de layout iets veranderde (zie ook broncode van voorbeeld 9). probleem - alleen in IE! - aan de rechterzijde moet trouwens nog opgelost worden.

voorbeeld 9b extern

oplossing rechterzijde:in de Css heb ik een * html hack (voor IE) toegepast.

* html ul#menu1 {width:760px;}
* html ul#rechts {margin:0 -23px 0 0}

voorbeeld 9c extern

Script

...Onderaan op deze pagina staan advertenties - google ads - en wordt weergegeven via een <script type="text/javascript">. Het is nu nog uitzoeken hoe ik deze kan positioneren via Css. Want ik kan hem geen class of id meegeven. En ik kan het ook niet tussen een span plaatsen, een paar &nbsp; (lege spaties) ervoor typen lijkt de oplossing te zijn, maar dat moet dan weer in een paragraaf zitten.

Oplossing: Dankzij een tip weet ik nu dat die Adsense in een iframe zitten (met een eigen Id-verwijzing). Dus kun je het wel degelijk stylen via Css.

iframe {margin: 5px 30px;border:3px solid #B7A47C}

...zo is de onderstaande advertentie gestyled.

Advertentie