[CSS / xhtml] Vakken willen niet naast elkaar

[Blacksnak]

Ben nu al een tijdje bezig met ontwerp van nieuwe site. Om ook eens wat bij te leren heb ik besloten om volledig van tabellen af te stappen en met CSS te gaan knoeien. Na een hoopje boeken en tutorials gelezen te hebben ben ik tot onderstaande resultaat gekomen.

http://karretrekkers.studentenweb.org/v2006/index.htm

user: got
pass: test

Ik krijg echter de 2 vakken in het midden niet naast elkaar gezet. Ik dacht begrepen te hebben dat dit moet lukken met float:left; , dit verknoeit echter gewoon m'n achtergrond en laat die vakken gewoon onder elkaar staan.

Kan iemand me vertellen wat ik verkeerd doe? Begin het stilaan grondig beu te worden en verlang stilletjes weer naar m'n tabellen...

[vogeltje]

je gebruikt twee keer id="kader"?

Een object met het id="kader" mag natuurlijk maar 1 keer in je html voorkomen.
En met een float: left; op die kaders, moeten ze toch naast elkaar komen te te staan.

[Scott]

vogeltje schreef op zondag 29 oktober 2006 @ 17:24:
je gebruikt twee keer id="kader"?

Een object met het id="kader" mag natuurlijk maar 1 keer in je html voorkomen.
En met een float: left; op die kaders, moeten ze toch naast elkaar komen te te staan.

Dat is niet helemaal waar, want dat gebeurt niet. Je hebt natuurlijk wel gelijk dat je geen twee objecten dezelfde ID mee mag geven, daar zijn classes voor bedoeld

@ TS: ik zie in je bron dat je een div hebt staan tussen die twee kaders. Die krijgt als style clear: both mee. Dit zorgt dat er niks op dezelfde lijn mag staan als die twee kaders. Als je die div weghaalt, komen ze wel naast elkaar te staan (getest mbv Fx's CSS editor)

[ Voor 9% gewijzigd door Scott op 29-10-2006 17:33 ]

[Blacksnak]

vogeltje schreef op zondag 29 oktober 2006 @ 17:24:
je gebruikt twee keer id="kader"?

Een object met het id="kader" mag natuurlijk maar 1 keer in je html voorkomen.

Owla, inderdaad. Dat is nog een foutje dat erin staan door het testwerk. Was eerst class="kader", en dat mag wel zonder problemen dacht ik.

Heb dat even terug aangepast.

ScottB schreef op zondag 29 oktober 2006 @ 17:27:
[...]

@ TS: ik zie in je bron dat je een div hebt staan tussen die twee kaders. Die krijgt als style clear: both mee. Dit zorgt dat er niks op dezelfde lijn mag staan als die twee kaders. Als je die div weghaalt, komen ze wel naast elkaar te staan (getest mbv Fx's CSS editor)

Heb die div weggehaald maar ze blijven eigenwijst onder elkaar staan.
Deze div stond trouwens in eerste instantie ook niet in m'n code, maar heb ik wanhopig toegevoegd na het doorlezen van enkele artikels op gegooglede sites.

[Scott]

Blacksnak schreef op zondag 29 oktober 2006 @ 17:36:
[...]


Owla, inderdaad. Dat is nog een foutje dat erin staan door het testwerk. Was eerst class="kader", en dat mag wel zonder problemen dacht ik.

Heb dat even terug aangepast.


[...]


Heb die div weggehaald maar ze blijven eigenwijst onder elkaar staan.
Deze div stond trouwens in eerste instantie ook niet in m'n code, maar heb ik wanhopig toegevoegd na het doorlezen van enkele artikels op gegooglede sites.

Je moet de rechter div (die er nu nog onder staat ) wel float: left meegeven

[Blacksnak]

ScottB schreef op zondag 29 oktober 2006 @ 17:54:
[...]
Je moet de rechter div (die er nu nog onder staat ) wel float: left meegeven

Dan krijg ik dus dit:

Voorbeeld

En dat is dus eigenlijk het probleem waar ik mee zit. Ik had na tal van boeken begrepen dat het op die manier moest werken... Ik moet ergens toch nog een fout maken, weet alleen niet wat/waar/hoe/waarom

[Scott]

Blacksnak schreef op zondag 29 oktober 2006 @ 18:13:
[...]


Dan krijg ik dus dit:

Voorbeeld

En dat is dus eigenlijk het probleem waar ik mee zit. Ik had na tal van boeken begrepen dat het op die manier moest werken... Ik moet ergens toch nog een fout maken, weet alleen niet wat/waar/hoe/waarom

Mwoah, dat valt wel mee, er zit geen fout in hoor. Je moet er echter nog iets aan toevoegen waar ik niet aan gedacht had (omdat ik de spacer-div alleen op display: none had gezet en niet weggehaald). Zet dit anywhere in je CSS:

Cascading Stylesheet:

#center:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Mocht dit nog niet werken, probeer dan eens een div te maken waarin je die kaders zet, en dan bovenstaande code toe te passen op die div (door #center te vervangen in het ID van die container).

[Blacksnak]

ScottB schreef op zondag 29 oktober 2006 @ 18:22:
[...]

Zet dit anywhere in je CSS:

Cascading Stylesheet:

#center:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Die doet het inderdaad

Kun je me ook even uitleggen wat er misliep en wat dit juist doet om het recht te zetten? Het is de bedoeling dat ik er ook even van leer

Bestaat er trouwens ook een manier om dit op te lossen in IE ? Want die ":after" doet het daar natuurlijk niet.

[Scott]

Ik heb eigenlijk geen idee waarom dit op deze manier opgelost moet worden. Ik weet dat het te maken heeft met het feit dat de container div niet lang genoeg is en op deze manier wordt er aan het einde (dus ná die twee divs) nog iets toegevoegd dat niet te zien is, waardoor de container dus net zo lang wordt als die kaders. Hoe het komt dat hij niet lang genoeg is: geen idee Wellicht kan iemand dit toelichten, ben er zelf ook wel benieuwd naar

[Blacksnak]

ScottB schreef op zondag 29 oktober 2006 @ 19:46:
Ik weet dat het te maken heeft met het feit dat de container div niet lang genoeg is en op deze manier wordt er aan het einde (dus ná die twee divs) nog iets toegevoegd dat niet te zien is, waardoor de container dus net zo lang wordt als die kaders. )

Thx, met deze uitleg heb ik het in IE ook kunnen oplossen door simpelweg

Cascading Stylesheet:

height: 100%;

toe te voegen aan "#center{ }" !

[ Voor 55% gewijzigd door Blacksnak op 30-10-2006 21:00 . Reden: links ipv plaatjes ]

[Blacksnak]

Weet niet of het op zijn plaats is om deze vraag nog toe te voegen in deze topic, maar ik ga ervoor

Heb nog een foutje in het menu zitten.
Er wordt in IE, ten opzichte van FF, namelijk een stukje van het kader niet opgevuld, zoals je kan zien op onderstaande screenshots.

FF:
http://karretrekkers.studentenweb.org/v2006/ok.gif

IE:
http://karretrekkers.studentenweb.org/v2006/nok.gif

Is dat op te lossen?

[Blacksnak]

Kga nog even m'n eigen topic kapen:

Heb een bijkomend vraagje over de positionering van m'n tekstvakken.

Zoals je kan zien op onderstaande url schiet het 2de 'large'-kader naar links zodra het kader 'small' aan de linkerzijde stopt. Is er een manier waarop ik die large gewoon onder de vorige kan houden of zit ik dan structureel fout te bouwen?

http://karretrekkers.studentenweb.org/v2006/index.htm

user: got
pass: test

[marko77]

de small div moet dan eigenlijk qua hoogte even hoog, of hoger zijn dan de andere divs, zodat de 2e large div daarnaast komt te staan.

Een andere optie is om onder de small div een 2e small div te zetten die niet zichtbaar is (let op, dat is niet hetzelfde als display:none), gewoon dezelfde achtergrondkleur ofzo.

De 1e optie kun je bereiken door de small div een 100% hoogte te geven, echter dan zul je de center div (de container) een relative position moeten geven én een hoogte (niet 100%). Dit om het goed te laten werken in IE.

Aangezien je de center div een 100% hoogte hebt gegeven (waarom ontgaat mij echter) is optie 2 de meeste makkelijke denk ik.

ScottB schreef op zondag 29 oktober 2006 @ 19:46:
Ik heb eigenlijk geen idee waarom dit op deze manier opgelost moet worden. Ik weet dat het te maken heeft met het feit dat de container div niet lang genoeg is en op deze manier wordt er aan het einde (dus ná die twee divs) nog iets toegevoegd dat niet te zien is, waardoor de container dus net zo lang wordt als die kaders. Hoe het komt dat hij niet lang genoeg is: geen idee Wellicht kan iemand dit toelichten, ben er zelf ook wel benieuwd naar

Volgens mij komt de 2e div onder de 1e omdat de breedte van de container niet genoeg is, deze moeten exact kloppen (of iig dienen de floet elementen niet meer breedte te hebben dan de container) anders zal de laatste div op de volgende regel komen.

Of bedoel je dit niet?

[Blacksnak]

Dus de small-kolom automatisch laten doorlopen tot aan footer is niet mogelijk? Of begrijp ik je nu verkeerd?

Want dat lijkt me wel de mooiste oplossing. Heb trouwens al zitten spelen met die height=100% maar dat wil die niet doen.

Best verwarrend allemaal Hoemeer ik erover lees, hoe onduidelijker het hele verhaaltje wordt voor mij

[marko77]

de small kolom door laten lopen kán wel, maar niet zoals jij het nu hebt opgezet (dat dank je aan IE ).

Nu ik er weer over nadenk is de 2e 'small' kolom ook nog wel lastig om goed te doen, aangezien die evt. wél mee zou moeten stretchen met de large kolom.

Optie 1 dus proberen uit te werken is denk ik de béste oplossing in dit geval.

[Blacksnak]

marko77 schreef op zondag 19 november 2006 @ 18:53:
de small kolom door laten lopen kán wel, maar niet zoals jij het nu hebt opgezet

Om het wel werkende te krijgen, kan ik dus best heel de boel omgooien? Doel je dan op serieuze verbouwingen of is het relatief makkelijk te doen?

Uit jouw uitleg begrijp ik dan: dat ik heel die center relatief moet plaatsen tov de rest en daarin die small op 100% height. De andere kaders komen dan vanzelf goed met de flow?

btw: die height op 100% in center is nodig om in IE de boel ok te houden. Lost probleem op wat in FF door deze toevoeging wordt gedaan (zie hoger in deze topic)

Cascading Stylesheet:

#center:after {  /* hack om flow van kaders goed te laten verlopen */
    content: '.'; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

Allemaal niet gemakkelijk Maar wil het best wel leren om site met CSS op te bouwen ipv met tabellen (daar was ik al lang klaar mee geweest )


** EDIT **

Heb het probleem van inspringen kunnen oplossen door een extra div-je toe te voegen die heel de rechterzooi uitlijnt tegen de rechterkant van de center. Proper is het niet, maar werkt wel. (iemand tip om dit wel op een fatsoenlijke manier te doen?)

Wel blijft het probleem van niet doorlopen van 'small'-kader.

[ Voor 13% gewijzigd door Blacksnak op 19-11-2006 20:21 ]

[marko77]

als je wilt dat het small kader dezelde hoogte krijgt als de large divs dan zul je 100% height moeten pakken, dit kan alleen als de container div relative is gedefinieerd.

In de praktijk heb ik ook gemerkt dat het layouten van sites o.b.v div's lastiger is als je rekening moet houden met IE. Hopelijk wordt dit met IE7 makkelijker, maar dat volt nog te bezien vrees ik.

[Boelie-Boelie]

Kun je die lange, verticale div ('small' volgens mij) niet naar links floaten en de rest naar rechts.. Dan zal die lange, horizontale div ook nooit onder 'small' komen.
Verder kun je die small laten doorlopen door een vaste hoogte te geven. Of misschien met een faux columns-oplossing, waarbij daarnaast de bovenkant van de footer de onderste rondingen van small (en die lange horizontale balk) meekrijgt? (Weet niet of dat zo kan, is maar een idee.)

Overigens zijn in IE7 zijn veel CSS-bugs gefixt.. Nog niet perfect, maar twijfelen aan of het beter is dan IE6, lijkt me wat overdreven.