[CSS] hoogte aan inhoud aanpassen - Softwareontwikkeling

donderdag 7 juli 2005 15:49

Acties:

Verwijderd

Topicstarter

Hoi, ik ben bezig aan een site die ik gesliced heb met photoshop. Deze site ben ik door middel van css terug aan het samenstellen. Nu zit ik met een probleem voor de header en de footer.
De footer moet telkens onderaan de tekst komen. dus als ik een zin heb dan moet de footer onder die zin komen, als je een lange tekst heb onder de tekst, maw de plaats hangt af van de groote van de tekst.
Nu heb ik dit
HTML

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample This! - 4 maart 2006 - Nieuws</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
    <div id="top"></div>

    <div id="site">
    bla bla bla<br />bla bla bla<br />bla bla bla<br />bla bla bla<br />bla bla bla<br />
    bla bla bla<br />bla bla bla<br />bla bla bla<br />bla bla bla<br />bla bla bla<br />
    bla bla bla<br />bla bla bla<br />bla bla bla<br />bla bla bla<br />bla bla bla<br />
    </div>
    
</div>

</body>
</html>

CSS

Cascading Stylesheet:

/*positie*/
#container{
    position: absolute;
    margin-left: -320px;
    left: 50%;
    top:5px;
    height: inherit;
    width:640px;
    background-image: url(img/layout/bottom.gif);
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 125px;
}
/* afbeeldingen*/
#top{
position: absolute;
top: 5px;
margin: 0px;
height: 175px;
width: 640px;
background-image: url(img/layout/top.gif);
}

#site{
position: absolute;
top: 175px;
left: 71px;
width: 419px;
background-image: url(img/layout/achtergrond.gif);
background-position: left top;
background-repeat: no-repeat;
background-color: #DF7E21;
margin-bottom: 125px;
padding: 20px;
height: auto;
}

/* opmaak */
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #351b01;
color: #ffffff;
}

de tekst staat dus in de div site. Dit moet omdat er hier nog een apparte achtergrond afbeelding staat.
Dus de container moet zich aanpassen aan de variable groote van de div "site

alvast bedankt

[ Voor 10% gewijzigd door Verwijderd op 07-07-2005 16:13 ]

donderdag 7 juli 2005 15:53

Acties:

crisp

Devver

Pixelated

Als je nou niet alles absoluut zou positioneren wordt het al een stuk eenvoudiger

Centreren kan je sowieso beter zo doen:

Cascading Stylesheet:

body {
    text-align: center; /* voor IE */
}
#container {
    position: relative;
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

[ Voor 3% gewijzigd door crisp op 07-07-2005 15:54 ]

Intentionally left blank

donderdag 7 juli 2005 16:48

Acties:

Verwijderd

Topicstarter

ja, maar wat heeft dat te maken met mijn vraag? moest ik het zo centreren gaat mijn bottom nog niet onderaan gaan staan...

donderdag 7 juli 2005 17:15

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 07 juli 2005 @ 16:48:
ja, maar wat heeft dat te maken met mijn vraag? moest ik het zo centreren gaat mijn bottom nog niet onderaan gaan staan...

Als je je #top en #site nou ook niet absoluut positioneerd kan je onder #site gewoon een footer neerzetten die altijd onder #site blijft staan..

voorbeeldje:

HTML:

<style type="text/css">
body {
    text-align: center; /* voor IE */
    padding: 0;
    margin: 0;
}
#container {
    position: relative;
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#header {
    height: 175px;
    background-color: yellow;
}
#site {
    background-color: blue;
    margin-left: 71px;
}
#site p {
    margin: 0;
    padding: 10px;
}
#footer {
    height: 175px;
    background-color: lime;
}
</style>
<div id="container">
    <div id="header">header</div>
    <div id="site">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla vitae ante. Donec cursus pharetra mauris. Praesent vehicula magna vitae lectus. Duis pede. Pellentesque ut pede eu erat nonummy tincidunt. Ut eros. Quisque congue dolor in elit. Morbi scelerisque. Aenean facilisis velit in augue. Fusce porta justo a velit. Proin ante velit, faucibus ac, imperdiet pharetra, lacinia id, enim. Sed blandit aliquet tellus. In hac habitasse platea dictumst. Quisque at urna. Proin convallis neque ut mi. Etiam ut sem. Integer mauris nisl, dictum sit amet, vestibulum vitae, bibendum in, felis.</p>
    </div>
    <div id="footer">footer</div>
</div>

[ Voor 62% gewijzigd door crisp op 07-07-2005 17:28 ]

Intentionally left blank