auto height in css

Ik heb een gekleurde achtergrond, waarop ik centraal een witte kader wil maken waarin dan de eigenlijke content komt, nu wordt deze witte kader met height: auto; mooi langer als ik tekst zet rechtstreeks in binnen de div met de auto height eigenschap maar niet door tekst in een genestte div (div binnen div). Ook lijkte en img de witte kader helemaal niet langer te maken...

alvast bedankt

Helpt u de wereld al redden?

Godfather

3.711

auto height in css

26 april 2007 - 00:34 reactie #1

geplaatst door: Godfather

Zorg er voor dat alles relative is en dus niet absolute. Probeer dan eens in je CSS van je nested div "Clear:Right;" toe te voegen.

Het hangt overigens wel een beetje van je code af want:

Code: [Selecteer]

<html>
<head>
<title>test</title>
<style type="text/css">
<!--
.parent { 
background-color: #003366; 
height:auto; 
} 
.child { 
background-color: #CCCCCC; 
margin-left: 20px;
width:200px;}
-->
</style>
</head>

<body> <div class="parent"> <div class="child"> <p>test</p> <p>test2</p> <p>test3</p> </div> </div> </body> </html>

doet het gewoon bij mij. Mocht dit allemaal niets uithalen laat de code hier dan even zien zodat we het zelf zien wat er fout gaat om met een oplossing te komen

(Bewerkt door Godfather om 0:42, 26-04-2007)

(Bewerkt door Godfather om 0:47, 26-04-2007)

(Bewerkt door Godfather om 0:49, 26-04-2007)

Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro

Emerik

topic starter

2.256

auto height in css

26 april 2007 - 14:42 reactie #2

geplaatst door: Emerik

Code: [Selecteer]

<body><div class="algemeenkader">

<div class="menucontainer"> <div class="kanactieflogo"><img src="images/logokanactiefplus.jpg" alt="KanActief Plus Logo"/></div> <div class="navigatie"> <a class="overons" href="../overons.php">Over ons</a> <a class="doelstellingen" href="../doelstellingen.php">Doelstellingen</a> <a class="getuigenissen" href="../getuigenissen.php">Getuigenissen</a> </div> </div> </div> </body>

en de css file

Code: [Selecteer]

body{
text-align:center;
background-color:#8c0108;
}.algemeenkader{ 
position: absolute;
left: 50%;
top: 0px;
width: 800px;
height: auto;
background-color: white;
margin: 0px 0 0 -400px;
text-align: left;
}
.menucontainer{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 350px;
}
.kanactieflogo{
position: absolute;
left: 250px;
}
.navigatie{
font-family: "Gill Sans";
font-style: "regluar";
font-size: 24px;
text-decoration: none;
color: black;
}
a.overons{
text-decoration: none;
color: black;
position: absolute;
top: 50px;
left: 100px;
}
a.overons:hover{
text-decoration: underline;
color: black;
position: absolute;
top: 50px;
left: 100px;
}
a.doelstellingen{
text-decoration: none;
color: black;
position: absolute;
top: 130px;
left: 70px;
}
a.doelstellingen:hover{
text-decoration: underline;
color: black;
position: absolute;
top: 130px;
left: 70px;
}
a.getuigenissen{
text-decoration: none;
color: black;
position: absolute;
top: 200px;
left: 30px;
}
a.getuigenissen:hover{
text-decoration: underline;
color: black;
position: absolute;
top: 200px;
left: 30px;
}

het resultaat: http://emerik.macuser.nl/kanactiefplus/

(Bewerkt door Emerik om 14:44, 26-04-2007)

Helpt u de wereld al redden?

Godfather

3.711

auto height in css

27 april 2007 - 02:08 reactie #3

geplaatst door: Godfather

Ik hoop dat je het niet erg vind maar ik heb de CSS even om gegooid. weg met absoluut en een cleaner om dat witte te laten zien van het 'algemeenkader'

De CSS:

Code: [Selecteer]

body{ 
background-color:#8c0108; 
margin: 0px;
} .algemeenkader{ 
width: 800px; 
height: auto; 
background-color: white; 
margin:auto; 
} 
.navigatie{ 
font-size:24px;
float: left;
width:266px;
text-align:right;
clear: none;
}
.over_ons {
max-width:140px;
padding: 45px 0px 25px 70px;
}
.doelstellingen {
padding: 20px 0px 25px 50px;
max-width:150px;
}
.getuigenis {
padding: 20px 0px 25px 20px;
max-width:150px;
}
.plaatje {
float:left;
width:533px;
}
.cleaner {
font-size: 0px;
line-height: 0px;
height: 0px;
clear: both;
}

a:link { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; }

En de HTML:

Code: [Selecteer]


<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head><body> 
<div class="algemeenkader">
<div class="navigatie">
<div class="over_ons">
<a href="#">Over ons</a>
</div>
<div class="doelstellingen">
<a href="#">Doelstellingen</a>
</div>
<div class="getuigenis"> 
<a href="#">Getuigenissen</a>
</div>
 </div>
<div class="plaatje">
<img src="logokanactiefplus.jpg" width="300" height="275" />
</div>
<div class="cleaner"></div>
</div>

</body> </html>

En de link om hem te checken is hier.

Ik heb geprobeerd om jouw versie om te bouwen met die cleaner maar aangezien dat niet in een keer lukte heb ik hem even zelf in elkaar geknutseld. Het voornaamste probleem zat hem echter in het feit dat je een geneste div (die je eventueel float), niet in zijn parent div kan laten groeien. Het wordt wildgroei dan, vandaar die cleaner die als laatste div even aangeeft dat alle marges 100% benut worden zodat de parent div geforceerd wordt om te groeien met de child divs mee.

edit: ik zie net dat die pagina helemaal vern@*#kt is in IE op de peecee. Maar goed, je kan niet alles willen hè (het is laat nu dus ik laat het hier even bij)

(Bewerkt door Godfather om 2:50, 27-04-2007)

Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro

Emerik

topic starter

2.256

auto height in css

27 april 2007 - 07:16 reactie #4

geplaatst door: Emerik

Hartelijk Bedankt!!!

Ik snap niet hoe die cleaner z'n werk doet, maar het werkt wel
En daarnaast nog weer wat bijgeleerd (zoals die a:link).

Nogmaals merci!

Helpt u de wereld al redden?

Godfather

3.711

auto height in css

27 april 2007 - 10:53 reactie #5

geplaatst door: Godfather

hmm ja, maar let wel, niet op internet explorer op de peecee. Op firefox en safari echter wel. Overigens is die A:link en hover nu voor alle linkjes in dat document, dat kan een voordeel zijn maar ook een nadeel, maar in dit geval niet echt belangrijk aangezien dit de enige linkjes zijn op dit moment.

Die cleaner forceert de algemeenkader gewoon te groeien, zeg maar. Probeer hem maar eens weg te laten

Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro

Emerik

topic starter

2.256

auto height in css

27 april 2007 - 14:36 reactie #6

geplaatst door: Emerik

Dat is natuurlijk wel een probleem dat IE tegensputtert, het is wel
de bedoeling dat het daar ook goed op weergegeven wordt, maar
daar zal ik zelf nog wel wat rond zoeken.

Wat bedoelde je met: Het voornaamste probleem zat hem echter in het feit dat je een geneste div (die je eventueel float), niet in zijn parent div kan laten groeien?

Helpt u de wereld al redden?

Godfather

3.711

auto height in css

27 april 2007 - 18:51 reactie #7

geplaatst door: Godfather

Op het moment dat je een div opstelt, is dat de parent div zodra je daar een div in zet. Die div die je daarin zet is een child div, oftewel een genestte div. Die div schaalt als het goed is mee met je parent div. Maar aangezien ik oa. het attribuut float gebruikt heb, zal de child div de parent div niet meer meeschalen.

Waarom? Vanwege die float, waarom? geen idee. Om de float zijn eigenschap te neutraliseren pak ik nog een div na die child (binnen de parent div) en zet dan in de css van die div "clear:both;" om ervoor te zorgen dat ik zeker weet dat die child div correct 'afgesloten' wordt. Ik denk dat het te maken heeft met het feit dat een div altijd de maximale breedte van de browser pakt zodat dit niet voorkomt, maar zodra je float gebruikt, wordt de div net zo breed als de inhoud van die div. Daar gaat het dan ook fout. Ik kan het niet echt goed uitleggen omdat ik eigenlijk ook een leek ben op gebied van CSS maar ik heb hetzelfde meerdere malen ervaren zoal jij dat hebt en op deze manier opgelost.

Overigens, de reden dat IE het niet goed doet heeft niet zoveel te maken met die float, het enige wat IE niet goed doet is alles in het midden zetten en de tekst zo scheef uitlijnen zoals bedoeld. Dit heeft meer met IE zelf te maken als met de code aangezien IE padding en margins anders interpreteerd t.o.v safari of firefox (waar het dan dus ook prima werkt).

Mac Pro '08 - iPad 16GB - iPhone 6 - Next Gen MB Pro