CSS Nav Bar Not Working!!!!!

[elite_prodigy]

Okay, this is the Css for the navigation bar:

/* links in NavBar 
*******************/

.navbar{

border : 0;
width: 100%;
margin : 0;
font-size : 14px;

}

.navbar a:link{

background-image : URL("http://www.exembarstudios.exofire.net/images/nav_link.jpg");
border-top : solid #000000 thin;
border-bottom : solid red thin;
text-decoration : none;
color : #000000;

}


.navbar a:visited{

background-image : URL("http://www.exembarstudios.exofire.net/images/nav_link.jpg");
border-top : solid #000000 thin;
border-bottom : solid red thin;
text-decoration : none;
color : #000000;

}


.navbar a:active{

text-align : center;

}


.navbar a:hover{

text-align : center;

}

 

And this is the HTML for the NavBar:

 

  
<div class="navbox">

    <div class="title">Navigation</div>
    THESE DON'T WORK!<br />
    <?php echo $link_list; ?>

  </div>

 

I can't even begin to think why this isn't working, I've tried EVERYTHING i can think of and I'm still not getting it.

 

I want a bar to streatch all the way accross the box, not just the link to be highlighted.

 

Here is the page: http://exembarstudios.exofire.net.

 

Any help would be appreciated.

[dropfaith]

set a width to your link thats the same size as your container

[BoltZ]

To be honest sir I am not sure what place you are talking about on your site. Its very confusing. Can you point to it in an image or screenshot of your site?

[dropfaith]

its the left side above the ad

[BoltZ]

Oh well then your solution is right lol. I was confused for like 2 minutes even after you said that and had to re-read..yea anyway just do that..

[elite_prodigy]

I've tried:

 

width : 100%;

 

And:

 

width : 120px;

 

The width of the nav box is 120 pixels. With both I'm getting just a red highlight. I've even tried adding them to a sepparate DIV and making that DIV the same width as the nav box.

 

I've tried making it an image, but that doesn't work.

 

I'm at a loss. I've gotten a lot of great help here before, and I know you guys will be able to help me solve this. I'll try the width again as soon as I get back to my office, but I'm almost positive that I've added it before and that it didn't work.

 

Thanks for all of your help.

[BoltZ]

Er well im at school so I can't view it now because the firewall blocks it. Just want you to know that I will be working on it later.

 

In the mean time

 

Which div did you give the width to?

[DarkWater]

I hate tell you this, but the background image is very painful on my eyes and it looks like one of those funky sites from the 90's and no functionality.  =X  You should probably start from scratch and make it umm...cleaner and easier on the eyes.  Just imo.

 

Also, on your links, the <div> and <a> are incorrectly nested.  Try flipping the closing tags.

[SuperBlue]

The a element is an inline element by default. You need to apply display:block; to the navbar link, this can be done like below:

.navbar a {
display: block;
}

 

It would make more sense to use an unordered or ordered list for your navigation links since it allows for better styling, and may be more accessible.

 

Getting rid of default list style is usually done like below.

ol {
list-style-type: none;
margin: 0;padding: 0;
}

Which would also render the list the same cross-browser.

 

In any case, using a width of 100% may be the obvious choice, that way you only need to change the width one place in the CSS instead of two or more for each column. Using a background-image or color has no effect, so use what you want, just keep in mind images takes longer to load.

[elite_prodigy]

I'm developing this site for a company I'm working for at the moment.

 

The background image will only be to the left and then the rest will be black.

 

I forget who said it but if you could see the site control pannel I've developed you would understand that this site is far from "unfunctionable" or whatever.

 

Thanks, I didn't realize the tads were flipped.

 

I'm not overly worried about looks at the moment, I want to finish linking the scp and get everything working. But this nav bar is bugging me so frieking badly.

[dropfaith]

this is tested change your css to this

<style>
body{

background-image : URL("http://www.exembarstudios.exofire.net/images/Backgroundextended.jpg");
color : #FFFFFF;

}

.reqAd{

margin-left : 30%;

}

.body_container{

width : 70%;
height : 100%;
margin-left : 15%;

}

.header_container{

width : 99%;

}

.header_img{

width : 15%;
height : 100px;
clear: right;
float: left;
background-image : URL("http://www.exembarstudios.exofire.net/images/Dragon.png");
background-repeat: no-repeat;

}

.header_text{

width : 83%;
height : 100px;
clear : left;
float : right;
background-image : URL("http://www.exembarstudios.exofire.net/images/exembar.png");
background-repeat: no-repeat;

}

.navbox{

border : solid darkred thin;
float : left;
clear : right;
width : 120px;
margin-top : 20px;
text-align : center;

}

.content{

width : 500px;
border : solid darkred thin;
clear : left;
float : right;
margin-right : 15px;
margin-top : 25px;

}

.adzone{

border : solid darkred thin;
float : left;
clear : left;
width : 120px;
margin-top : 20px;

}

.footer{

margin-top : 20px;
width : 99%;
position : bottom;
clear : left;
text-align : center;

}

.spacer_left{

width : 15%;
border : solid;
float : left;
clear : right;

}

.spacer_right{

float : right;
clear : right;
width : 10%;
border : solid;

}

.title{

border : 0;
width: 100%;
margin : 0;
border-bottom: solid darkred thin;
font-size : 12px;

}

/* links in NavBar 
*******************/
/*
.navbar{

border : 0;
width: 100%;
margin : 0;
font-size : 14px;

}*/

.navbox a:link{

background-image : URL("http://www.exembarstudios.exofire.net/images/nav_link.jpg");
border-top : solid #000000 thin;
border-bottom : solid red thin;
text-decoration : none;
color : #000000;display:block;
width : 100%;

}


.navbox a:visited{

background-image : URL("http://www.exembarstudios.exofire.net/images/nav_link.jpg");
border-top : solid #000000 thin;
border-bottom : solid red thin;
text-decoration : none;
color : #000000;
width : 100%;

}


.navbar a:active{

text-align : center;

}


.navbar a:hover{

text-align : center;

}
</style>

[elite_prodigy]

Okay, thanks for all of you help guys, I've made some changes to see if I could get this to work.

 

Here is the CSS for the links inside the nav box:

 

/* links in NavBar 
*******************/

.navbox a:link{

background-color : #FFFFFF;
margin-top : 1px;
margin-bottom : 1px;
margin-left : 0;
margin-right : 0;
text-decoration : none;
color : #000000;
height : 12px;
width : 100%;
text-align : center;

}

.navbox a:visited{

background-color : #FFFFFF;
margin-top : 1px;
margin-bottom : 1px;
margin-left : 0;
margin-right : 0;
text-decoration : none;
color : #000000;
height : 12px;
width : 100%;
text-align : center;

}

.navbox a:active{

background-color : darkgray;
margin-top : 1px;
margin-bottom : 1px;
margin-left : 0;
margin-right : 0;
text-decoration : none;
color : #000000;
height : 12px;
width : 100%;
text-align : center;

}

.navbox a:hover{

background-color : lightgray;
margin-top : 1px;
margin-bottom : 1px;
margin-left : 0;
margin-right : 0;
text-decoration : none;
color : #000000;
height : 12px;
width : 100%;
text-align : center;

}

 

(Not sure what the hex is for dark and light gray, I just want the damn thing to go the whole way accross.)

 

This is the code for the actual nav box it self:

 

<div class="navbox">

   <div class="title">Navigation</div>
   <?php echo $link_list; ?>

</div>

 

This code renders the $link_list, which obviously gets the nav list from the DB and puts them in the box:

 

<?php

include 'config.php';

mysql_select_db('exembar_site', $conn);

$query = "SELECT * FROM `navigation`";
$result = mysql_query($query, $conn);

while($list = mysql_fetch_array($result)){

$id = $list['id'];
$disp = $list['display'];
$url = $list['url'];

$link_list .= '<div class="link"><a href="'.$url.'?id='.$id.'">'.$disp.'</a></div>';

}

?>

 

And if it matters at all, this is the CSS for the nav box it self:

 

.navbox{

border : solid darkred thin;
float : left;
clear : right;
width : 120px;
margin-top : 20px;
text-align : center;

}

 

But arn't I modifying .link and not the anchor when I'm doing this? Why would I need display:block?

[elite_prodigy]

Okay, display:block worked, thanks! A lot!

 

I don't know why it worked, but it did. Would you please explain the reason that it worked? I'm a programmer, and not neccessarily skilled all that much with CSS and HTML development.

 

I'm working from my cell phone right now, so I'll resolve this as soon as I get home to use my computer.

[dropfaith]

dark grey= #333  or #666 things like that

light grey  #ccc is a light grey

 

display: block

 

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

 

 

display: inline

 

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

[elite_prodigy]

Thanks. I had some misconception that I was modifying something else but then I had the grand epiphany which led to believe that display : block was the right way to do this.