Ik heb onderaan een scroll balk, hoe moet die weg?

Status
Niet open voor verdere reacties.
J

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Eigen Site</title>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<i><p class="TijsVerbeek">© 2013 Tijs Verbeek</p></i>
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Webhosting</a></li>
<li><a href="#">VPS</a>
<ul>
<li><a href="#">Minecrapt VPS</a></li>
<li><a href="#">Cloudbox VPS</a></li>
</ul>
</li>
<li><a href="#">Alle Producten</a></li>
</ul>
</div>
</div>
<div id="body">
<div class="box1">
</div>
</div>

</div>
</body>
</html>

#container {
width: 100%;
max-width: 100%;
}
#header {
position: absolute; top: 0px; left: 0px;
width: 100%;
height: 100px;
background: #fcfcfc;
}
.logo {
position: absolute; top: 10px; left: 50px;
height: 75px;
width: 250px;
border: 1px solid #000;
background: #fcfcfc;
}
.TijsVerbeek {
position: absolute; top: 15px; left: 1000px;
}
#navmenu {
position: absolute; top: 100px; left: 0px;
width: 100%;
height: 60px;
background: #333;
}
.navmenu {
position: absolute; top: 0px; left: 250px;
width: 100%;
height: 60px;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
height: 60px;
text-align: center;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 60px;
width: 150px;
display: block;
background: #333;
color: #fff;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.navmenu ul li:hover {
background: #ccc;
}
.navmenu ul li:hover ul {
visibility: visible;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #fff;
background: #999;
}
#body {
position: absolute; top: 160px; left: 0px;
background: #fcfcfc;
width: 100%;
height: 1000px;
}
.box1 {
position: absolute; top: 20px; left: 50px;
background: #ecf2f6;
width: 200px;
height: 400px;
border: 1px solid #000;
}

Dit is een HTML en een CSS bestand.
Onderaan deze pagina heb ik een scroll balk, hoe zorg ik dat deze scrollbalk weggaat?
 
Hij staat nog niet online....
En 'overflow-x:hidden;' helpt niet!
 
Het heeft geen zin om alles in een container te zetten en dan "position: absolute" te gebruiken. Verwijder deze en je scrolbalk zal verwijderen. Je zult wel je elementen opnieuw moeten schikken.
 
Waarom heeft dat geen zin? En hoe moet ik dan anders mijn element ergens neerzetten?
 
Met position absolute plaats je hem nietmeer in de box. Als je bij chrome of Mozilla op F12 duwt kan je je div's bekijken en zul je zien dat de hoogte van je container nul is. wat dus wilt zeggen dat je andere div's er niet echt inzitten. gebruik margin om divs in divs te positioneren.
 
Ik weet niet waar je de informatie vandaan hebt, maar ik ben bang dat deze niet klopt, want ik heb alleen dit veranderd:
.navmenu {
position: absolute; top: 0px; left: 250px;
width: 100%;
height: 60px;
}

Ik heb width: 100% verandert door width: 800px;
Het probleem is nu verholpen en wat je zegt over de container klopt helaas niet...
Ik vind zelf position absolute het makkelijkst te gebruiken omdat je dan precies weet waar alles staat.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan