Div meerekken
Hoi,
ik zit met een probleem. Ik heb een content en een sidebar, nu wil ik dat deze beiden op dezelfde hoogte eindigen zodat mijn footer niet weg zweeft. Hoe zorg ik ervoor dat als mijn content langer is de sidebar meerekt en als de sidebar groter is de content meerekt?
ik zit met een probleem. Ik heb een content en een sidebar, nu wil ik dat deze beiden op dezelfde hoogte eindigen zodat mijn footer niet weg zweeft. Hoe zorg ik ervoor dat als mijn content langer is de sidebar meerekt en als de sidebar groter is de content meerekt?
Gewijzigd op 31/08/2011 14:57:51 door Jasper DS
Dit doe je met Faux Columns. Voorbeeldje: http://waldio.110mb.com/css/fauxcolumn.html
als je daar klikt op remove tekst komt er onder de grijze kader blauwe kader, dit zou ook gewoon grijs moeten zijn.
Toevoeging op 31/08/2011 13:43:05:
Als ik dit dus wil oplossen moet ik met een afbeelding werken?Klik
Toevoeging op 31/08/2011 13:43:05:
Als ik dit dus wil oplossen moet ik met een afbeelding werken?Klik
Nee, faux columns met afbeeldingen is niet netjes. Je zou in dit geval javascript moeten gebruiken (even zoeken op javascript equal columns) of je gaat met CSS3 gradients werken.
opmerking : ik probeerde op u voorbeeld te klikken op "JasperDS Webdevelopment" en toen werd ik naar "http://redcreations.silyon-websites.nl/test/www.jasperdesmet.be" gebracht
-( ik weet niet of dat zo hoort )-
-( ik weet niet of dat zo hoort )-
Gewijzigd op 31/08/2011 14:31:07 door php knipper
dat komt omdat ik de http:// was vergeten. Ik ben nog aan het testen..
Jasper, zoiets denk ik (uit m'n hoofd):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="CONTAINER">
<div id="CONTENT">
content bla bla
</div>
<div id="SIDEBAR">
sidebar bla bla
</div>
</div>
<div id="FOOTER">
footer blabla
</div>
#CONTENT, #SIDEBAR {
float:left;
overflow:auto;
}
#CONTENT {
background-color:red;
width:600px;
}
#SIDEBAR {
background-color:blue;
width:200px;
}
#FOOTER {
background-color:green;
width:800px;
}
<div id="CONTENT">
content bla bla
</div>
<div id="SIDEBAR">
sidebar bla bla
</div>
</div>
<div id="FOOTER">
footer blabla
</div>
#CONTENT, #SIDEBAR {
float:left;
overflow:auto;
}
#CONTENT {
background-color:red;
width:600px;
}
#SIDEBAR {
background-color:blue;
width:200px;
}
#FOOTER {
background-color:green;
width:800px;
}
@ozzie, hier zit nog het één en ander fout.. Maar misschien kan inderdaad iets proberen met de overflow.
Dit is ongeveer wel de oplossing... alleen ik kan momenteel even niet testen.
Als je dit toevoegt aan de css?
Als je dit toevoegt aan de css?
@Ozzie: dan komt er een scrollbar als het langer is dan 800px
Toevoeging op 31/08/2011 15:25:06:
@Ozzie: dan komt er een scrollbar als het langer is dan 800px
Toevoeging op 31/08/2011 15:25:23:
@Ozzie: dan komt er een scrollbar als het langer is dan 800px
[/quote]
Toevoeging op 31/08/2011 15:25:06:
@Ozzie: dan komt er een scrollbar als het langer is dan 800px
Toevoeging op 31/08/2011 15:25:23:
@Ozzie: dan komt er een scrollbar als het langer is dan 800px
[/quote]
Nee hoor, want er is geen height ingesteld. (Jij bent in de war met de width.)
@ozzie, dat werkt volgens mij allebei niet. (Waarom heb je eigenlijk hoofdletters voor de id namen?)
@jasper, waar is dat linkje gebleven? (is handig om het een en ander te testen voordat ik het hier plaats)
@jasper, waar is dat linkje gebleven? (is handig om het een en ander te testen voordat ik het hier plaats)
Is vrij gebruikelijk om id's hoofdletters te geven en classes kleine letters. Op die manier kun je snel zien wat wat is.
@wouter, gooi heb dadelijk weer online. ;)
KLIK. Ik wil dit toch proberen op te lossen met css en zonder afbeelding. Is dit mogelijk denken jullie?
KLIK. Ik wil dit toch proberen op te lossen met css en zonder afbeelding. Is dit mogelijk denken jullie?
Gewijzigd op 31/08/2011 16:50:43 door Jasper DS
Wat is nou precies het probleem?
Je ziet de 2 bredere blokjes content en links zijn de 2 smallere blokjes sidebar ik wil dat de sidebar en de content ALTIJD de zelfde hoogte hebben. Dus stel nu er komt meer content dan moet de sidebar meerekken naar beneden, indien er meer sidebar komt moet de content meerekken. Anders oogt het niet mooi met mijn footer. Of heb jij een ander plan om mijn footer in het geheel te laten passen?
@Maarten Buijs, kan u uw post aanpassen? Onnodig scrollen nu. Alvast bedankt.
@Maarten Buijs, kan u uw post aanpassen? Onnodig scrollen nu. Alvast bedankt.
Gewijzigd op 31/08/2011 17:00:53 door Jasper DS
Maar omdat je losse blokjes gebruikt kan dat denk ik niet wat jij wil. Dan zou ik er zoiets van maken:
http://oi54.tinypic.com/jzxtv.jpg
http://oi54.tinypic.com/jzxtv.jpg
Het kan ook zo, wel met afbeeldingen;
http://www.sceneone.nl/tips_tricks/schaalbare_kolommen.php
http://www.sceneone.nl/tips_tricks/schaalbare_kolommen.php
Dat komt dus neer op hoe ik het getekend heb. Afbeeldingen heb je niet per se nodig.
Gewijzigd op 31/08/2011 18:03:42 door Ozzie PHP
Oh jammer.. :s Maar kan ik niet height op maximum zetten ofzo dat het laatste blokje doorloopt tot waar de wrapper stopt (dus tot waar de sidebar stopt)
Nee, dat gaat niet werken omdat je content variabel is. Miscchien kun je iets met javascript doen ofzo, maar of dat nu de oplossing is....




