[html + css] venster opbouwen met objecten

[Arjan]

'navond

Ik ben de halve dag bezig geweest met iets dat me ontzettend makkelijk leek.
Ik wil namelijk een venster van 800xX pixels indelen met bepaalde elementen die vaste waarden hebben en zich moeten aanpassen aan de inhoud. Een gemiddelde website dus eigenlijk.

Toch lukt het me totaal niet om dit op papier te krijgen, ik beschouw mezelf toch op z'n minst als intermediate qua niveau van CSS en HTML maar ik doe het kennelijk toch aardig fout.

laat ik een tabel gebruiken om aan te geven wat ik wil bereiken:

boven1	boven2	boven3	boven4	boven5	boven6	boven7
midden1	midden2					midden3
onder1	onder2					onder3

voor het formaat van de afzonderlijke onderdelen betekend dat:

fixed	v-fixed	fixed	h-variabel	fixed	v-fixed	fixed
h-fixed	v-variabel					h-fixed
fixed	fixed					fixed

afhankelijk van de eisen aan de hokjes was ik tot de volgende opbouw gekomen:

img	img	img	span	img	img	img
img	div					img
img	img					img

zoals je waarschijnlijk al ziet is dit een standaard kader idee, ziet er ongeveer zo uit:

+	-	<	titel	>	-	+
|	inhoud					|
+	---------------					+

nu wilde ik dit dus eigenlijk oplossen zonder table's.

<div boven>
<img><img><img><span>titel</span><img><img><img>
</div>

<div midden>
<img><div inhoud></div><img>
</div>

<div onder>
<img><img><img>
</div>

style:
div#inhoud {
display: inline;
}

voor een online test zie hier:
http://www2.hku.nl/~arjan0/test.html

Mijn vragen:
• Is dit de handigste manier om dit op te lossen?
• Is het mogelijk om dit zonder javascript succesvol aan de inhoud te laten aanpassen?
• Is het überhaupt wel verstandig om dit te willen oplossen zonder table?

overigens wil ik zo min mogelijk background images gebruiken, eigenlijk zelfs helemaal geen, omdat ik PNG's gebruik en IE doet daar niet zo lief mee.

alvast bedankt voor eventuele feedback.

[MBV]

Dit is voor zover ik weet (geen expert ofzo) niet de handigste layout. Kijk eens naar de diverse 3-column-layouts die er beschikbaar zijn. Ik heb wel een testje dat ik ooit heb gemaakt: http://www.mvdvlist.nl/xmltest/3col_index.html. Uiteraard is de html en CSS code ergens van gejat, weet alleen niet meer van welke site.
Misschien heb je hier wat aan. JS is imho zelden nodig voor layout.

Daarnaast moet je jezelf afvragen of je de site helemaal variabel wil laten. Ik kies nu zelf voor een vaste breedte: 800px (minus scrollbar etc). Je kan ook 1024px overwegen, zolang het maar bruikbaar blijft op 800px (dus dan moeten je balken links en rechts 224px breed zijn). Als je dat niet doet heeft dat nadelen: tekst van 1200px breed (1400x1050 monitor) is erg lastig/vermoeiend lezen.

[Arjan]

het is uiteindelijk slechts een onderdeel van een site, en de breedte is vast op 800px en dat is geen probleem.

Je moet dit dus niet zien als de uiteindelijke site, maar als een onderdeel van een groter geheel.

[MBV]

Ok, prima. Heb je gekeken naar dat voorbeeld van mij? Dat is de meest gangbare aanpak van het soort layout dat jij wilt hebben, voor zover ik weet.

[Arjan]

Het heeft even geduurd maar ik denk dat ik hem nu zo heb aangepast dat ik em kan gebruiken. Hier is de oplossing voor de geintereseerden.
http://www2.hku.nl/~arjan0/testpagina.html

er zit zoals je ziet nog een rare quirk in de background-color van het eerste footer divje.

[Spockz]

<div class="bottom id="b1">9</div>

Je vergeet daar ook de class af te sluiten.

Hmm, niet alleen die class dus.

[ Voor 34% gewijzigd door Spockz op 01-12-2005 15:10 ]

[MBV]

Kijk ook even naar http://validator.w3.org/c...%7Earjan0/testpagina.html. Door XHTML strict aan te willen houden, verplicht je jezelf alle tags af te sluiten ( <br /> ipv <br>, en <meta ... />). Alleen houd je je daar heel consequent niet aan.
Als je al die errors oplost, kom je erachter dat je <div class="footer> hebt staan, waar dus een " mist.

Als je daarmee klaar bent, kan je het afmaken door je CSS te checken met http://jigsaw.w3.org/css-...%7Earjan0/testpagina.html.

[Arjan]

Ja lekker weer * Arjan

(ik had om 15.00 les, vandaar dat ik zo grondig had gedebugged..)
iig thanks, het lijkt erop dat ik er nu uit ben

[MBV]

stom vraagje misschien, maar waarom specificeer je hem als XHTML strict, als je je niet aan de regeltjes houdt daarvoor? Dan kan je je pagina net zo goed als HTML 4 specificeren, daar is ook niks mis mee. Volgens mij renderen browsers HTML4.01 strict hetzelfde als XHTML strict, toch?

[Arjan]

MBV schreef op donderdag 01 december 2005 @ 21:00:
stom vraagje misschien, maar waarom specificeer je hem als XHTML strict, als je je niet aan de regeltjes houdt daarvoor? Dan kan je je pagina net zo goed als HTML 4 specificeren, daar is ook niks mis mee. Volgens mij renderen browsers HTML4.01 strict hetzelfde als XHTML strict, toch?

ja, maar ik had de testpagina doorgebreid op jouw voorbeeld

in m'n eigen toepassing is het idd gewoon html.

ben ik toch nog niet helemaal klaar met m'n oplossing. Ik had wel mooi percentages gepakt in het voorbeeld, maar dat werkt in de uiteindelijke toepassing natuurlijk niet omdat ik enkele objecten heb die vaste waarden hebben. Zo moeten boven1, boven3, boven5 en boven7 vasten breedtes hebben, terwijl boven2 en boven6 de ruimte die overblijft nadat boven4 haar ruimte heeft ingenomen....duidelijk?

[MBV]

Had je het er niet over dat de totale breedte een vast gegeven is? En anders: hoeveel elementen zijn vast, en hoeveel niet? Als er maar 1 variabel is, dan is het simpel: die auto, de rest fixed. Als er 2 elementen naast elkaar variabel zijn, zou je een div er omheen kunnen maken, die eromheen auto maken, en de 2 erin een percentage.
Als iemand mij kan vertellen hoe je dezelfde trucs uit kan halen als met frames (links 2x zo veel als rechts) ben ik blij, aangezien bovenstaande methode nogal irritant is.

[Verwijderd]

Atgast schreef op donderdag 01 december 2005 @ 18:50:
... het lijkt erop dat ik er nu uit ben

Daar lijkt het op bij gebruik van FF, maar bij IE en OP zijn d'r nog opmerkelijke verschillen.

[Arjan]

Ja, het blijkt allemaal toch veel lastiger dan ik aanvankelijk dacht. Hier is het voorbeeld uitgewerkt met een table, zodat precies duidelijk is wat het ding moet kunnen.

Wat zeggen de experts hiervan, is dit mogelijk zonder tables? en is het uberhaupt wel nuttig om dit zonder tables te proberen...

http://www2.hku.nl/~arjan0/testpagina.html nu met tables dus.

[MBV]

Zonder tables kan je het eenvoudiger gebruikersafhankelijk maken: andere CSS en hij ziet er totaal anders uit (theoretisch dus). Ook kan je eenvoudiger een print-layout maken: voor de printer kan je een andere CSS instellen, en je hebt hem zonder felgekleurde achtergronden