this is the html:
html{
min-height: 100%;
}
body{
min-height: 100%;
}
.header {
background: url("bghero.png") no-repeat;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
font-family: Montserrat;
height: 200%;
width: 100%;
font-size: 70%;
}
#circle{
text-align: center;
position: absolute;
left: 2%;
top: 4%;
}
#big{
text-align: center;
position: absolute;
font-family: Times New Roman;
font-size: 700%;
top: 40%;
color: white;
right: 0%;
width: 100%;
}
#sml{
}
#ham{
text-align: center-right;
position: absolute;
top: 6%;
right:5%;
}
#src{
text-align: center-right;
position: absolute;
top: 5.8%;
right:11%;
}
#menu1{
text-align: center;
color: white;
right: 6%;
position: absolute;
top: 5.3%;
width: 100%;
margin: 0%;
}
#menu2{
text-align: center;
color: white;
right: 0%;
top: 5.3%;
width: 100%;
margin: 0%;
position: absolute;
}
#menu3{
text-align: center;
color: white;
position: absolute;
right: -6%;
top: 5.3%;
width: 100%;
margin: 0%;
}
#lowerfoto{
height: 40%;
width: 100%;
=}
#fteweit{
height: 40%;
width: 100%;
}
#fterblk{
height: 10%;
width: 100%;
}<div class="header">
<div class="background">
<img id="circle" src="circle.png" />
<div class="menu">
<a href="#">
<p id="menu1">Home</p>
</a>
<a href="#">
<p id="menu2">About</p>
</a>
<a href="#">
<p id="menu3">Contact</p>
</a>
</div>
<a href="http://www.google.com"><img id="src" src="src.png" /></a>
<img id="ham" src="ham.png" />
<div class="welcome">
<p id="big">Web Design</p>
<p id="sml">
Fusce dapibus, tellus ac cursus commodo, tortor mauris <br />
condimentum , ut fermentum massa justo sit amet <br />
erat a ante venenatis dapibus posuere velit <br />
</p>
</div>
</div>
</div>
<img id="lowerfoto" src="lower.png">
<div class="footer">
<img id="fteweit" src="fterwit.png">
<img id="fterblk" src="fterblk.png">
</div>and I have a white space in the right side of the website, and I can't get it off. What I did figured out, that the menu is making that space and when I remove the menu, there is no space. But I do need that menu, so what do I need to do in order that there will be no white space WHILE there is a menu?
how it looks like: http://prntscr.com/ak745y
The extra space on the left-hand and right-hand side of the website is being caused by the default margin.
To prevent this:
html, body {
margin: 0;
}
Update: Your ID #menu3 is causing the issue. My suggestion would be to put the elements inside ul like this:
<ul class="menu">
<li id="menu" style="margin-left: 40%;"><a href="#">Home</a></li>
<li id="menu" style="margin-left: 49%;"><a href="#">About</a></li>
<li id="menu" style="margin-left: 58%;"><a href="#">Contact</a></li>
</ul>
.menu li {
display: inline-block;
color: #fff;
text-align: center;
position: absolute;
top: 5.3%;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments