Witte balk aan de rechterkant van mijn webpagina, hoe gaat die weg?

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
HTML: 
<html>
<head>
<title>Joren Wouters</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="language" content="nl-NL">
<meta name="description" content="Joren Wouters">
<meta name="keywords" content="Joren, Wouters, joren, wouters, sint jans lyceum, Sint Jans Lyceum, SJL, sjl">
<meta name="title" content="Joren Wouters">
</head>
<body>

<div id="container">
<div id="header">
<p>Joren Wouters</p>
</div>
<div id="leftnav">
</div>
<div id="logo">
<p><b>{Logo}</b></p>
</div>
<div id="rightnav">
<div class="navmenu">

<ul>
<li><a href="#">Over mij</a>
<ul>
<li><a href="#">Wie ben ik?</a></li>
<li><a href="#">Wat doe ik?</a></li>
</li></ul>

<li><a href="#">Het plan</a>
<ul>
<li><a href="#">Mijn producten</a>
<li><a href="#">Mijn paketten</a>
</li></ul>

<li><a href="#">Het idee</a></li>

<li><a href="#">Contact</a></li>

</ul>
</div>
</div>
<div id="blankline">
</div>
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
<div id="footer">
<p class="footer">Designed by <i>Joren Wouters</i></p>
</div>

</div>

</body>
</html>
Code: 
#container {
width: 100%;
max-width: 100%;
height: 700px;
}
#header {
position: absolute; top: 0px; left: 0px;
height: 100px;
width: 100%;
background: #0099FF;
}
#header p {
font-family: Arial;
font-size: 35;
text-align: center;
}
#leftnav {
position: absolute; top: 101px; left: 0px;
height: 50px;
width: 250px;
background: #469;
}
#logo {
position: absolute; top: 101px; left: 251px;
height: 50px;
width: 375px;
background: #0099FF;
}
#logo p {
position: absolute; top: -7px; left: 145px;
font-family: Verdana;
font-size: 20;
}
#rightnav {
position: absolute; top: 101px; left: 627px;
height: 50px;
width: 722px;
background: #469;
}
.navmenu {
position: absolute; top: 10px; left: 75px;
height: 30px;
width: 700px;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 357;
}
.navmenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style: none;
}
.navmenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #469;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFF;
border: 1px solid #000000;
border-radius: 6px;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
.navmenu ul li:hover ul {
visibility: visible;
filter: alpha(opacity:70);
opacity: 0.9;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #000;
}


#blankline {
position: absolute; top: 152px; left: 0px;
height: 35px; 
width: 100%;
background: #0099FF;
}
#left {
position: absolute; top: 188px; left: 0px;
height: 454px;
width: 100px;
background: #0099FF;
}
#middle {
position: absolute; top: 188px; left: 101px;
height: 454px;
width: 1163px;
}
#right {
position: absolute; top: 188px; right: 0px;
height: 454px;
width: 102px;
background: #0099FF;
}
#footer {
position: absolute; top: 642px; left: 0px;
width: 100%;
height: 100px;
background: #0099FF;
}
.footer {
line-height: 80px;
text-align: center;
font-family: Arial;
font-size: 16;
color: #fff;
}

Dit is een ander HTML en CSS bestand.
Hierbij heb ik aan de rechterkant nog een witte balk, maar ik weet niet hoe die weggaat, hoe kan ik dit oplossen?
 
Laatst bewerkt door een moderator:
Jou probleem deed zich voor doordat je elk element op je site een vaste positie gaf en het menu daardoor uitstak.
Ik zou als tip geven om de position: absolutie minder te gaan gebruiken, hierdoor maak je, je site ook beter bruikbaar voor elke resolutie.

Hieronder geef ik je een voorbeeld hoe je de site kan opbouwen, de witte balk is verdwenen en heb er meteen voor je het uitschijf menu ingemaakt uit je andere vraag.

Als je nog vragen hebt over het script, laat het me gerust weten.

HTML: 
<html>
<head>
<title>Joren Wouters</title>

<meta name="language" content="nl-NL">
<meta name="description" content="Joren Wouters">
<meta name="keywords" content="Joren, Wouters, joren, wouters, sint jans lyceum, Sint Jans Lyceum, SJL, sjl">
<meta name="title" content="Joren Wouters">
</head>
<body>

<div id="container">
<div id="header">
	<p>Joren Wouters</p>
</div>
<div id="nav">
	<div id="logo">
		<p><b>{Logo}</b></p>
	</div>

<ul>
<li><a href="#">Over mij</a>
<ul>
<li><a href="#">Wie ben ik?</a></li>
<li><a href="#">Wat doe ik?</a></li>
</li></ul>

<li><a href="#">Het plan</a>
<ul>
<li><a href="#">Mijn producten</a>
<li><a href="#">Mijn pakketten</a>
</li></ul>

<li><a href="#">Het idee</a></li>

<li><a href="#">Contact</a></li>

</ul>
</div>

<div id="content">
<div class="inner">Plaats hier je content</div>
</div>

<div id="footer">
<p class="footer">Designed by <i>Joren Wouters</i></p>
</div>

</div>

</body>
</html>
Code: 
body{
	margin: 0;
}
p{
	margin: 0;
}
#header {
	line-height: 100px;
	background: #0099FF;
}
#header p {
	font-family: Arial;
	font-size: 35;
	text-align: center;
}
#nav {
	background: #469;
	height: 50px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
#logo {
	float: left;
	margin-left: 20%;
	height: 50px;
	width: 20%;
	background: #0099FF;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
#logo p {
	font-family: Verdana;
	font-size: 20;
	margin: 0;
	line-height: 50px;
	text-align: center;
}
#nav ul{
	width: 55%;
	float: left;
	margin: 0;
	padding: 0;
	line-height: 30px;
	margin: 10px 2%;
}
#nav li {
	list-style: none;
	float: left;
	background: #469;
}
#nav ul li a {
	text-align: center;
	font-family: Arial;
	text-decoration: none;
	height: 30px;
	width: 150px;
	display: block;
	color: #FFF;
	border: 1px solid #000000;
	border-radius: 6px;
}
#nav ul ul {
	display: none;
	position: absolute;
	width: 150px;
	margin: 0;
	filter: alpha(opacity:70);
	opacity: 0.9;
	height: 100%;
	overflow: hidden;
}

#nav ul ul li{
	float: none;
}
#nav ul li:hover ul {
	display: block;
	-webkit-animation: slideMenu 5s;
	animation: slideMenu 5s;
	-moz-animation: slideMenu 5s;
	height: 0px;
}

@-webkit-keyframes slideMenu
{
from {height: 0%;}
to {height: 100%;}
}

@keyframes slideMenu
{
from {height: 0%;}
to {height: 100%;}
}

@-moz-keyframes slideMenu
{
from {height: 0%;}
to {height: 100%;}
}

#nav ul ul li a:hover {
	background: #CCC;
	color: #000;
}
#nav a:hover {
	color: #000;
}
#content {
	padding-top: 35px;
	background: #0099FF;
}
.inner{
	width: 1163px;
	background-color: #fff;
	margin: 0px auto;
	padding: 20px;
}
#footer {
	height: 100px;
	background: #0099FF;
}
.footer {
	line-height: 80px;
	text-align: center;
	font-family: Arial;
	font-size: 16;
	color: #fff;
}
 
Zou je misschien uitleg kunnen geven bij de css file, want ik snap er vrij weinig van. Gewoon wat algemene uitleg bij elke #
 
Hierbij de toelichting bij de CSS code:


voor de gehele code is het zo dat je niet over een breedte hoeft tegen omdat hij van de buitenste div uitgaat en die is standaard van de body 100 % geef je de body tag een breedte van 800px wordt alles daar binnen getoont
Code: 
body{ /* Hiermee haal je de standaard wit rand weg die anders om je hele site getoond wordt */
	margin: 0;
}
p{ /* zodat je geen rand om je p tag hebt */
	margin: 0;
}
#header { /* hiermee geef je de header een achtergrond kleur en zorgt line-height er voor dat je tekst in het midden van de 100px staat als je hier een plaatje van wilt maken zou je de line-height kunnen vervangen door height */
	line-height: 100px;
	background: #0099FF;
}
#header p { /* deze regel had je al */
	font-family: Arial;
	font-size: 35;
	text-align: center;
}
#nav {  /* deze maakt het id nav 50 px hoog en een wit lijn van 1px onder en boven. */
	background: #469;
	height: 50px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
#logo { /* float left zorgt er voor dat de volgende div er naast kan komen te staan 
margin-left zorgt dat van de volledige 100% 20% van de linker kant af zit. en met de width op 20 % kom je totaal al uit op 40 % van de 100%;
en heeft net als de nav een border voor de witte lijnen. 
 */
	float: left;
	margin-left: 20%;
	height: 50px;
	width: 20%;
	background: #0099FF;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
#logo p { /* deze regel had je ook al */
	font-family: Verdana;
	font-size: 20;
	margin: 0;
	line-height: 50px;
	text-align: center;
}
#nav ul{ /* met de width op 55% zit je met de vorige 40% al op de 95% waardoor je nog 5 % mist deze zit in de margin van 2 % aan beide kant en de borders van 1px per stuk kom je totaal op ongeveer 100%  */
	width: 55%;
	float: left;
	padding: 0;
	line-height: 30px;
	margin: 10px 2%;
}
#nav li { 
	list-style-type: none; /* haalt bolletjes weg */
	float: left; /* dat het menu naast elkaar komt te staan  */
	background: #469; /* achtergrond kleur  */
}
#nav ul li a { /* text align  */
	text-align: center; /* tekst in het midden  */
	font-family: Arial; /* font arial  */
	text-decoration: none; /* onderstreep weg  */
	height: 30px; /* hoogte 30px  */
	width: 150px; /* breedte 150px  */
	display: block; /* dat hele blok aanklikbaar is  */
	color: #FFF; /* tekst kleur wit  */
	border: 1px solid #000000; /* lijn er om heen  */
	border-radius: 6px; /* afgeronde randjes  */
}
#nav ul ul {
	display: none; /* haalt het submenu weg  */
	position: absolute; /* anders verspringt je content */
	width: 150px; /* breedte submenu  */
	margin: 0;
	filter: alpha(opacity:70);
	opacity: 0.9;
	height: 100%; /* hoogte submenu zodat dat goed gaat met de animatie  */
	overflow: hidden; /* zorgt voor dat de animatie bij 0% kan beginnen anders krijg je meteen alles te zien   */
}

#nav ul ul li{
	float: none; /* zet het submenu onder elkaar  */
}
#nav ul li:hover ul {
	display: block; /* toont het submenu als je over de li gaat   */
	-webkit-animation: slideMenu 5s; /* safari chrome animatie van submenu  */
	animation: slideMenu 5s; /* safari chrome animatie van submenu  */
	-moz-animation: slideMenu 5s; /* safari chrome animatie van submenu  */
	height: 0px;
}

@-webkit-keyframes slideMenu
{
from {height: 0%; /* start de animatie met een hoogte van 0%  */}
to {height: 100%;/* eindigt de animatie met een hoogte van 100%  */}
}
/* voor elke brossers een ander script */
@keyframes slideMenu
{
from {height: 0%;}
to {height: 100%;}
}
/* voor elke brossers een ander script */
@-moz-keyframes slideMenu
{
from {height: 0%;}
to {height: 100%;}
}

#nav ul ul li a:hover {
	background: #CCC;
	color: #000;
}
#nav a:hover {
	color: #000;
}
#content {
	padding-top: 35px; /* geeft boven je content een balk van 35px */
	background: #0099FF;
}
.inner{
	width: 1163px; /* maakt je content 1163px breedt */
	background-color: #fff;
	margin: 0px auto;/* zet de content in het midden van de browser hiervoor is een breedte verplicht */
	padding: 20px; /* zorgt er voor dat de tekst in de content 20px van de rand af staat */
}
#footer {
	height: 100px;
	background: #0099FF;
}
.footer {
	line-height: 80px;
	text-align: center;
	font-family: Arial;
	font-size: 16;
	color: #fff;
}
 
Oke ik snap het wel een beetje, maar ik wil die animation weghebben.
Als ik hem weghaal en ik zet er neer visibility: visible dan gebeurt er niks, weet jij hoe ik dat moet doen?
 
dat heeft er mee te maken dat de hoogte op 0px staat, haal die weg en de overflow: hidden en het is opgelost.
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="navmenu">
<div class="navmenu">
</div> <!-- end .navmenu -->
</div> <!-- end #navmenu -->
<div id="content">
<div class="inner">
</div> <!-- end .inner -->
</div> <!-- end #content -->
<div id="footer">
</div>

</body>
</html>

body {
margin: 0;
}
p {
margin: 0;
}
#navmenu {
margin: 0;
height: 70px;
position: fixed;
width: 100%;
background: #999;
}
.navmenu {
margin-left: 500px;
background: #000;
height: 50px;
width: 600px;
}
#content {
margin-top: 100px;
margin-left: 0px;
background: #469;
width: 100%;
height: 600px;
}

Dit is een HTML en een CSS bestand.
En voor een of andere reden werkt margin niet goed.
Als ik eerlijk ben snap ik het probleem van position: absolute niet, het is misschien meer rekenwerk en het staat inderdaad meer vast, maar als dat alles is zie ik het probleem van position eigenlijk niet, ik vind het persoonlijk veel handiger.
Ik zal het hartstikke fijn vinden als iemand me kan vertellen wat de voordelen van margin tegenover position: absolute zijn.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan