[CSS] div spacing bottom - Softwareontwikkeling

vrijdag 10 augustus 2007 12:18

Acties:

Topicstarter

Voor een eenvoudige webapplicatie gebruik ik een divje om het eea weer te geven, werkt opzich prima.
Maar (jawel..

) als de content teveel wordt om zonder scrollbars te laten zien wordt de div netjes langer, alleen eindigt deze zonder onderste border, zie afbeelding:

Afbeeldingslocatie: http://enveekaa.net/files/div_fout.jpg

Afbeeldingslocatie: http://enveekaa.net/files/div_fout.jpg

Ik verwacht eigenlijk deze uitkomst, met wat extra spacing dus;

Afbeeldingslocatie: http://enveekaa.net/files/div_goed.jpg

De css class die ik nu gebruik is:

Cascading Stylesheet:

#edit {
    background: #efefef;
    border: 1px solid #999999;
    padding: 20px;
    left: 50px; 
    bottom: 50px;
    top: 50px;
    position: absolute;
    width: 470; 
}

[mbr]Zet je code voortaan in [code=css][/code] tags voor de kleurtjes ;)[/]
Ik gebruik hier bottom om de spacing aan de onderzijde weer te geven, ik ben er eerlijk gezegd niet zeker van of dit gaat werken.
Iemand een idee hoe ik dit oplos?

[ Voor 5% gewijzigd door enveekaa op 10-08-2007 19:31 ]

vrijdag 10 augustus 2007 12:34

Acties:

DoubleJ

Een ninjja!

margin-bottom: XX px ?

vrijdag 10 augustus 2007 13:51

Acties:

Kiphaas7

position absolute schijnt nogal problemen te geven en kan je dus het beste vermijden.

En waarom gebruik je left right bottom center ipv margin?

vrijdag 10 augustus 2007 14:52

Acties:

enveekaa

Topicstarter

margin-bottom haalt niks uit, in ie7 althans

@kiphaas: margin is inderdaad beter, is inmiddels veranderd. Toch krijg ik die margin onderaan mijn divje niet te zien.. misschien is dit wel gewoon de bedoeling?

vrijdag 10 augustus 2007 17:17

Acties:

DoubleJ

Een ninjja!

je zou kunnen proberen de body een padding mee te geven.. iets meer code of een linkje zou wel makkelijk zijn.

vrijdag 10 augustus 2007 19:38

Acties:

enveekaa

Topicstarter

Je hebt gelijk hier wat meer code.
De CSS die ik nu gebruik:

Cascading Stylesheet:

#edit {
    background: #efefef;
    border: 1px solid #999999;
    padding: 20px;
    margin: 50px;
    width: 470; 

}

De HTML die ik gebruik is:

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
<title>qcms - nieuwsbeheer</title>
<link type="text/css" href="css/qcmslogin.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="include/tinymce/tiny_mce.js"></script>
</head>
<body>
<div id="edit">
inhoud
<p class="subtext">
<hr size="1" color="#444444">
<b>qcms</b> content management system<br />version 1.2
</p>
</div>
</body>
</html>