[SOLVED] My nav images

thewebkid · #1 Dec 23rd, 2007, 15:27

My web server is down for some reason or another, luckily I have more than one.

http://adrianrodriguez.frihost.net/index.htm

When you go there on Firefox, the navigation is there, but it doesn't show on Internet explorer. How can I fix that?

dab42pat · #2 Dec 23rd, 2007, 15:48

there is no width and height setting on your nav images.

you have width and height settings like this width: 52; try width: 52px;

use px on all your width and height settings.

hope this helps.

thewebkid · #3 Dec 23rd, 2007, 16:27

That didn't work for me...should I set the width and height of the div?

Stuart · #4 Dec 23rd, 2007, 16:31

I looked at your CSS. You didn't set correct widths and heights at all! You're still missing "px" for every one!

thewebkid · #5 Dec 23rd, 2007, 16:38

O sorry, I tried it on my computer before I uploaded it. It didn't work on my computer, so I didn't think it would work on the internet.

dab42pat · #6 Dec 23rd, 2007, 16:46

have you tried it online. the px missing off your width and height settings is stopping your css from validating.

thewebkid · #7 Dec 23rd, 2007, 16:50

Yes I just put it online. And yes it is validated. I still get the problem though.

Aso · #8 Dec 23rd, 2007, 17:30

Your last anchor closing tag is incomplete. You need to fix that.

Then to fix your IE problem you need some text within the anchor. For example

Code: Select all

<li id="nav2"><a href=" ">text here</a></li>

Then add this declaration in your CSS to hide the text:

Code: Select all

#nav a {
text-indent: -5000px;
}

thewebkid · #9 Dec 23rd, 2007, 17:36

That causes a problem in firefox now and still doesnt work on ie

Aso · #10 Dec 23rd, 2007, 17:40

You need

Code: Select all

#nav a {
display: block;
}

thewebkid · #11 Dec 23rd, 2007, 21:21

Now it makes them line up on top of each other, and not in a line.

dab42pat · #12 Dec 23rd, 2007, 21:53

give this a go.

HTML: Select all

#nav li { 
display : inline;
} 
#nav { 
float : right;
margin-right : 40px;


} 
#nav1 a { 
background-image:url(images/nav1.gif);

    width:51px;
    height:37px;
    float: left;
    
    text-align: center;
    display: block;            

} 
#nav1 a:hover { 
background : url(images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav1 a:active { 
background-image: url(images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav2 a { 
background : url(images/nav2.gif) no-repeat;
width : 52px;
height : 37px;
float: left;
display: block;
} 
#nav2 a:hover { 
background : url(images/nav2-2.gif) no-repeat;
width : 52px;
height : 37px;
display:inline;
} 
#nav3 a { 
background : url(images/nav3.gif) no-repeat;
width : 72px;
height : 37px;
float: left;
display: block;} 


#nav3 a:hover { 
background : url(images/nav3-2.gif) no-repeat;
width : 72px;
height : 37px;
display:inline;
} 
#nav4 a { 
background : url(images/nav4.gif) no-repeat;
padding : 17px 45px 0 10px;
width : 68px;
height : 37px;
float: left;
display: block;} 


#nav4 a:hover { 
background : url(images/nav4-2.gif) no-repeat;
width : 68px;
height : 37px;
display:inline;
}

I'm sure there are some short cuts you could take but this should work for now.

thewebkid · #13 Dec 24th, 2007, 01:39

Now it's really messed up....what could it be?

Stuart · #14 Dec 24th, 2007, 02:04

OK. I fixed your code and tested it. It should work now.

Entire CSS:

Code: Select all

body 
{
    background-color: #303B4A; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
    color: #303B4A;
 }
 
    /*LAYOUT STYLES*/
 
#container 
{
    background-image: url(http://adrianrodriguez.frihost.net/images/bg.gif); 
    background-repeat: repeat-y; 
    width: 840px; 
    height: 1000px;
    text-align: center; 
    margin: 0px auto 0px auto;
 }
 
#head 
{
    text-align: center;
}

    /*HEADER*/

#head img 
{
    margin-top: 10px; 
    border: 0;
 }
 
    /*NAVIGATION*/
 
#nav li { 
display : inline;
} 
#nav { 
float : right;
}
#nav ul li a {
padding : 17px 20px 0 10px;
}
#nav ul li a span {
display:none;
}
#nav1 a 
{
    background:url(http://adrianrodriguez.frihost.net/images/nav1.gif) no-repeat;
    width:51px;
    height:37px;
    float: left;
    text-align: center;
    display: block;
} 
#nav1 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav1 a:active { 
background-image: url(http://adrianrodriguez.frihost.net/images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav2 a { 
background : url(http://adrianrodriguez.frihost.net/images/nav2.gif) no-repeat;
width : 52px;
height : 37px;
float: left;
display: block;
} 
#nav2 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav2-2.gif) no-repeat;
width : 52px;
height : 37px;
display:inline;
} 
#nav3 a { 
background : url(http://adrianrodriguez.frihost.net/images/nav3.gif) no-repeat;
width : 72px;
height : 37px;
float: left;
display: block;} 


#nav3 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav3-2.gif) no-repeat;
width : 72px;
height : 37px;
display:inline;
} 
#nav4 a { 
background : url(http://adrianrodriguez.frihost.net/images/nav4.gif) no-repeat;
width : 68px;
height : 37px;
float: left;
display: block;} 


#nav4 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav4-2.gif) no-repeat;
width : 68px;
height : 37px;
display:inline;
}

Entire HTML:

HTML: Select all

<!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>
<title>Adrian Rodriguez | Web and Graphic Designer</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
    <div id="head">
    <a href="adrian-rodriguez.net"><img src="images/header.gif" alt="Adrian Rodriguez | Web and Graphic Designer" /></a>
    </div>

    <div id="nav">
    <ul>
    <li id="nav1"><a href="index.htm"><span>Home</span></a></li>
    <li id="nav2"><a href=" "><span>About</span></a></li>
    <li id="nav3"><a href=" "><span>Portfolio</span></a></li>
    <li id="nav4"><a href=" "><span>Contact</span></a></li>
    </ul>

    </div>
</div>

</body>
</html>

The above code, css and html, is all you need!

Hope that helps!

thewebkid · #15 Dec 24th, 2007, 02:31

It worked great. Finally! Thank for all your help guys. There is a bit of a gap between the nav in firefox, but that's ok....I do want to fix that though...it will probably affect ie as well.

Stuart · #16 Dec 24th, 2007, 02:33

Which gap do you mean? The one between the links? That's easy to do:

Code: Select all

#nav ul li a {
padding : 17px 20px 0 10px;

Reduce those two numbers a bit, and that should do it.

Cheers

thewebkid · #17 Dec 24th, 2007, 02:36

Sorry I meant the gap between the header and the nav...

Stuart · #18 Dec 24th, 2007, 02:39

That, also, is quite easy. Add this:

Code: Select all

#nav { 
float : right;
margin-top:-10px;
}

And that, again, should do it!

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] My nav images