Ik ben in HTML/CSS een pagina aan het slicen voor mezelf, maar ik zit vast.
Ik heb een achtergrond van 300px hoog (gradient). Wanneer de tekst daaroverheen te kort is wordt de achtergrond ook ingekort naar bijvoorbeeld 100px. Als ik in CSS de achtergrond op 100% instel krijg ik in IE een goed resultaat, maar in FF wordt de pagina dan de verticale hoogte van mijn scherm. Als ik het instel op 300 overlapt de tekst de div daaronder.
Wat ik dus wil is een minimum van 300, en als het meer is, dat die dan gewoon vergroot. Hoe doe je dat?
HTML:
CSS:PHP Code:<html>
<head>
<title>
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="head">
<div id="logo">
</div>
</div>
<div id="body">
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis faucibus odio, eget fringilla diam rutrum quis. Aliquam vitae urna lorem, at placerat dolor. Nulla consectetur congue est in mollis. Maecenas eu justo porttitor libero accumsan malesuada. Suspendisse adipiscing dignissim velit, vulputate accumsan massa euismod ac. Proin mollis ullamcorper massa vitae tristique. Curabitur libero nisi, cursus in luctus at, pulvinar sed erat. Proin id malesuada risus. Ut viverra ligula vel erat semper laoreet ullamcorper ut mi. Nunc quis interdum felis. Pellentesque nec arcu magna, id tincidunt quam.
<br /><br />
Sed justo dolor, hendrerit non tristique sit amet, pharetra et orci. Aliquam condimentum risus et metus ultricies pulvinar. Etiam lectus lacus, sagittis ut sodales sed, dapibus quis nunc. Nulla facilisi. Aliquam ut sem arcu. Aliquam id diam vitae tortor hendrerit malesuada a vitae nisi. Suspendisse vel sapien lorem. Sed auctor pellentesque lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam accumsan fermentum fringilla. Nulla ultricies iaculis elementum. In tempus sem et odio convallis quis pharetra nunc porta. Quisque purus metus, condimentum vel faucibus lacinia, venenatis nec tortor. Vestibulum mattis, erat vitae pulvinar lobortis, tortor nunc pretium nibh, id venenatis nulla neque eu purus. Cras et sem mollis lectus semper cursus. Nam lorem nibh, vestibulum ut porta et, scelerisque a lacus. Quisque ultrices porta pulvinar. Aenean dui nisl, tincidunt ut aliquet nec, laoreet a dui. Praesent sagittis aliquam nisi nec ullamcorper.
<br /><br />
Pellentesque posuere urna eget ante consectetur et condimentum lectus mattis. Praesent porttitor, massa in rutrum porta, lacus tellus scelerisque nibh, ac rutrum lorem sapien et ligula. Maecenas tincidunt ornare bibendum. Duis posuere, lectus vitae rutrum rutrum, metus magna rutrum lacus, in ultricies sem tortor a augue. Praesent suscipit ligula ut nisi laoreet mollis. Aliquam feugiat tincidunt elit, quis placerat eros gravida sit amet. Pellentesque ultrices tincidunt ligula id rutrum. Integer quis purus vitae purus pretium ullamcorper id sit amet arcu. Ut eget iaculis purus. Sed pulvinar neque a sapien dictum euismod. Morbi porta gravida varius. Cras semper ipsum et turpis posuere eget tristique ligula scelerisque. Phasellus turpis libero, euismod vel consequat sit amet, pulvinar at lorem.
<br /><br />
Donec blandit felis in tortor sollicitudin tincidunt. Sed sit amet nisl eros. Sed viverra, nulla a euismod aliquet, lacus neque elementum enim, eget semper dolor nulla sed purus. Aenean porttitor tincidunt semper. Proin varius luctus tempus. Nulla dolor odio, lacinia in posuere eu, condimentum ac eros. Nulla eleifend rhoncus orci id tristique. Etiam sit amet consectetur urna. Etiam aliquam, orci molestie scelerisque fermentum, metus justo scelerisque nibh, at vulputate velit turpis vitae sem. Aliquam interdum, diam eu porta gravida, nibh lorem accumsan dui, sit amet faucibus erat lorem quis metus. Donec nisi sapien, adipiscing ut sagittis non, convallis et eros. Maecenas consectetur interdum mauris vitae gravida. Pellentesque dapibus dolor at felis egestas commodo.
<br /><br />
Maecenas in tincidunt tellus. Donec nisl orci, blandit vitae auctor non, blandit et metus. Quisque non libero mauris, id aliquet urna. Cras elit lacus, blandit ut tincidunt eget, blandit at mauris. Etiam sit amet ante quam. Praesent elementum, turpis a congue suscipit, diam lacus commodo justo, in ullamcorper nibh magna sed sapien. Mauris ultrices, risus sed egestas bibendum, nunc sem molestie dolor, hendrerit mollis sem leo ac quam. Sed congue dolor in nisi vehicula dictum. Proin malesuada, dolor sit amet placerat ultrices, justo velit commodo lectus, vitae molestie est tortor eu justo. Maecenas eget purus enim, a dapibus elit. Ut sagittis tortor vitae velit bibendum in lobortis mi aliquam. Vivamus tristique, sapien sit amet suscipit pulvinar, enim nisl condimentum elit, ac auctor odio leo nec massa. Sed eget nulla vitae mi euismod lobortis. Vestibulum non justo augue, in molestie diam. Etiam ultrices sodales sollicitudin. Maecenas faucibus porta iaculis.
</div>
</div>
<div id="footer">
<div id="container_footer">
<div id="nav">
<a href="#">BLOG</a><br />
<a href="#">CURRICULUM VITAE</a><br />
<a href="#">CONTACT</a><br />
---------------<br />
<a href="#">DEVIANTART</a>
</div>
</div>
</div>
</body>
</html>
PHP Code:body {
margin: 0px;
}
#head {
background-image: url("../gfx/bg.jpg");
height: 100px;
width: 100%;
}
#logo {
background-image: url("../gfx/logo.jpg");
height: 100px;
width: 600px;
}
#body {
background-image: url("../gfx/bg_container.jpg");
background-repeat: repeat-x;
width: 100%;
background-position: bottom;
}
#container {
width: 600px;
text-align: justify;
padding-bottom: 25px;
font-family: Trebuchet MS;
font-size: 10px;
line-height: 18px;
}
#footer {
background-image: url("../gfx/bg_footer.jpg");
height: 300px;
width: 100%;
}
#container_footer {
background-image: url("../gfx/container_footer.jpg");
width: 600px;
height: 300px;
}
#nav {
text-align: left;
padding-top: 30px;
padding-left: 420px;
color: #fff;
}
#nav a {
font-family: Trebuchet MS;
font-size: 10px;
color: #fff;
line-height: 18px;
text-decoration: none;
}
#nav a:hover {
color: #e5b201;
}
-
11-10-2009, 19:07 #1
Particulier
- Berichten
- 225
- Lid sinds
- 18 Jaar
CSS achtergrond
-
In de schijnwerper
-
11-10-2009, 19:08 #2
Particulier
- Berichten
- 1.001
- Lid sinds
- 15 Jaar
nou gewoon, 300px...
-
11-10-2009, 19:12 #3
Particulier
- Berichten
- 225
- Lid sinds
- 18 Jaar
Als ik 300px doe overlapt die div de div die daaronder ligt in FF
Origineel gepost door Eddy B.
-
11-10-2009, 19:15 #4
Particulier
- Berichten
- 1.001
- Lid sinds
- 15 Jaar
dat zal dan te maken hebben met je float ofzo? w8 even tot iemand andwoord geeft die wel verstand heeft van CSS :p ik ben meer van Flash
-
11-10-2009, 19:16 #5
Particulier
- Berichten
- 327
- Lid sinds
- 16 Jaar
Kan je even een voorbeeldje laten zien in de vorm van een link? Dat werkt wat gemakkelijker om even te kijken.
-
11-10-2009, 19:16 #6
Particulier
- Berichten
- 632
- Lid sinds
- 18 Jaar
min-height: 300px;
-
11-10-2009, 19:18 #7
Particulier
- Berichten
- 225
- Lid sinds
- 18 Jaar
Dat werkt wel in FireFox, niet in IE Origineel gepost door Jelle K.
Laatst aangepast door Reinier B : 12-12-2009 om 22:55 Reden: Automatisch samengevoegd.
-
11-10-2009, 19:22 #8
Particulier
- Berichten
- 632
- Lid sinds
- 18 Jaar
-
11-10-2009, 19:28 #9
Particulier
- Berichten
- 225
- Lid sinds
- 18 Jaar
Dankjewel Jelle, hij is gelukt nu!
Slotje!
