Probleem met text op webpagina

  • Onderwerp starter Onderwerp starter Yuri4
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
Y

Yuri4

Gebruiker
Lid geworden
26 dec 2012
Berichten
84
Hallo,

Ik ben tijdens het maken van een website tegen een probleem aangelopen. Wanneer er namelijk meer tekst op de pagina staat dan past, dan heb ik een probleem waarbij mijn wrapper/background niet de volledige tekst beslaat. Ik wil wel dat als er minder tekst op staat dat de wrapper/background het scherm volledig in beslag neemt.

Website bestanden om te bekijken hier. (Kan om één of andere reden niet ftp-en op mijn pc?!?)
Op de homepagina staat teveel tekst en op de contact pagina te weinig.

Hier mijn code.
HTML:
HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Bakkerij Paul Claassen</title>
	<link href="ui/default.css" rel="stylesheet" type="text/css" />
	<link href="ui/images/favicon.ico" rel="shortcut icon" />
</head>
<body>
<div id="background"></div>
<nav></nav>
<div id="wrapper">
<header>
	<a href="#home"><img src="ui/images/logo.jpg" id="logo" alt="Logo" /></a>
</header>
<ul id="menu">
	<li class="horizontalmenu"><a href="index.html" class="menubutton" id="mainpage">Home</a></li>
	<ul class="popoutcontainer">
		<li class="horizontalmenu"><a href="#overdebakkerij" class="menubuttonpo">Over de bakkerij</a></li>
		<li class="popoutmenu">
			<a href="#popout" class="popoutlinks">Geschiedenis</a>
			<a href="#popout" class="popoutlinks">Het pand</a>
			<a href="#popout" class="popoutlinks">De bakkers</a>
		</li>
	</ul>
	<ul class="popoutcontainer">
		<li class="horizontalmenu"><a href="#aanbiedingen" class="menubuttonpo">Aanbiedingen</a></li>
		<li class="popoutmenu">
			<a href="#popout" class="popoutlinks">Vandaag</a>
			<a href="#popout" class="popoutlinks">Deze week</a>
			<a href="#popout" class="popoutlinks">Speciale acties</a>
		</li>
	</ul>
	<li class="horizontalmenu"><a href="#bestellen" class="menubutton">Bestellen</a></li>
	<li class="horizontalmenu"><a href="contact/index.html" class="menubutton">Contact</a></li>
</ul>
<div id="searchcontainer">
	<img src="ui/images/searchmenu.png" id="searchbuttonmenu" alt="Zoeken" />
	<form id="searchform" method="get" action="http://www.google.com/search" target="_blank">
		<input type="hidden" name="ie" value="UTF-8" />
		<input type="hidden" name="oe" value="UTF-8" />
		<input type="text" id="searchbar" name="q" maxlength="255" placeholder="Google zoeken" />
		<input type="submit" id="searchbutton" value="" />
	</form>
</div>
<section>
	<h2>Welkom op de site van Bakkerij Paul Claassen!</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus gravida nisi non molestie. Donec vel velit at arcu euismod eleifend. Quisque quis eleifend quam. Aenean ullamcorper mauris id ipsum tincidunt, bibendum porttitor lectus consequat. Proin non justo non diam laoreet gravida et sed ligula. In malesuada odio vitae nulla commodo, id rutrum ipsum sagittis. Sed rutrum urna odio, eget placerat magna egestas vel. Aenean venenatis lorem purus.</p>
	<p>Fusce accumsan eleifend commodo. Sed consequat massa sit amet mi pharetra, in mattis leo ultrices. Quisque quis turpis gravida nulla varius tincidunt non vitae ligula. Ut gravida mauris erat, et consequat dolor laoreet at. Aenean dapibus ultricies porttitor. Sed sed porttitor ante, eu iaculis massa. Donec mauris dui, luctus at magna in, condimentum faucibus odio. Etiam purus orci, consectetur a pulvinar quis, viverra at urna.</p>
	<p>Nulla dictum auctor aliquet. Donec eu fringilla enim. Sed placerat lectus malesuada, ornare elit vitae, laoreet libero. Aenean eu accumsan leo. Ut aliquam mollis ipsum ac volutpat. Suspendisse elementum sapien id velit aliquam, sed euismod mi fringilla. Curabitur tempor semper dolor ut ultricies. Nunc a mauris nec metus tincidunt laoreet.</p>
	<p>Sed eget blandit dolor. Sed egestas, magna sit amet faucibus lobortis, arcu lacus tristique ipsum, sit amet porttitor erat mauris sit amet urna. Donec blandit fringilla justo, vel mattis arcu lobortis quis. Mauris a mattis purus. Curabitur ac laoreet sem, vitae elementum risus. Nulla malesuada, nibh vel porttitor pulvinar, justo nisl elementum arcu, sed porta tellus est eget tortor. Suspendisse a neque et nibh consectetur fermentum vitae aliquam felis. Aenean ut consectetur quam, id malesuada risus. Pellentesque volutpat, dui sit amet imperdiet aliquet, felis lacus mollis elit, vel sagittis sapien urna vel dui. Duis euismod congue velit, et pellentesque sapien gravida et.</p>
	<p>Nullam molestie magna et turpis aliquam malesuada. Vestibulum sagittis mollis lectus. Aliquam ut semper purus. Pellentesque at cursus eros. Morbi eget nisi sem. Nulla vulputate neque massa, eget consequat lacus mollis quis. Vestibulum vel porta eros. Integer vulputate euismod sagittis. Integer varius tortor sed tortor convallis, et hendrerit magna imperdiet. Nulla non tincidunt odio, sed varius nisi. Fusce lobortis rutrum sem vel porttitor. Donec ultricies lacus tortor, at ullamcorper leo tristique eu. Aenean gravida fermentum tempor. Quisque sed lacus eleifend, consectetur diam sit amet, ultricies turpis. Pellentesque felis justo, bibendum id mollis ac, varius ac nunc. Vivamus cursus vel arcu in auctor.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus gravida nisi non molestie. Donec vel velit at arcu euismod eleifend. Quisque quis eleifend quam. Aenean ullamcorper mauris id ipsum tincidunt, bibendum porttitor lectus consequat. Proin non justo non diam laoreet gravida et sed ligula. In malesuada odio vitae nulla commodo, id rutrum ipsum sagittis. Sed rutrum urna odio, eget placerat magna egestas vel. Aenean venenatis lorem purus.</p>
	<p>Fusce accumsan eleifend commodo. Sed consequat massa sit amet mi pharetra, in mattis leo ultrices. Quisque quis turpis gravida nulla varius tincidunt non vitae ligula. Ut gravida mauris erat, et consequat dolor laoreet at. Aenean dapibus ultricies porttitor. Sed sed porttitor ante, eu iaculis massa. Donec mauris dui, luctus at magna in, condimentum faucibus odio. Etiam purus orci, consectetur a pulvinar quis, viverra at urna.</p>
	<p>Nulla dictum auctor aliquet. Donec eu fringilla enim. Sed placerat lectus malesuada, ornare elit vitae, laoreet libero. Aenean eu accumsan leo. Ut aliquam mollis ipsum ac volutpat. Suspendisse elementum sapien id velit aliquam, sed euismod mi fringilla. Curabitur tempor semper dolor ut ultricies. Nunc a mauris nec metus tincidunt laoreet.</p>
	<p>Sed eget blandit dolor. Sed egestas, magna sit amet faucibus lobortis, arcu lacus tristique ipsum, sit amet porttitor erat mauris sit amet urna. Donec blandit fringilla justo, vel mattis arcu lobortis quis. Mauris a mattis purus. Curabitur ac laoreet sem, vitae elementum risus. Nulla malesuada, nibh vel porttitor pulvinar, justo nisl elementum arcu, sed porta tellus est eget tortor. Suspendisse a neque et nibh consectetur fermentum vitae aliquam felis. Aenean ut consectetur quam, id malesuada risus. Pellentesque volutpat, dui sit amet imperdiet aliquet, felis lacus mollis elit, vel sagittis sapien urna vel dui. Duis euismod congue velit, et pellentesque sapien gravida et.</p>
	<p>Nullam molestie magna et turpis aliquam malesuada. Vestibulum sagittis mollis lectus. Aliquam ut semper purus. Pellentesque at cursus eros. Morbi eget nisi sem. Nulla vulputate neque massa, eget consequat lacus mollis quis. Vestibulum vel porta eros. Integer vulputate euismod sagittis. Integer varius tortor sed tortor convallis, et hendrerit magna imperdiet. Nulla non tincidunt odio, sed varius nisi. Fusce lobortis rutrum sem vel porttitor. Donec ultricies lacus tortor, at ullamcorper leo tristique eu. Aenean gravida fermentum tempor. Quisque sed lacus eleifend, consectetur diam sit amet, ultricies turpis. Pellentesque felis justo, bibendum id mollis ac, varius ac nunc. Vivamus cursus vel arcu in auctor.</p>
</section>
<footer>
	<div id="footertext">&copy; Bakkerij Paul Claassen 2013</div>
</footer>
</div>
</body>
</html>
CSS:
HTML: 
body {
    font-family: Calibri, sans-serif;
	font-size: 16px;
	padding: 0px;
	margin: 0px;
}

div#background {
	background-image: url("images/background.jpg");
	background-size: cover;
	min-height: 100%;
	min-width: 1300px;
	width: 100%;
	height: auto;
	position: fixed;
}

div#wrapper {
	background-color: #FFF;
	margin: 0px auto;
	padding: 10px;
	min-width: 550px;
	max-width: 800px;
	min-height: 500px;
	position: absolute;
	top: 0px;
	left: 250px;
	right: 250px;
	bottom: 0px;
	box-shadow: 0px 0px 8px #000;
}

header {
	margin: 0px 5px 55px 0px;
}

img#logo {
	height:100px;
	margin: 0px;
}

nav {
	background-color: #000;
	height: 35px;
	margin: 0px;
	padding: 0px 300px;
	position: absolute;
	top: 125px;
	left: 0px;
	right: 0px;
	z-index: 1;
}

ul#menu {
	list-style-type: none;
	padding: 0px;
	position: absolute;
	top: 109px;
	left: 0px;
	right: 0px;
	z-index: 2;
}

a.menubutton, a.menubuttonpo {
	display: block;
	height: 28px;
	padding: 7px 5px 0px 5px;
	margin: 0px;
	text-decoration: none;
	color: #FFF;
}

a.menubutton:hover, a#mainpage,
img#searchbuttonmenu:hover,
a.menubuttonpo:hover,
div#searchcontainer:hover img#searchbuttonmenu,
ul.popoutcontainer:hover a.menubuttonpo {
	background-color: #FA8E07;
}

li.horizontalmenu, ul.popoutcontainer {
	display: inline-block;
	margin-right: 10px;
}

ul.popoutcontainer {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

li.popoutmenu {
	background-color: #FA8E07;
	height: 0px;
	padding-left: 10px;
	position: absolute;
	top: 35px;
	left: 0px;
	right: 0px;
	visibility: hidden;
	overflow: hidden;
	transition: height, 500ms;
	-webkit-transition: height, 500ms;
	z-index: 2;
}

a.popoutlinks {
	color: #FFF;
	margin-right: 15px;
	text-decoration: none;
}

a.popoutlinks:hover, #mainpagepo {
	color: #000;
}

li.horizontalmenu:hover + li.popoutmenu,
li.popoutmenu:hover {
	padding-top: 7px;
	height: 28px;
	visibility: visible;
}

img#searchbuttonmenu {
	display: block;
	height: 25px;
	margin: 0px;
	padding: 10px 5px 0px 5px;
	position: absolute;
	top: 125px;
	right: 0px;
	z-index: 3;
}

img#searchbuttonmenu:hover + form#searchform,
form#searchform:hover {
	height: 30px;
	visibility: visible;
}

form#searchform {
	background-color: #FA8E07;
	padding-left: 5px;
	height: 0px;
	width: 182px;
	position: absolute;
	top: 160px;
	right: 0px;
	z-index: 2;
	visibility: hidden;
	overflow: hidden;
	transition: height, 400ms;
	-webkit-transition: height, 400ms;
}

input#searchbar {
	border: none;
	padding: 0px 22px 0px 5px;
	height: 21px;
	width: 150px;
	position: absolute;
	top: 5px;
	right: 5px;
}

input#searchbutton {
	background: none;
	background-image: url("images/searchbutton.png");
	background-size: 17px 17px;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	height: 21px;
	width: 21px;
	position: absolute;
	top: 6px;
	right: 4px;
}

section {

}

img {
	margin: 5px;
}

h1 {

}

h2 {
	font-size: 18px;
	font-weight: bold;
}

aside {

}

footer {
	font-size: 11px;
	width: 200px;
	position: absolute;
	left: 50%;
	bottom: 7px;
}

#footertext {
	margin-left: -70px;
}

Alvast bedankt!
Yuri
 
Laatst bewerkt:
Als ik deze css regel hieronder uitschakel lijkt het volgens mij te werken:
Code: 
div#wrapper {
   bottom: 0px; /*deze dus verwijderen*/
}

Ik hoop dat het helpt.
 
Bedankt voor je antwoord, dit werkt zeker. Alleen dan is het zo dat op een pagina met minder tekst de wrapper niet van bovenkant tot de onderkant komt. Ik denk dat ik gewoon gebruik ga maken van verschillende css bestanden per pagina voor de wrapper.

Nogmaals bedankt,
Yuri
 
Je zou dan nog je min-height naar 100% (let op: % dus niet px) kunnen zetten. Dit is niet helemaal ideaal maar het komt vrij dicht in de buurt.

edit:
Het is natuurlijk beter om ervoor te zorgen dat je min-height samen met je border en eventuele padding niet meer dan 99% is. Een min-height van 97% en een padding van 10px gaf bij mij een redelijk resultaat.

succes,

theis
 
Laatst bewerkt:
Oke bedankt, ik heb toch het beste resultaat met een aparte class waarin bottom: 0px; staat die ik aanzet wanneer de tekst meer is dan op de pagina past.

Yuri
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan