Archief - xhtml/CSS: DIV layout

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Flipkikker

Legacy Member
Hallo, medeforumgangers

Remake PuutJuwelen
Ik ben van plan om mijn nieuwste remake van PuutJuwelen in xhtml te maken.
Geen gebruik van tabellen meer voor de layout: een pure div based site.

Stap 1:
Om te beginnen start ik mijn beste vriend Fotosoep en maak ik een eenvoudige layout die perfect om te zetten is naar xhtml met bijhorende css.
Ik wil geen images gebruiken voor de layout, dus alles genereren met tekst en css. Er zal slechts 1 centrale afbeelding zijn: een foto van het juweel.

Stap 2:
Nadat ik redelijk tevreden ben over mijn preview layout, eerder een guideline waarop ik de coding baseer, maak ik basispagina die vooral bestaat uit div's, div's, id tags, en div's.

Stap 3:
Ik bekijk mijn basislayout in Vuurvos, en merk dat het vern**kt is. De div's staan over en door elkaar.

Conclusie:
Na even bijkomend opzoekwerk verricht te hebben over div's krijg ik het idee dat absolute positioning beter is voor div's dan relative.
Ik vrees echter dat de manier waarop ik het zou moeten coderen om de juiste layout te krijgen via relative positioning werkt.
Hebben jullie tips, guidelines, tutorials en voorbeelden om een div based layout te maken?

Dank bij voorbaat, Flipkikker
D

DarkBone

Legacy Member
Je moet (absolute) positionering zoveel mogelijk vermijden!
En ik betwijfel dan ook ten zeerste of je niet zonder zou kunnen..
A

Anendel

Legacy Member
Positionering inderdaad zoveel mogelijk vermijden. Ik kan me eerlijk gezegd maar 3 div tags herinneren in verschillende projecten waar ik het gebruikt heb. (maar dat is geen referentie hoor ;-) )
Voor de rest, probeer het aantal div's te beperken. Heeft me al veel miserie bespaard.
Soit, hoe ik het in't begin deed: een paar xhtml sites opzoeken waarvan de presentatie altijd goed zit, en die hun stylesheet volledig ontleden. (maw: overnemen waar mogelijk) ;-)
o

orez

Legacy Member
float's gebruiken
Veel div's absoluut niet nodig, tekst etc kan uitgelijnd en gepositioneerd worden met hun blokelementen zelf... margin is hierbij belangrijk..

Enkele IE bugs zijn hierbij ook belangrijk, maak je site in FIREFOX, en verbeter hem nadien door hacks toe te passen voor IE.

Zoals de Peekaboo bug (geef je container item line-height: 1.1 of 1.2);
Een bug waar de margins dubbel zo groot worden in bv IE is allemaal terug te vinden op het net... vooral http://www.positioniseverything.com is hierin een handige site;)

Maar, code je site voor FF dan pas aanpassen en finetunen naar IE
F

Flipkikker

Legacy Member
Ok, bedankt, dit bevestigde men wantrouwen dat absolute positionering zou gebruikt moeten worden.
Ik zal deze avond of morgen de preview pic en het concept hier eens plaatsen om uit te leggen wat ik wil bereiken en waarvoor ik denk dat ik zeker div's ga nodig hebben.

Nog meer links zijn welkom, ik heb bed- en wclectuur nodig ;) :D

Mvg Flipkikker
L

Lashknife

Legacy Member
Hangt imo van je design af en wat je wil realiseren of je met positioning of met floating divs gaat werken... Der zit weer zo'n "float float float float en nog eens float" hype dat men weer vergeet dat voor sommige dingen een andere oplossing sneller, efficienter en meer aangewezen is.

Meeste designs vallen echter terug op floating div layouts waar je een pak moet "hacken" om het overal tegoei te krijgen en je nog met de verschrikkelijke shit zit om je columns een variabele hoogte mee te geven (jaja, en alle tutorials plaatsen alles mooi in de linkerbovenhoek van hun column, nooit mee rechts onderaan ofzo, en liefst met een witte background - of ze zijn er al met hun hacks om het te laten doorlopen)...

soms valt het me op datter rond die floating divs bijna dezelfde zever rondgaat zoals met de "strict strict strict > all" gedachte.

btw, over dat "codeer voor FF en pas dan fixes toe voor IE", euh, codeer voor beiden tegelijk (eigenlijk nog voor 3 tegelijk en neem latest version opera er ook bij) en fix het tijdens het developen, veel moeilijker om achteraf op stappen terug te keren dan ze meteen op te merken en aan te passen.
F

Flipkikker

Legacy Member
Lashknife zei:
Hangt imo van je design af en wat je wil realiseren of je met 1.positioning of met floating divs gaat werken... Der zit weer zo'n "float float float float en nog eens float" hype dat men weer vergeet dat voor sommige dingen een andere oplossing sneller, efficienter en meer aangewezen is.

Meeste designs vallen echter terug op floating div layouts waar je een pak moet "2.hacken" om het overal tegoei te krijgen en je nog met de verschrikkelijke shit zit om je columns een variabele hoogte mee te geven (jaja, en alle tutorials plaatsen alles mooi in de linkerbovenhoek van hun column, nooit mee rechts onderaan ofzo, en liefst met een witte background - of ze zijn er al met hun hacks om het te laten doorlopen)...

soms valt het me op datter rond die floating divs bijna dezelfde zever rondgaat zoals met de "3.strict strict strict > all" gedachte.

btw, over dat "codeer voor FF en pas dan fixes toe voor IE", euh, codeer voor beiden tegelijk (4.eigenlijk nog voor 3 tegelijk en neem latest version opera er ook bij) en fix het tijdens het developen, veel moeilijker om achteraf op stappen terug te keren dan ze meteen op te merken en aan te passen.
Klik om te vergroten...

Mijn voorlopig en zeer sober uitgewerkt ontwerp: http://home.tiscali.be/pudefamily/04072005PuutJuwelen.jpg
binnenkort volgen aanpassingen met meer kleurvlakken en een betere verbondenheid van navigatie en inwerking van rollovers etc

1.positioning of met floating divs
Ik denk in dit geval floating divs nodig te hebben, mss ook positioning voor bepaalde onderdelen (maar ik hoop van niet)

2.hacken
Hacks wil ik vermijden, ik heb ze nog nooit gebruikt, maar ik weet wel ongeveer wat ze zijn en doen. Het lijkt me belachelijk stricte xhtml te programmeren en dan hacks te gebruiken (hacks zijn voor mij niet strict en ws ook echt niet), het gaat mij om de "uitdaging" xhtml te gebruiken.

3.strict strict strict > all
zie punt 2 over uitdaging...

4.eigenlijk nog voor 3 tegelijk
Momenteel test ik enkel op FireFox (dit is altijd mijn eerste controle) en pas achteraf in Internet Explorer, maar Opera zal blijkbaar ook nodig zijn :)

Grtz Flipkikker, en ik hoop dat jullie wat aan mijn preview pic hebben om me nog een stap verder te helpen
R

Rombo

Legacy Member
Ik denk dat ge de meeste info ivm layouts,.. kunt vinden op die 3 sites die ik in het begin gegeven heb, daar staat echt enorm veel op

deze pagina bv: http://www.maxdesign.com.au/presentation/page_layouts/index.cfm

en ik ben van mening dat tables ook hun nut hebben, vele mensen proberen alles met divs te maken terwijl ze dikwijls heel veel tijd en moeite kunnen besparen door een simpele table te gebruiken
F

Flipkikker

Legacy Member
Rombo zei:
Ik denk dat ge de meeste info ivm layouts,.. kunt vinden op die 3 sites die ik in het begin gegeven heb, daar staat echt enorm veel op

deze pagina bv: http://www.maxdesign.com.au/presentation/page_layouts/index.cfm

en ik ben van mening dat tables ook hun nut hebben, vele mensen proberen alles met divs te maken terwijl ze dikwijls heel veel tijd en moeite kunnen besparen door een simpele table te gebruiken
Klik om te vergroten...

idd, op die sites heb ik al een deel gelezen ;)
maar tables zijn voor mijn layout totaal overbodig
o

orez

Legacy Member
2.hacken
Hacks wil ik vermijden, ik heb ze nog nooit gebruikt, maar ik weet wel ongeveer wat ze zijn en doen. Het lijkt me belachelijk stricte xhtml te programmeren en dan hacks te gebruiken (hacks zijn voor mij niet strict en ws ook echt niet), het gaat mij om de "uitdaging" xhtml te gebruiken.

not true.. hacks zijn wel strict... moet maar es een CSS file valideren met hacks in, validator maakt er helemaal geen probleem van... en wil je xhtml nu eenmaal gebruiken dan MOET je zo goed als hacks gebruiken, want IE gaat er niet zo denderend mee om ..
Z

Zero Grav

Legacy Member
Ugh, onzin. Ik gebruik nooit hacks & 'k ken genoeg mensen die ze ook niet nodig hebben. 't Is niet omdat het op die bepaalde manier niet werkt dat er geen andere manieren zijn om iets op te lossen.
F

Flipkikker

Legacy Member
nuja, ik ben es aant zien naar men laatste layout (die je op sitecheck forum ziet) en ik denk dat tables in dat geval makkelijkste oplossing zullen zijn, tenzij mijn div's op de juiste plaats zouden verschijnen wanneer ik relative positioning gebruik en percentages opgeef om een min of meer liquid layout te creëeren,
eerst es die links goed bestuderen, poging met div's ondernemen, en anders kan ik in 3 secs een site met tables maken
L

Lashknife

Legacy Member
Zero Grav zei:
Ugh, onzin. Ik gebruik nooit hacks & 'k ken genoeg mensen die ze ook niet nodig hebben. 't Is niet omdat het op die bepaalde manier niet werkt dat er geen andere manieren zijn om iets op te lossen.
Klik om te vergroten...
idd, zie maar naar mijn probleem :D

toch maar besloten om een footer eronder te maken en daar wat elementjes tov te positioneren zodat die altijd bij de footer blijven hangen :)

nu heb ik maar 1 cheatje en da's de min-height float left width 0 height: X solution :D
n

n00bslayer

Legacy Member
Deze site zou probleemloos met divs moeten werken, een paar floats, overflow: auto's en clea: both's zouden het moeten doen. btw als je 2 elementen naast elkaar wil positioneren, ben je best dat je 1 float voor bvb de linkse 'kolom' gebruikt, en een margin voor de rechtse.
d

dJeez

Legacy Member
citaat verwijderd.
Err, dat werkt anders perfect hoor ru`orez, een float links en werken met marges. Misschien kan je je best zelf eens meer verdiepen in CSS alvorens zo uit te vallen? Volgende site kan daarbij erg nuttig zijn : http://css.maxdesign.com.au/floatutorial/

*edit* te laat, en 'k laat hem nu toch staan gezien de nuttige link :p
s

servi

Legacy Member
moderator noot : De post van ru`orez is verwijderd omdat deze denigrerend was en heeft hiervoor een waarschuwing gekregen. De citering uit djeez zijn post is ook verwijderd om een flame-war te vermijden.


Volgende site kan daarbij erg nuttig zijn : http://css.maxdesign.com.au/floatutorial/
Van die site heb ik voornamelijk leren werken met divs :niceone:. Alhoewel dat het voorbeeld me toch wat slechtgekozen lijkt, hetgeen ze daar maken bij bijvoorbeeld Liquid three column layout, kan je veel eenvoudiger verwezenlijk met 1 tabel.

Het voordeel is hierbij dan dat je site door veel meer browsers correct geïnterpreteerd wordt, Het nadeel is dan natuurlijk wel weer dat je code minder overzichtelijk is. (Met divs heb je een heel goed overzicht )


Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan