Archief - HTML/CSS: Uitlijning website lukt maar niet

Hallo allemaal,

Dit is wat ik tot nu toe heb :

http://mathieuke.awardspace.com/

Alles wordt gedaan ( of beter gezegd, geprobeerd ) met css en div's maar ik krijg het niet in orde.

De banner enzo zijn maar tijdelijk dus gelieve geen commentaar te geven daarop !

Tgaat om het gedeelte dat in de news feeder staat. Zoals ge ziet wordt de tekst die in het tweede kaderke staat gewoon uit de kader gerukt en helemaal vanonder geplaatst.
En dit fenomeen zet zich verder, als ik 5 tekstkaders plaats dan staan alle oneven kaders min of meer ok maar alle even nummers worden gewoonweg allemaal onderaan geplaatst

De CSS kunde gewoon zien in mijn bronpagina, kwestie van het easy te houden da ge niet moet zoeken naar gelinkte style sheets.

De site in IE is nog een grotere ramp dus gelieve voorlopig het in FF te bekijken

Khoop dat er mij iemand kan helpen

Je geeft nergens een positie aan lijkt mij en daardoor worden al uw divs onder mekaar gezet vermoed ik. Gebruik eens position: absolute, en geef dan aan waar die moet komen. Trouwens erg vreemd opgestelde website qua code...

Cyc1oon zei:

Trouwens erg vreemd opgestelde website qua code...

Klik om te vergroten...

Kunde dit eens verduidelijken ?


Kga die position eens toepassen dan, kwist niet dat zoiets hoefde.

veel teveel divs.. en een "id" mag je maar 1x gebruiken

omfg zei:

veel teveel divs.. en een "id" mag je maar 1x gebruiken

Klik om te vergroten...

Wa moetek dan gebruiken, een "class" ?

p, h tags, span, blockquote, ....

Ja best class gebruiken

Cyc1oon zei:

Ja best class gebruiken

Klik om te vergroten...

Hmm, goed dat je probeert te helpen, maar "best" class gebruiken absoluut niet. en position:absolute is toch ook bijna nooit nodig, tenzij je divs wil laten overlappen bv ... Dus zet mensen niet op het verkeerde spoor aub

Hij moet leren om niet overal divs te gebruiken, maar andere html tags, die trouwens voor iets bestaan.

De beste methode is en blijft een mooie structuur, waarop css ook zeer eenvoudig wordt, zonder dat je nog veel classes ofzo moet maken, tenzij voor opvallende dingen die meermaals dienen voor te komen, (denk ik maar aan een date paragraaf ofzo in nieuwsberichten... of een date span ...)

Kheb het probleem opgelost gekregen door een paar divs minder toe te passen en in de html tags een style toe te passen en dergelijke meer.

Dus, bedankt


Ge kunnet anders nu eens opnieuw bekijken in dezelfde link. Kheb mijn classes ook een andere naam gegeven waardoor dat de structuur een stuk beter te bekijken valt. Nu alleen nog de tekst mooi gaan uitlijnen

orez zei:

Hmm, goed dat je probeert te helpen, maar "best" class gebruiken absoluut niet. en position:absolute is toch ook bijna nooit nodig, tenzij je divs wil laten overlappen bv ... Dus zet mensen niet op het verkeerde spoor aub

Hij moet leren om niet overal divs te gebruiken, maar andere html tags, die trouwens voor iets bestaan.

De beste methode is en blijft een mooie structuur, waarop css ook zeer eenvoudig wordt, zonder dat je nog veel classes ofzo moet maken, tenzij voor opvallende dingen die meermaals dienen voor te komen, (denk ik maar aan een date paragraaf ofzo in nieuwsberichten... of een date span ...)

Klik om te vergroten...

Nja goed, ik wou hem niet z'n hele websitecode overhoop laten gooien, en dan leek hij me het best weg te komen met absolute positionering. In de eerste post zei ik toch dat z'n code vrij raar opgebouwt was... (wat voor mij betekent, herbeginnen )

Overigens even melden dat het nut van een stylesheet- en divopmaak bijna helemaal teniet gedaan wordt, omdat je het in je HTML document zelf zet. Op die manier wordt de stylesheet bij bij elke pagina opnieuw ingeladen.

Je kan er veel beter naar linken. Op die manier blijft de externe stylesheet in de cache van de browser en laden je pagina's nog sneller. Hiervoor moet je het volgende doen: knip alles tussen de <style> en </style> tags weg en plak het in een nieuw screen.css bestand (of whatever je dat wil noemen). Verwijder alles wat er nog van <style></style> staat en vervang het door volgende regel:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />

screen.css moet uiteraard in dezelfde map staan als het html bestand. media="screen" dient om aan te duiden dat het stijlblad enkel voor het gewone scherm dient. Zo heb je ook de mediatypes "speech" (spraaksynthese) "print" (printers) en "all" (stijlblad toepassen op alle media). Er zijn er nog veel meer natuurlijk maar ik ga ze hier niet allemaal opnoemen. Moest je dit al allemaal weten, des te beter =).