Reputation: 13
.bg {
opacity:100%;
margin-right:auto;
margin-left:auto;
background-image:url(../Images/navbg.png);
background-size:84.5em 6em;
background-position:center;
background-repeat:no-repeat;
width:84.5em;
height:2.6875em;
z-index:500;
}
.fixed {
position:fixed;
top:0;
left:0;
z-index: 20;
}
@media (max-width:1219px){
.fixed{
position:absolute;
width:84.5em;
top:0;
left:0;
margin: 0em 0px 0px 0em;
}
}
ul {
height: 1.25em;
width: 68em;
font-family:Verdana, Geneva, sans-serif;
position:relative;
}
li {
float: left;
list-style: none;
margin: 0em 0em;
text-transform: uppercase;
letter-spacing: .25em;
color: #000;
font-family:Verdana, Geneva, sans-serif;
border-top-left-radius: 1em 1em;/*Rounded Corners*/
border-bottom-left-radius: 1em 1em;/*Rounded Corners*/
border-top-right-radius: 1em 1em;/*Rounded Corners*/
border-bottom-right-radius: 1em 1em;/*Rounded Corners*/
}
@media (max-width:1219px) {
li {
width:auto;
height:1.45em;
line-height:1.5em;
padding:0px;
}
}
#nav{
margin: -2.45em auto 0px 9.5em;
}
#nav a{
text-decoration: none;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(102,102,102,.0);
font-family:Verdana, Geneva, sans-serif;
color:#525252;
font-size:.77em;
position:relative;
display:block;
line-height:2em;
}
@media (max-width:1219px) {
#nav a{
text-decoration: none;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(102,102,102,.0);
font-family:Verdana, Geneva, sans-serif;
color:#525252;
font-size:11px;
position:relative;
display:block;
line-height:2em;
}
}
#nav a:hover{
color: #fff;
text-shadow: -2px 2px 2px #C9C9C9;
font-size:.77em;
position:relative;
}
@media (max-width:1219px) {
#nav a:hover{
color: #fff;
text-shadow: -2px 2px 2px #C9C9C9;
font-size:11px;
position:relative;
}
}
.blockhover{
border-top-left-radius: 0em 0em;/*Rounded Corners*/
border-bottom-left-radius: 0em 0em;/*Rounded Corners*/
border-top-right-radius: 0em 0em;/*Rounded Corners*/
border-bottom-right-radius: 0em 0em;/*Rounded Corners*/
}
ul.drop a {
color: #fff;
font-family: Verdana;
font-size: .875em;
text-decoration: none;
position:relative;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
color: #fff;
position:relative;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: .3125em .625em;
}
ul.drop li:hover{
position: relative;
z-index: 599;
cursor: default;
background: #CDBF85;
color:#fff;
}
ul.drop li.hover, {
position: relative;
z-index: 599;
cursor: default;
background: #C5B369;
color:#fff;
}
/*dropdown background*/
ul.drop ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 12.1875em;
background:#D3D3D3;
height:auto;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -.125em;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible;
}
ul.drop li.hover {
-webkit-transition: all .75s ease-in;
-moz-transition: all .75s ease-in;
-ms-transition: all .75s ease-in;
-o-transition: all .75s ease-in;
transition: all .75s ease-in;
}ul.drop li.hover:active {
background: #BCBA72;
}
Me and a few others are redesigning our high school web page, as it desperately needs it! There is a weird margin issue of some sort that is making a blank gap to the right of the page. We cannot figure out what the cause is to save our lives. We are trying to implement a fixed navigation and we think that is what's causing it, but we just don't know where in the code.
Here is our most current version we have live, if anyone is willing to validate our syntax or explain an easier way to achieve a more fluid fixed navigation, it would mean a lot!
<div class="fixed" align="center">
<div class="bg"></div>
<div id="nav">
<ul class="drop hover">
<li><a href="http://lshs.leesummit.k12.mo.us/">Home</a></li>
<li><a href="#">Academics</a>
<ul>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/apluslshs/index.html">A+</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/apilshs/index.html">API</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/cslshs/index.html">Community Service</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/iblshs/index.html">IB at LSHS</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/guidance/secprogramofstudy/secprogramofstudy.pdf">Programs of Study</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/secss/default.htm">Summer School</a></li>
</ul>
</li>
<li><a href="http://lshs.leesummit.k12.mo.us/activitieslshs/index.htm">Clubs/Activities</a></li>
<li><a href="http://www.ihigh.com/lstigers/index.html">Sports</a></li>
<li><a href="#">Calendars</a>
<ul> <li class="blockhover"><a href="http://embed.revdel.com/4/allschool_monthview.php">All School Calendar</a></li>
<li class="blockhover"><a href="http://embed.revdel.com/4/athleticcalendar.php">Athletic Calendar</a></li>
<li class="blockhover"><a href="http://www.lsr7.org/district/about-us/">District Calendar</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/calendar/calendar.pdf">LSHS.PDF</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/tutoring/calendar.pdf">Tutoring Calendar</a></li>
</ul>
</li>
<li><a href="#">Counseling</a>
<ul> <li class="blockhover"><a href="http://sites.lsr7.org/lshscounseling">Counseling Center</a></li>
<li class="blockhover"><a href="http://www.lsr7.org/wp-content/uploads/2012/07/2013-2014-POS-Complete.pdf">Program of Study</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/transcriptslshs/instructions.pdf">Transcripts</a></li>
</ul>
</li>
<li><a href="#">Media Center</a></li>
<li><a href="#">Parents/Alumni</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/alumnilshs/index.html">Alumni</a></li>
<li class="blockhover"><a href="http://lshstigerboosters.webs.com/">Booster Clubs</a></li>
<li class="blockhover"><a href="#">Building Emails</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/hoflshs/index.html">Hall of Fame</a></li>
<li class="blockhover"><a href="http://www.leesummit.k12.mo.us/nutrition/default.htm">Nutrition Services</a></li>
<li class="blockhover"><a href="http://www.lshsptsa.com/">PTSA/Project Grad</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/plannerlshs/planner.pdf">Student Handbook</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/transcriptslshs/instructions.pdf">Transcripts</a></li>
</ul>
</li>
<li><a href="#">Staff</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/alpha.html">Alphabetical Listing</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/index.html">Staff by Department</a></li>
</ul>
</li>
<li><a href="#">Student Life</a>
<ul> <li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/artgallery/art.html">Art Gallery</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/schedule/index.html">Bell Schedule</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/courtwarming/index.html">Courtwarming 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/activitieslshs/handbook/R7%20DistHB.pdf">District Handbook</a></li>
<li class="blockhover"><a href="#">Fall Assembly 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/faqlshs/index.html">FAQ</a></li>
<li class="blockhover"><a href=" http://lshs.leesummit.k12.mo.us/eventslshs/schedule/index.html#finals">Finals Schedule</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/fe/index.html">Foreign Exchange</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/homecoming/index.html">Homecoming 2012</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/jrpage/index.html">Junior Information</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/stafflshs/sro/index.html">Recource Officer</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/eventslshs/srpage/index.html">Senior Information</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/somlshs/index.htm">Student of the Month</a></li>
<li class="blockhover"><a href="http://lshs.leesummit.k12.mo.us/plannerlshs/planner.pdf">Student Planner</a></li>
</ul>
</li>
</ul>
</div><!--Nav Close-->
</div><!--.Fixed Close-->
<br />
Upvotes: 1
Views: 86
Reputation: 910
It is actually do to a margin-left is set in the fluidtiger.css You also have width set to 100% and margin is outside, so any margin will add width to your block.
Just want to add this nice little page for reference about the box model if anyone else sees this page. http://www.w3.org/TR/CSS2/box.html
Upvotes: 0
Reputation: 11148
Add right: 0
to .fixed
and the navigation will automatically stretch and center itself.
Also, there are many things that you could clean up on the page, one of them being the unnecessary use of the z-index
. First, you shouldn't need to use the property as much as you do; and second, you can keep it simple, meaning, you shouldn't use a number like 597
when you can simply use 10
, 20
, etc.
Upvotes: 1