változó tartalom
Sziasztok!
Egy kis segítségre lenne szükségem. Van egy készülő oldalam, az alábbi hármas felosztásban: fejléc, tartalom, lábléc.
Az lenne a gondom, hogy:
A content tartalmaz egy háttérképet, és egy olyan divet(contentSpace), ami elvileg arra szolgál, hogy ha a tartalom több, mint ami a háttérképre ráfér, akkor a tartalom alatti részt kiegészítse. Ezzel a divvel bajlódok, nem tudom, hogy melyik div-be vagy után legyen, és a magassága sem akar működni. Kérlek segítsetek. Köszönöm!
HTML :style.css :
■ Egy kis segítségre lenne szükségem. Van egy készülő oldalam, az alábbi hármas felosztásban: fejléc, tartalom, lábléc.
Az lenne a gondom, hogy:
A content tartalmaz egy háttérképet, és egy olyan divet(contentSpace), ami elvileg arra szolgál, hogy ha a tartalom több, mint ami a háttérképre ráfér, akkor a tartalom alatti részt kiegészítse. Ezzel a divvel bajlódok, nem tudom, hogy melyik div-be vagy után legyen, és a magassága sem akar működni. Kérlek segítsetek. Köszönöm!
HTML :
<?xml version="1.0" encoding="ISO-8859-2">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/19996xhtml" xml:lang="hu" lang="hu">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="content-language" content="hu" />
<link rel="stylesheet" type="text/css" href="style-erintesek.css" />
<title>Cím</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="white">
<div id="image-bemut"></div>
</div>
<div id="content">
<div class="contentText">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vel elit. Nam posuere turpis id tortor. Aliquam erat volutpat. Nunc fermentum. Duis auctor. Ut nec mi. Nunc fringilla nunc ut purus. Vivamus eu lacus non massa mollis scelerisque. Mauris nisi. Donec placerat. Fusce pharetra, nulla quis ultricies varius, eros nisi pharetra dui, nec fermentum metus leo non neque. Praesent massa leo, adipiscing et, ultrices a, rhoncus ac, felis. Aenean pulvinar accumsan libero.
Vestibulum a lorem. Ut eget tortor. Nullam tincidunt, mi et molestie bibendum, nibh mi iaculis ligula, in ullamcorper orci lorem et turpis. In rutrum odio quis tortor. Proin euismod bibendum odio. Donec est nunc, ornare et, volutpat sit amet, venenatis in, diam. Aenean tempor mi et mauris. Nullam orci massa, sagittis id, ultricies nec, feugiat eu, ante. Etiam lectus. In hac habitasse platea dictumst. Nullam odio tortor, suscipit id, adipiscing ut, consequat ullamcorper, felis. Nam faucibus turpis eleifend diam.
Curabitur sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis sapien sit amet lorem. Maecenas eget ante eu nunc porttitor aliquam. Morbi facilisis, arcu eget fermentum fermentum, enim orci elementum nibh, eu dapibus diam ligula ac enim. Etiam enim. Duis vehicula ligula ut erat. Donec interdum nunc vulputate metus. Quisque dapibus orci quis orci. Suspendisse felis sapien, nonummy vel, gravida quis, ornare a, arcu. Duis consequat blandit augue. Integer diam velit, interdum vel, condimentum a, nonummy vel, massa. Nunc a tortor id libero hendrerit vestibulum.
Nullam condimentum fermentum nisl. Maecenas imperdiet pharetra tellus. Donec sit amet mi. Phasellus eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris at velit ut nisi feugiat eleifend. Fusce dictum vulputate est. Suspendisse vehicula feugiat lacus. Sed pretium mi sit amet lectus. Aliquam luctus, risus eget adipiscing iaculis, lorem dolor facilisis orci, vitae cursus risus magna ut arcu. Donec ligula. Suspendisse imperdiet libero sed lorem. Etiam est. Pellentesque nisl felis, hendrerit id, semper vitae, aliquet in, augue. Vestibulum fermentum ante et purus. Phasellus elit nisl, porttitor scelerisque, convallis vel, rutrum laoreet, augue. Nunc sit amet arcu. Mauris lacinia tempor magna. Suspendisse a magna at libero vehicula convallis.
</div>
</div>
<div class="contentSpace">
</div>
<div class="footer">
<div class="copy">
Copyright © Cím 2007.
</div>
<div class="english">
<a href="#">főoldal |</a> <a href="#">english</a>
</div>
</div>
</div>
</body>
</html>
body
{
background: url(images/background.jpg) repeat;
font: 11px Arial, Tahoma, Verdana;
color: #583003;
}
#container
{
padding: 0;
position: relative;
margin-left: auto;
margin-right: auto;
width: 700px;
background: url(images/container.jpg) repeat-x;
}
#header
{
position: relative;
top: 5px;
left: 5px;
width: 690px;
height: 74px;
background: url(images/head.jpg) no-repeat;
margin: 0;
padding: 0;
z-index: 1;
}
#white
{
position: relative;
top: 5px;
left: 5px;
padding: 0;
margin: 0;
background-color: #fff;
width: 690px;
height: 247px;
}
#image-bemut
{
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: url(images/image-bemut.jpg) no-repeat;
width: 690px;
height: 243px;
}
#content
{
position: relative;
top: 5px;
left: 5px;
float: left;
width: 690px;
margin: 0;
padding: 0;
background: url(images/content.jpg) no-repeat;
z-index: 2;
}
.contentText
{
position: relative;
top: 50px;
left: 40px;
width: 385px;
margin: 0;
padding: 0;
text-align: justify;
z-index: 3;
}
.contentSpace
{
position: relative;
top: 0px;
left: 0px;
clear: both;
width: 700px;
margin: 0px;
padding: 0;
background: url(images/content-space.jpg) repeat-y;
}
.footer
{
position: relative;
top: 0px;
left: 0px;
float: left;
width: 700px;
height: 50px;
background: url(images/footer.jpg) no-repeat;
margin: 0;
padding: 0;
}
.copy
{
position: absolute;
bottom: 8px;
left: 50px;
font-size: 10px;
}
.english
{
position: absolute;
bottom: 8px;
right: 18px;
font-size: 10px;
}
.english a
{
text-decoration: none;
color: #583003;
}
re:változó tartalom