Reputation: 1
I have looked through previous questions on this topic but after following the advice I could find and looking through the full CSS, I can´t get my head around this...
My width on body, html is set to 100% and I can´t find anything the inflicts on that in terms of padding or such.
Could anyone please point out what the problem is? Might be something really simple that I´m just missing.
Here is the website: www.niklaskoskela.com
Sorry for not posting just a snippet or so but I really can´t find the problem.
Regards, Niklas
Upvotes: 0
Views: 1181
Reputation: 317
I agree with damienoneill2001 this is the issue
change your css as follows
.nav ul {
float: right;
margin-left: 20px;
margin-top: 1.6%;
padding-top: 1%;
width: 40%;
}
remove width from body width:100%
it will take auto
width
body {
background-color: #F5F5F5;
height: 100%;
text-decoration: none;
}
lets update some css for navigation to take it right corner
.nav ul li a.next img {
float: right;
margin-right: 20%;
opacity: 0.7;
text-decoration: none;
width: 15%;
}
.nav ul li a.close img {
float: left;
margin-left: 8%;
opacity: 0.7;
text-decoration: none;
width: 15%;
}
.nav ul li a.previous img {
float: left;
margin-left: 19%;
opacity: 0.7;
text-decoration: none;
width: 15%;
}
.nav ul {
float: right;
margin-top: 1.6%;
padding-top: 1%;
width: 24%;
}
also please update hover
classes for width
and margin
Upvotes: 0
Reputation: 473
I think that problem is with the div id="wrapper" height. remove the height:100% and check..
#wrapper {
width: 100%;
/*height: 100%;*/
}
Upvotes: 0
Reputation: 499
Your problem seems to be on your .nav ul
. The margin-right: -8%;
seems to be the issue for me.
For anyone else looking, you will need to click into one of Niklas' projects, such as http://www.niklaskoskela.com/hkr.html
Upvotes: 1