Div hoogte..

Status
Niet open voor verdere reacties.
S

Sander1001

Gebruiker
Lid geworden
19 aug 2004
Berichten
235
Hallo. Ik heb ben met een pagina bezig, in divs, maar als ik nu in de rechter kolom een hoop tekst zet, en in de linker kolom niets, dan wordt heel de layout uitgerekt, ik wil dan dat de linker kolom ook hoger wordt.. Hier is een voorbeeld met wat ik bedoel

http://www.sandh.nl/rrgrenrnnr/test1.php :rolleyes:

edit: Ik zie dat het in Firefox er zelfs doorheen gaat.. is dat ook nog op te lossen? Ik snap er nu even geen ene zak meer van.. :(
 
ik had zelf ook het probleem dat een IE browser de boel helemaal verneu*te en een Firefox het perfect liet zien.

Heb daar ook het antwoord op gevonden:

Zorg dat je je <table> een grootte meegeeft, dus of in percentages of in pixels als het goed is ben je dan van je browser probleem wat betreft lay-out af.
 
Hoogte op 100% wil wel eens helpen.
Echter wat in de ene div zit kan niet van toepassing zijn op eeen andere.
En de waarde 100% wordt niet door alle browsers hetzelfde weergegeven.
Een div is gelijk een p tag een blokelement.

How_to:
http://www.google.com/search?q=+how...ple+row+three+liquid+column&btnG=Zoeken&hl=nl
en
http://www.google.com/search?q=css+clear+boxes+example+row+three+liquid+column&btnG=Zoeken&hl=nl

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#main {
background-color:#ffc0c0;}
#top {
width: 781px;
text-align: left;
background-color:#c0c0c0;

}
#logo {
width: 781px;
height: 100px;
}
#menu {
width: 781px;
height:14px;
}
#leftcol {
width: 160px;
float: left;
background-color:#C6C4C5;
border-left: 1px solid #000000;
border-right:1px solid #000000;
height: 50px;
}
#leftcol[id] {
height:100%;
min-height: 250px;
background-color:#c0ffc0;
}
#leftcolbottom {
vertical-align: bottom;
height: 10%;
background-color:#c0c0ff;
}
#leftcoltop {
vertical-align: top;
height:50px;
background-color:#f0c0cf;
}

#maincol {
border-right: 1px solid #000000;
width: 618px;
float: right;
height: 100%;
background-color:#cff0c0;

}
#content {
width: 781px;
text-align: left;
clear: both;
background-color:#c0cff0;
}
#menubottom {
background-color:#cfc0f0;
height: 13px;

}
#footer {
background-image:url("layout_09.jpg");
width: 781px;
height: 23px;
clear: both;
background-color:#cfc0f0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div align="center">
<div id="main">
<div id="top">
<div id="logo">logo</div>

<div id="menu">Menu here<br>
Menu here</div>
<div id="menubottom">menu bottom<br>
menu bottom</div>
</div>
<div id="content">
<div id="leftcol">leftcol
<div id="leftcoltop">leftcoltop<br>
</div>
<div id="leftcolbottom">leftcolbottom<br>
leftcolbottom</div>

</div>
<div id="maincol">
maincol<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />

AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />

AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />

AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />
AHAHAH<br />


</div>
</div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>

en haal nu
"http://www.w3.org/TR/html4/loose.dtd"
weg en zie wat er gebeurt.

teachers link:
boxes
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html


:cool:
 
Heel erg bedankt :p maar, als ik nu kijk.. is die linker kolom nog steeds niet lang genoeg. :8-0:

edit: de gradient staat er nu ook bij :)'

zucht.. en ik zie dat het er in FF weer niet uitziet.. :mad: :( daar zit die gradient te hoog..
 
Laatst bewerkt:
Nee, en dit zal ook niet meevallen.

Je zult de main een eigen achtergrond moeten geven, die dus zowel het menu als de content omvat. (is nu wit)
Als je die kleur in de kleur grijs houdt als in left kom je toch in de richting.

En natuurlijk niet vergeten om padding toe te passen ivm de leesbaarheid, anders zit je tekst tegen de zijkanten van de div.

:cool:
 
dus kan ik hieruit concluderen, dat ik net zo goed ermee kan stoppen? :eek: want op phpfreakz kreeg ik ook al zo'n soort antwoord.. en dat snap ik niet zo.. dus..:(
 
Geplaatst door Sander1001
dus kan ik hieruit concluderen, dat ik net zo goed ermee kan stoppen? :eek: want op phpfreakz kreeg ik ook al zo'n soort antwoord.. en dat snap ik niet zo.. dus..:(
Klik om te vergroten...

Yep, ik heb het over een grijze achtergrond, op phpfreakz is er sprake van een verlopend achtergrondplaatje.

Dus op een van de twee manieren zul je het op moeten lossen.

Het is altijd vogelen met css toch zeker als jer in IE en FF er hetzelfde uit moet zien.

Heb je al bij de gegeven linken gekeken?

:cool:
 
Geplaatst door peter vazed


Heb je al bij de gegeven linken gekeken?

:cool:
Klik om te vergroten...

ja, ik heb er even doorgheen gebladerd, maar als ik toch met background plaatjes moet gaan werken, denk ik dat ik er maar beter mee kan stoppen. Want ik snap het niet helemaal, en het lijkt me te ingewikkeld..:(
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan