I'm having a bit of trouble with CSS at the moment. I cannot get my navigation bar to span the width of my main body/wrapper in my website.

 

Here is the website in question.... Link.

 

As you can see, my navigation bar doesn't span the width of the main body, it cuts off at the last block button "contact".

 

How do I make it span the entire width of my main body?

 

I have this code at the start of my CSS page, and I wonder is this has anything to do with it?.....

 

 

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define visible focus styles! 
:focus {
outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

 

 

 

And here is my actual CSS codes of the navigation section..........

 

#nav ul li a{
     font-family:Tahoma, Geneva, sans-serif;
  font-size:18px;
  border-bottom:3px solid #f00;
  text-decoration:none;
  background-image:url(../imgs/mainBack.png);
  float:left;
  display:block;
  background-color:transparent;
  padding:10px 20px 10px;


}

 

 

 

Thanks!

Edited July 16, 201214 yr by Digitalme

The nav bar does span the whole width:

 

.nav ul {
outline: 1px dotted red;
}

The nav bar does span the whole width:

 

.nav ul {
outline: 1px dotted red;
}

 

 

I'm not sure what you mean?

Should I add that piece of code?

Edited July 16, 201214 yr by Digitalme

If you add that, it'll show you the edges of the <ul> that makes up your nav bar. What you're done is set a background on the individual items in the nav bar but not the nav bar itself.

If you add that, it'll show you the edges of the <ul> that makes up your nav bar. What you're done is set a background on the individual items in the nav bar but not the nav bar itself.

 

 

I tried that code, and yeah I see what you mean. But how do I add the background colour on the nav bar itself so it can visibly be seen spanning the whole width of the main body?

 

 

 

-EDIT ...

 

I've just added this code, but it didn't make any difference....

 

#nav ul {
  background:#FFF;
}

Edited July 16, 201214 yr by Digitalme

how do I add the background colour on the nav bar itself so it can visibly be seen spanning the whole width of the main body?

 

#nav ul {
    background-image: url(../igs/mainBqck.png); 

#nav ul li a{
     font-family:Tahoma, Geneva, sans-serif;
         font-size:18px;
         border-bottom:3px solid #f00;
         text-decoration:none;
         float:left;
         display:block;
         padding:10px 20px 10px;         
}

#nav ul {
    background-image: url(../igs/mainBqck.png); 

#nav ul li a{
     font-family:Tahoma, Geneva, sans-serif;
         font-size:18px;
         border-bottom:3px solid #f00;
         text-decoration:none;
         float:left;
         display:block;
         padding:10px 20px 10px;         
}

 

 

I just tried this code and it didn't work too.

That's because I made two typo's. Gold star to anyone that can spot 'em.

 

#nav ul {
    background-image: url(../igs/mainBack.png); 
}
#nav ul li a{
     font-family:Tahoma, Geneva, sans-serif;
         font-size:18px;
         border-bottom:3px solid #f00;
         text-decoration:none;
         float:left;
         display:block;
         padding:10px 20px 10px;         
}

Could you give the navsection a background color and a z-index less than your post it note?

 

Do you mean you want to background color of the nav section to span the entire width of your main content area? If so you currently cannot style the navsection id as it is commented out so you would need to remove that and then style accordingly.

Edited July 16, 201214 yr by jheg

Could you give the navsection a background color and a z-index less than your post it note?

 

Do you mean you want to background color of the nav section to span the entire width of your main content area? If so you currently cannot style the navsection id as it is commented out so you would need to remove that and then style accordingly.

 

 

Hey, is it commented out?

/*=========NAVIGATION SECTION================*/

/*
#nav ul li a{
     font-family:Tahoma, Geneva, sans-serif;
  font-size:18px;
  color:#000;
  text-decoration:none;

  float:left;
  display:block;
  background-color:#cc0505;
  padding:10px 20px 10px;
  border-right:1px solid #882828;
  background-image:url(../imgs/shinedim3.png);
}

#nav ul li a:hover{
background-color:#700e0e;
color:#FFF;
}


#nav ul li a:active{
background-color:#d30606;

}


#navsection #nav ul li #currentpage{
	background-color:#941111;
}

#navsection{
     background-color:#cc0505;
	 background-image:url(../imgs/shinedim3.png);

}

*/

 

It seems so mate

/*=========NAVIGATION SECTION================*/

/*
#nav ul li a{
     font-family:Tahoma, Geneva, sans-serif;
  font-size:18px;
  color:#000;
  text-decoration:none;

  float:left;
  display:block;
  background-color:#cc0505;
  padding:10px 20px 10px;
  border-right:1px solid #882828;
  background-image:url(../imgs/shinedim3.png);
}

#nav ul li a:hover{
background-color:#700e0e;
color:#FFF;
}


#nav ul li a:active{
background-color:#d30606;

}


#navsection #nav ul li #currentpage{
	background-color:#941111;
}

#navsection{
     background-color:#cc0505;
	 background-image:url(../imgs/shinedim3.png);

}

*/

 

It seems so mate

 

 

Lol, yeah i forgot about that. I did that before I copied and pasted it, but I revmved it.