Zymic Webmaster Forums > Nav Bar Problem

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

k.digennaro

May 10 2008, 05:30 PM

So ive been working with CSS lately and im coming along, i still have a lot to learn but Ive learned alot about CSS. For me the best way to learn is to try things out and learn what does and doesnt work. I created a CSS just to test some things and to try to create a very simple layout. My goal was to creat a header with a nav bar right underneath it. I started my code, and everything works except for the nav bar and the 1 pixel gray line under it, can any one tell me whats wrong with this code?
Thanks,
Kevin

CODE

/* CSS Document */

body{
    padding:11px 0 14px 0;
    margin:0;
    background-color:#7f0000;
    color:#000;
}
div, h1, h2, p, form, label, input, textarea, img, span{
    margin:0; padding:0;
}

ul{
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:0;
}
.spacer{
    clear:both;
    font-size:0;
    line-height:0;
}
#header{
    background:url(images/header_bg.gif);
    width:1260px;
    height:30px;
    position:relative;
    margin:0 auto;
}

#header ul{
    background:url(images/header.gif);
    width:1260px;
    height:120px;
    position:relative;
        margin:0 auto;
        top:30px;
        padding:0 0 0 0;
}

#navbar{
    background:url(images/navbar.gif);
    width:1260px;
    height:35px;
    position:relative;
    margin:0 auto;
        top:150px;
        padding:0 0 0 0;
}

#navbarul{
    background:url(images/navbar_ul.gif);
    width:1260px;
    height:1px;
    position:relative;
    margin:0 auto;
        top:151px;
        padding:0 0 0 0;
}

Jetteh22

May 10 2008, 07:49 PM

Could you give us a picture or a link to an example please?

k.digennaro

May 10 2008, 07:57 PM

So here's the example, the gray part is the nav bar, and the blue and black is the actual header, but as you can see they are connected, I realize i have the background set as red in my code above, thats a mistake, but it shouldnt cause the problem im getting.

Bascially I create a black line, 30px high 1 wide for the black bar, then i had that repeated to create the black bar in css.

Next I created a blue bar 120 px high 1 px wide and repeated it to create the blue bar.

Both those worked when i coded them, but when i attempted to do it with the grey and then the dark gray line something went wrong.

Andrew

May 11 2008, 08:03 PM

Post your HTML, there are often mistakes in the html part. I don't really see anything wrong with the css part of it though, but I didn't scour the thing for errors either.

k.digennaro

May 11 2008, 10:59 PM

edit:
Okay I fixed the html, but im still having the same problem.
CSS:

CODE

/* CSS Document */

body{
    padding:11px 0 14px 0;
    margin:0;
    background-color:#ffffff;
    color:#000;
}
div, h1, h2, p, form, label, input, textarea, img, span{
    margin:0; padding:0;
}

ul{
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:0;
}
.spacer{
    clear:both;
    font-size:0;
    line-height:0;
}

/* ---------------------Header Starts------------- */

#header{
    background:url(images/header_bg.gif);
    width:1260px;
    height:30px;
    position:relative;
    margin:0 auto;
}

#header ul{
    background:url(images/header.gif);
    width:1260px;
    height:120px;
    position:relative;
        margin:0 auto;
        top:30px;
        padding:0 0 0 0;
}
#header ul li a{
    display:block;
    background:url(images/nav_bg.gif) 0 0 repeat-x;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    color:#344A04;
    background-color:inherit;
    text-decoration:none;
}
#header ul li a:hover{
    background:url(images/nav_hover1.gif) 0 0 repeat-x;
    color:#fff;
    background-color:inherit;
}
#header ul li a.hover{
    display:block;
    background:url(images/nav_hover.gif) 0 0 repeat-x;
    color:#fff;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    background-color:inherit;
    text-decoration:none;
    cursor:text;
}
/*-------------------------Header Ends----------------------- */

/* ----------------------------Nav bar Starts------------------ */
#navbar{
    background:url(images/navbar.gif);
    width:1260px;
    height:35px;
    position:relative;
    margin:0 auto;
        top:150px;
        padding:0 0 0 0;
}

#navbarul{
    background:url(images/navbar_ul.gif);
    width:1260px;
    height:1px;
    position:relative;
    margin:0 auto;
        top:151px;
        padding:0 0 0 0;
}
/* ------------------------------Nav Bar ends------------------------ */

HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>K.DiGennaro</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
<ul>
<li><a href="#" class="hover">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Discography</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">The Team</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

k.digennaro

May 12 2008, 01:10 AM

maybe im doing something wrong because i keep having glitches in my CSS doc heres the same one above just expanded a little bit and it doesnt work...

CODE

/* CSS Document */

body{
    padding:11px 0 14px 0;
    margin:0;
    background-color:#ffffff;
    color:#000;
}
div, h1, h2, p, form, label, input, textarea, img, span{
    margin:0; padding:0;
}

ul{
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:0;
}
.spacer{
    clear:both;
    font-size:0;
    line-height:0;
}

/* ---------------------Header Starts------------- */

#header{
    background:url(images/header_bg.gif);
    width:1260px;
    height:30px;
    position:relative;
    margin:0 auto;
}

#header ul{
    background:url(images/header.gif);
    width:1260px;
    height:120px;
    position:relative;
        margin:0 auto;
        top:30px;
        padding:0 0 0 0;
}
#header ul li a{
    display:block;
    background:url(images/nav_bg.gif) 0 0 repeat-x;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    color:#344A04;
    background-color:inherit;
    text-decoration:none;
}
#header ul li a:hover{
    background:url(images/nav_hover.gif) 0 0 repeat-x;
    color:#fff;
    background-color:inherit;
}
#header ul li a.hover{
    display:block;
    background:url(images/nav_hover1.gif) 0 0 repeat-x;
    color:#fff;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    background-color:inherit;
    text-decoration:none;
    cursor:text;
}
/*-------------------------Header Ends----------------------- */

/* ----------------------------Nav bar Starts------------------ */
#navbar{
    background:url(images/.gif);
    width:1260px;
    height:35px;
    position:relative;
    margin:0 auto;
        top:150px;
        padding:0 0 0 0;
}

#navbarul{
    background:url(images/.gif);
    width:1260px;
    height:1px;
    position:relative;
    margin:0 auto;
        top:151px;
        padding:0 0 0 0;
}
/* ------------------------------Nav Bar ends------------------------ */

/* ----------------------------Body Starts------------------------ */
#bodybackground{
  background:url(images/background_bg.gif)
    width:1260px;
    height:500px;
    position:relative;
    margin:0 auto;


    /*---------------------------Body Ends---------------------------*/

MrTouz

May 12 2008, 10:41 AM

can you post the actual layout once its on the web, instead of a copy pasted picture.

My question, is it important for you to have the blue black dark grey light grey separated ? i mean being each on of them a different element ? try to think simpler probably make ONE picture with a height of what ever you need starting with black than dark blue and than the other colors with a 1px width and make that one repeat.

CODE

background:url(images/nav_bg.gif) 0 0 repeat-x;

what are the 2 "0" for ? after : .gif) --->>> 0 0 <<<---repeat-x;

k.digennaro

May 12 2008, 06:03 PM

QUOTE(MrTouz @ May 12 2008, 10:41 AM)

CODE

background:url(images/nav_bg.gif) 0 0 repeat-x;

what are the 2 "0" for ? after : .gif) --->>> 0 0 <<<---repeat-x;

i dont remember why i put those in, thats a good suggestion, maybe ill try that out now and then ill post if it works or not, thanks

k.digennaro

May 12 2008, 06:33 PM

that worked well, no glitches, now that i have that, i have my links for my nav bar, the gray section of the header, wat comand do i need to add to pad the text so its lined un horizontally and inside the gray bar? and do i do this on my html code, or my css code?

Example of page

Html Code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>K.DiGennaro</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
<ul>
<li class="First"><a href="#" class="hover">Home</a></li>
<li class="Second"><a href="#">About Us</a></li>
<li class="Third"><a href="#">Pictures</a></li>
<li class="Fourth"><a href="#">Gallery</a></li>
<li class="Fifth"><a href="#">Discography</a></li>
<li class="Sixth"><a href="#">News</a></li>
<li class="Seventh"><a href="#">Legal</a></li>
<li class="Eight"><a href="#">The Team</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

CSS Code:

CODE

/* -----------------CSS Document----------- */

body{
    padding:11px 0 14px 0;
    margin:0;
    background-color:#ffffff;
    color:#000;
}
div, h1, h2, p, form, label, input, textarea, img, span{
    margin:0; padding:0;
}

ul{
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:0;
}
.spacer{
    clear:both;
    font-size:0;
    line-height:0;
}

/* ---------------------Header Starts------------- */

#header{
    background:url(images/header.gif);
    width:1260px;
    height:180px;
    position:relative;
    margin:0 auto;
}
#header ul li a{
    display:block;
    background:url(images/nav_bg.gif) repeat-x;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    color:#344A04;
    background-color:inherit;
    text-decoration:none;
}
#header ul li a:hover{
    background:url(images/nav_hover.gif) repeat-x;
    color:#fff;
    background-color:inherit;
}
#header ul li a.hover{
    display:block;
    background:url(images/nav_hover1.gif) repeat-x;
    color:#fff;
    padding:0 14px;
    font:bold 11px/27px Arial, Helvetica, sans-serif;
    background-color:inherit;
    text-decoration:none;
    cursor:text;
}
/*-------------------------Header Ends----------------------- */

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.