[Solved]Can someone help me with my navigation problem.

K

Keith09

Up-and-Coming Sensation
Joined
Sep 12, 2009
Messages
279
Reaction score
0
FP$
6
So im trying to code my navigation design like so :

HTML :
Code: 
<div id="topnav">
        <ul id="nav">
            <li class="left"><a href="#" alt="left"></a>
            <li class="home"><a href="#" alt="Home"></a>
            <li class="bio"><a href="#" alt="Bio"></a> 
            <li class="portfolio"><a href="#" alt="Portfolio"></a>
            <li class="downloads"><a href="#" alt="Downloads"></a>
            <li class="contact"><a href="#" alt="Contact"></a>
            <li class="right"><a href="#" alt="right"></a>
        </ul>
    	 </div>

CSS:
Code: 
#topnav ul #nav li .left { background-image: img/left.jpg; width:8px; height:48px; }
#topnav ul #nav li .home {background-image: img/home.jpg ; width:59px; height:48px;  }
#topnav ul #nav li .bio {background-image: img/bio.jpg ; width:45px; height:48px;  }
#topnav ul #nav li .portfolio {background-image: img/portfolio.jpg ; width:83px;  height:48px; }
#topnav ul #nav li .downloads {background-image: img/downloads.jpg ; width:103px;  height:48px;}#topnav  ul #nav li .contact {background-image: img/contact.jpg ; width:85px;  height:48px; }
#topnav ul #nav li .right {background-image: img/right.jpg ; width:14px; height:48px;  }

basically i have a list in html with no values because I want to have images for them instead which have text on them also so I have no need to input any text for my HTML code. Once i get the background working I will then be adding a Hover targeting those id's and classes and replace the background images with a hover background image for a cool looking hover effect,

No images are displayed for my navigations so im wondering if anyone here can find my error?

Sorry if I explained it badly 😛 :lol:
 
Re: Can someone help me with my navigation problem.

You need place some text in the a links and add this to each CSS class for the buttons:

Code: 
text-indent: -9999px;

See how that turns out. Now the text will appear completely off the screen but because there is a text value the image will take it's place.

:great:
 
Re: Can someone help me with my navigation problem.

HTML code is the same apart from me adding text into the [bold]a[/bold] links. and this is my new CSS Code

Code: 
 #topnav ul #nav li .left { background-image: img/left.jpg; width:8px; height:48px; text-indent: -9999px; }
#topnav ul #nav li .home {background-image: img/home.jpg ; width:59px; height:48px; text-indent: -9999px; }
#topnav ul #nav li .bio {background-image: img/bio.jpg ; width:45px; height:48px; text-indent: -9999px; }
#topnav ul #nav li .portfolio {background-image: img/portfolio.jpg ; width:83px;  height:48px;text-indent: -9999px; }
#topnav ul #nav li .downloads {background-image: img/downloads.jpg ; width:103px;  height:48px; text-indent: -9999px;}
#topnav  ul #nav li .contact {background-image: img/contact.jpg ; width:85px;  height:48px; text-indent: -9999px; }
#topnav ul #nav li .right {background-image: img/right.jpg ; width:14px; height:48px; text-indent: -9999px;  }

images dont appear but my text does appear from which I added to my [bold]a[/bold] links.

Edit --

I also added . before the img( tag in my css, and it made no difference
 
Re: Can someone help me with my navigation problem.

Ok do you want to have the links display in a row or one after the other?

In a row add
Code: 
display: inline-block;

One after the other add
Code: 
display: block

Can you provide a picture if it still doesn't work.
 
Re: Can someone help me with my navigation problem.

I have them displayed all in 1 line right beside each other. I currently has display set to :block ... Ill try it with inline-block .

--edit--

lol display: inline-block; just made each one appear below the other :/

--edit--

Browser : http://i1196.photobucket.com/albums/aa4 ... tled-1.jpg

Photoshop : http://i1196.photobucket.com/albums/aa4 ... design.jpg

HTML : http://i1196.photobucket.com/albums/aa4 ... z/html.jpg

CSS : http://i1196.photobucket.com/albums/aa4 ... z/code.jpg
 
Re: Can someone help me with my navigation problem.

Can you post a picture or PM me a picture of the page with the issue, that way it'll be much easier 🙂
 
Re: Can someone help me with my navigation problem.

I editted my above post adding links to screenshots.
 
Re: Can someone help me with my navigation problem.

Okay this is going to be a long post. Considering what you want to do (based on what I saw from that Photoshop picture, there are two ways to do what you're wanting and we'll do it the easy way 🙂)

Okay first of all, use this as your HTML code for your navigation:
Code: 
<div id="topnav">
<div id="nav-left"></div>
<a href="#" id="home">Home</a>
<div id="nav-right"></div>
</div>

Now for your CSS, you'll need to use the following:
Code: 
#nav-left {
background-image: url("./img/left.jpg");
background-repeat: no-repeat;
width:8px;
height:48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
a#home
background-image: url("./img/home.jpg");
background-repeat: no-repeat;
width: 59px;
height: 48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
#nav-right {
background-image: url("./img/right.jpg");
background-repeat: no-repeat;
width:8px;
height:48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}

Replace what you have with the above code, although you'll need to add in the extra buttons like contact, about etc. Basically duplicate the a#home but change the width and image of course. Also I noticed that you didn't enter in the CSS image URL attribute correctly. But I've fixed that. Let me know how that works out for you. :great:

* EDIT *

Also you'll need to just change your topnav id in the CSS so it is just #topnav. The attributes should be fine if left alone.
 
Re: Can someone help me with my navigation problem.

I have a feeling I did somthing wrong ..

Code: 
#nav-left {
background-image: url("./img/left.jpg");
background-repeat: no-repeat;
width:8px;
height:48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
a#home {
background-image: url("./img/home.jpg");
background-repeat: no-repeat;
width: 59px;
height: 48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
a#bio {
background-image: url("./img/bio.jpg");
background-repeat: no-repeat;
width: 45px;
height: 48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
a#portfolio {
background-image: url("./img/portfolio.jpg");
background-repeat: no-repeat;
width: 83px;
height: 48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
a#downloads {
background-image: url("./img/downloads.jpg");
background-repeat: no-repeat;
width: 103px;
height: 48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
a#contact {
background-image: url("./img/contact.jpg");
background-repeat: no-repeat;
width: 85px;
height: 48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}
#nav-right {
background-image: url("./img/right.jpg");
background-repeat: no-repeat;
width:14px;
height:48px;
margin: 0 auto;
text-indent: -9999px;
display: inline;
}

Code: 
<div id="topnav">
<div id="nav-left"></div>
<a href="#" id="home">Home</a>
<a href="#" id="Bio">bio</a> 
<a href="#" id="Portfolio">portfolio</a>
<a href="#" id="Downloads">downloads</a>
<a href="#" id="Contact">content</a>
<div id="nav-right"></div>
</div>
 
Re: Can someone help me with my navigation problem.

You've used a capital letter in the HTML for the IDs when the IDs in the CSS are lower case. Make sure they match.
 
Re: Can someone help me with my navigation problem.

Ah crap yeh, thanks, no wonder a image 1/4 showed up for the Home link but not the others ... 😀

--edit--

you set the display to inline that means it will display in 1 line but doesint let me controll the width and height and the height and width can be controlled only by the about of text in the box which is why my whole image doesint display for me.

should I display it to "block" so that the whole image will display for me ?

--edit--

I GOT IT !! 😀

I set display:block and float:left.
and it sits just perfectly as I wanted it to. Thanks for the help ! Im going to give this hover effect a shot now 😛

I gave you +rep 😀
 
Re: Can someone help me with my navigation problem.

Thanks and glad you got it all working properly now :great:
 
Re: Can someone help me with my navigation problem.

I'm going to work on the Hover effect later on today, I gotta get some sleep :L

Ill also be adding a jQuery Image slider underneath my newsbox so I hope that goes well too 😛
 
You must log in or register to reply here.

About Us

Since 2007, Forum Promotion has specialized in providing advertising solutions to webmasters looking to promote their communities. We pride ourselves in being the bridge that connects forum administrators, bloggers, and more.

Sponsors

Affiliates

    Universal Gaming The Coffee House

Stay Connected

Back
Top Bottom