Member Avatar for papanyquiL

Hi everyone!

I have images I'm using in my navbar instead of text. I also have another image that replaces it for the hover effect. For some reason, the images are displaying vertically when I want them to display horizontally. I've tried every combination I can think of, any help would be appreciated. Here's an example of what's happening:

http://a.imageshack.us/img121/7180/11072538.png

Here's the HTML for the Nav:

<body>	
		
			<div id="container">
				<div id="header">
					<ul>
						<li class="home"><a href="#">home</a></li>
						<li class="about"><a href="#">about</a></li>
						<li class="contact"><a href="#">contact</a></li>
					</ul>
				</div> <!-- end header -->

And my CSS:

/* Begin Container / Header */

#container { 
 margin: 0 auto;
 width: 1024px;
 height: auto;
}

#header {
 background: url(images/header_bg.jpg) no-repeat;
 width: 1024px;
 height: 132px;
}

#header ul {
 text-indent: -9999px;
 width: 500px;
 height: 132px;
 float: right;
 list-style: none;
 padding-right: 40px;
 padding-top: 85px;
}

#header li {
 display: inline;;
}


#header ul li.home a {
 text-indent: -9999px;
 background-image:url(images/home.png);
 background-repeat: no-repeat;
 margin-right: 10px;
 width: 60px;
 height: 44px;
 display: block;
}

#header ul li.home a:hover {
 background-image:url(images/homeHover.png);
 background-repeat: no-repeat;
 width: 60px;
 height: 44px;
}

#header ul li.about a {
 margin-right: 10px;
 text-indent: -9999px;
 background-image:url(images/about.png);
 background-repeat: no-repeat;
 width: 54px;
 height: 49px;
 display: block;
}

#header ul li.about a:hover {
 background-image:url(images/aboutHover.png);
 background-repeat: no-repeat;
 width: 54px;
 height: 49px;
}

#header ul li.contact a {
 margin-right: 10px;
 text-indent: -9999px;
 background-image:url(images/contact.png);
 background-repeat: no-repeat;
 width: 64px;
 height: 31px;
 display: block;
}

#header ul li.contact a:hover {
 background-image:url(images/contactHover.png);
 background-repeat: no-repeat;
 width: 64px;
 height: 31px;
}

I know I used random classes and they may not be used the way they should be, but I couldn't think of anything else to get this to work. Any help would be appreciated, thanks!

  • 3 Contributors
  • 7 Replies
  • 162 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by pwinfrey
Member Avatar for macneato

Why don't you try something like this

#header li {
 display: block;
 float:left;
 }
Member Avatar for papanyquiL

hmm, that doesn't seem to be working either :(

Member Avatar for pwinfrey

Try adding "display:inline;" to "#header ul" and removing "float:right;".

Member Avatar for papanyquiL

Damn, I had it working, then I added a search box and button, and it screwed it all up again...
HTML

<div id="container">
				<div id="header">
					<ul>
						<li class="home"><a href="#">home</a></li>
						<li class="about"><a href="#">about</a></li>
						<li class="contact"><a href="#">contact</a></li>					
                    </ul>       
                    	 
				<div class="searchArea">
                    	<input class="search" type="text" name="search" />
                    	<input class="submit" type="submit" title="Search"  />
                </div> <!-- end searchArea -->
                
				</div> <!-- end header -->

CSS

#header {
 background: url(images/header_bg.jpg) no-repeat;
 width: 1024px;
 height: 132px;
}

#header ul {
 text-indent: -9999px;
 display: inline;
 width: 200px;
 height: 132px;
 padding-left: 1000px;
 padding-top: 85px;
 list-style: none;
}

#header ul li {
 float: left;
 padding-right: 40px;
}

#header ul li.home a {
 text-indent: -9999px;
 background-image:url(images/home.png);
 background-repeat: no-repeat;
 width: 60px;
 height: 44px;
 display: block;
}

#header ul li.home a:hover {
 background-image:url(images/homeHover.png);
 background-repeat: no-repeat;
 width: 60px;
 height: 44px;
}

#header ul li.about a {
 text-indent: -9999px;
 background-image:url(images/about.png);
 background-repeat: no-repeat;
 width: 54px;
 height: 49px;
 display: block;
}

#header ul li.about a:hover {
 background-image:url(images/aboutHover.png);
 background-repeat: no-repeat;
 width: 54px;
 height: 49px;
}

#header ul li.contact {
 padding-top: 10px;
}

#header ul li.contact a {
 text-indent: -9999px;
 background-image:url(images/contact.png);
 background-repeat: no-repeat;
 width: 64px;
 height: 31px;
 display: block;
}

#header ul li.contact a:hover {
 background-image:url(images/contactHover.png);
 background-repeat: no-repeat;
 width: 64px;
 height: 31px;
}

/* Search Area */
#searchArea {
 float: right;
 height: 132px;
 width: 300px;
 padding-top: 90px;
}

The problem:
http://img695.imageshack.us/img695/522/82218658.png

Member Avatar for pwinfrey

You might get away with adding "display:inline;" to "#searchArea" and removing "float:right;".

Member Avatar for papanyquiL

Thanks for your input! I decided to throw in the towel and use absolute positioning.

Member Avatar for pwinfrey

What exactly is the problem?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.