css kolommen gelijk laten lopen
Ik ben bezig met een blogje voor mezelf (http://reinhout.onlinetutorials.be/)
Alles werkte, tot ik eens wat meer tekst in mijn layout ging stoppen...
als je naar de pagina about gaat zie je dat de linker kollom een wit gedeelte heeft, of dat het achtergrondprentje de extra lengte niet opvult. Mijn vraag is: hoe krijg ik dat zodat alles even hoog komt en er geen witte gaten zijn?
Ik heb me er al rot op gezocht, maar ik ben geen echte css-held -_-'
De css is hier te vinden.
Groetjes,
Reinhout
Gewijzigd op 01/01/1970 01:00:00 door Reinhout
Gesponsorde koppelingen:
wat je zou kunnen doen (als je zeker weet dat rechts altijd het langs is)
de rechter <DIV> in de linker zetten..
dus de linker dan een width geven van de hele site en dan die rechter div daar in zetten en een float geven "float: right"
dat zou moeten werken.. of je zou met tabellen moeten gaan werken maar dat zou ik persoonlijk niet doen
*voorbeeld
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
css:
.leftbox {
background: url(borderleft.jpg) left repeat-y;
width: 800px;
}
.rightbox {
background: url(borderright.jpg) right repeat-y;
width: 700px;
float: right;
}
<div class='leftbox'>
le linkse tekst komt dan gewoon hier
en daar kun je van alles inflikkeren
<div class='rightbox'>
en dan hier gewoon all je rechtse content
</div>
<div>
.leftbox {
background: url(borderleft.jpg) left repeat-y;
width: 800px;
}
.rightbox {
background: url(borderright.jpg) right repeat-y;
width: 700px;
float: right;
}
<div class='leftbox'>
le linkse tekst komt dan gewoon hier
en daar kun je van alles inflikkeren
<div class='rightbox'>
en dan hier gewoon all je rechtse content
</div>
<div>
Gewijzigd op 01/01/1970 01:00:00 door DirkJan Heinen
Code (php)
1
2
3
2
3
.links_midden {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 500px; FLOAT: left; BACKGROUND-IMAGE: url(../pictures/links_midden.png); WIDTH: 284px; BACKGROUND-REPEAT: repeat-x; HEIGHT: auto
}
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 500px; FLOAT: left; BACKGROUND-IMAGE: url(../pictures/links_midden.png); WIDTH: 284px; BACKGROUND-REPEAT: repeat-x; HEIGHT: auto
}
in het volgende:
Code (php)
1
2
3
2
3
.links_midden {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 500px; FLOAT: left; BACKGROUND-IMAGE: url(../pictures/links_midden.png); WIDTH: 284px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 100%;
}
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MIN-HEIGHT: 500px; FLOAT: left; BACKGROUND-IMAGE: url(../pictures/links_midden.png); WIDTH: 284px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 100%;
}
Volgens mij moet dat wel werken.
<div id="container">
<div id="links"></div>
<div id="rechts"></div>
</div>
Links en rechts zijn dan de kolommen die samen in een div zitten die ik nu even container heb genoemd.
Je maakt dus een achtergrondafbeelding voor de container div.
@Ronald: Werkt spijtig genoeg niet, toch bedankt ;)
@Niek: Zou kunnen werken...dan zijn de 2 kollommen ook altijd even hoog.
Ik werk aan de oplossing van Niek, maar als er mensen zijn die toch nog een oplossing vinden, mogen jullie het altijd laten weten...ik kan er maar uit leren.
Groetjes
http://reinhout.onlinetutorials.be/about
knoeier die ik ben -_-
Kwastie schreef op 23.12.2007 23:05:
ik weet niet wat je hebt gedaan met de home about zever en foto's plaatje, maar de kwaliteit is zeer slecht
Het is een zwart ding met witte letters...kversta niet wat je daaraan kan zien hoor... Wat is er zo slecht aan?
Niek schreef op 24.12.2007 00:13:
Ik zou een afbeelding maken voor de achtergrond en de tekst gewoon met html toevoegen. Dan wordt het beter.
ok, probeer ik straks, bedankt :)
klinkt toch doenbaar...
Dit is het resultaat Niek, Jan...wat deed ik fout?
Probleem lijkt me nog groter :(
Groetjes
Bumpen::
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de 
knop om je tekst aan te passen.
knop om je tekst aan te passen.SanThe.
SanThe schreef op 24.12.2007 20:00:
Niet Bumpen.
SanThe.
Bumpen::
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de knop om je tekst aan te passen.
knop om je tekst aan te passen.SanThe.
sry, had er even niet op gelet....:$
reinhout schreef op 24.12.2007 19:35:
http://reinhout.onlinetutorials.be/about
Dit is het resultaat Niek, Jan...wat deed ik fout?
Probleem lijkt me nog groter :(
Groetjes
Dit is het resultaat Niek, Jan...wat deed ik fout?
Probleem lijkt me nog groter :(
Groetjes
Hoi reinhout.
Je gebruikt ongelofelijk veel divs in je lay-out, waardoor je het nodeloos ingewikkeld maakt. Het zou veel simpeler kunnen.
Jan Koehoorn schreef op 24.12.2007 21:39:
Hoi reinhout.
Je gebruikt ongelofelijk veel divs in je lay-out, waardoor je het nodeloos ingewikkeld maakt. Het zou veel simpeler kunnen.
Je gebruikt ongelofelijk veel divs in je lay-out, waardoor je het nodeloos ingewikkeld maakt. Het zou veel simpeler kunnen.
Ja, sry, ik ben er niet zo goed in...
Kan je het me in theorie uitleggen hoe het beter zou kunnen?
Ik heb de slechte gewoonte voor ieder prentje, of onderdeeltje (volgens mij) een div te maken. Het is misschien wel tijd om daarvan af te stappen he ;)
Edit:
Ik wacht even op antwoord voordat ik aan de gang ga.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Jan Koehoorn schreef op 26.12.2007 20:48:
Vooruit, omdat het kerst is. Ik zal een opzet voor je maken. Moet je wel een half uur online blijven nog, anders is het zulk ondankbaar werk.
Thanks :)
Je hoeft niet heel de css te maken he, een aanzetje is genoeg ;)
Nogmaals bedankt :)
Edit:
Ik heb een beginnetje gemaakt, met alvast een geraamte voor je div-indeling. Probeer er zelf eens verder mee te gaan ;-)
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Ik ga er wat mee spelen tot ik zo weinig mogelijk div's gebruikt heb...;)
edit:
Wat is reset.css? waarvoor dient het bedoel ik?
Gewijzigd op 01/01/1970 01:00:00 door reinhout
