Horizontal image-based navigation?

Discussion in 'CSS' started by silverblade, May 1, 2007.

0
  1. #1
    Now I got this problem...

    I am trying to create a horizontal navigation with no text, just images, and showing a different image on rollover.
    When I put the buttons next to eachother, they automatically go vertically below eachother which is not what I want.

    How can I keep them horizontally aligned?
     
    silverblade, May 1, 2007 IP
  2. semantic7

    semantic7 Member

    Messages:
    92
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #2
    Put the buttons in an unordered list and float the li's to the left
     
    semantic7, May 1, 2007 IP
  3. silverblade

    silverblade Peon

    Messages:
    153
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you, that way works fine in Firefox, but in IE the images just don't show up...

    Right now I have the following code:

    CSS:
    #nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}

#nav li {
	float: left;
	}

a.home {
	display: block;
	width: 62px;
	height: 50px;
	background: url("images/r_home.gif") 0 0 no-repeat;
	text-decoration: none;
	}
a:hover.home {
	background-position: -62px 0;
	}

a.about {
	display: block;
	width: 75px;
	height: 50px;
	background: url("images/r_about.gif") 0 0 no-repeat;
	text-decoration: none;
	}
a:hover.about {
	background-position: -75px 0;
	}
    Code (markup):
    With this html:
    <div id="nav"><ul>
	<li><a class="home" href="#">&nbsp;</a></li>
	<li><a class="about" href="#">&nbsp;</a></li></ul></div>
    HTML:
    As I said, it works fine in Firefox, but why doesn't it show up in IE and how to fix it?
     
    silverblade, May 1, 2007 IP
  4. semantic7

    semantic7 Member

    Messages:
    92
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #4
    There is no closing ul tag in your code. Validate your code always :)
     
    semantic7, May 1, 2007 IP
  5. silverblade

    silverblade Peon

    Messages:
    153
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Oh, the closing ul tag actually is there. I just took out a part of the navigation to keep the code shorter :)
    So that does not solve anything... Well spotted though ;)
     
    silverblade, May 1, 2007 IP
  6. semantic7

    semantic7 Member

    Messages:
    92
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #6
    list-style: none; should be under li styles. Besides that I can't think of anything right now. There might be some other style in your sheet thats causing a problem. Its best to post the complete code both html and css. Here is a demo you might wanna look at...


    http://sweetsam.freehostia.com/demo/
     
    semantic7, May 1, 2007 IP
  7. silverblade

    silverblade Peon

    Messages:
    153
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
* {
	margin: 0; padding: 0; border: 0;
	}

body {
	background: #252525;
	}
	
#container {
	background: url(images/repeat.gif) repeat-y;
	width: 760px;
	}
	
#header {
	height: 517px;
	background: url(images/head.jpg) no-repeat;
	}
		
#footer {
	background: url(images/footer.gif) no-repeat;
	height: 65px;
	clear: both;
	font-size: 90%;
	text-align: right
	}

#footer p {
	padding: 35px 60px 0px 00px;
	}

#content {
	width: 415px; float: left;
	margin-top: -395px;
	padding: 0px 25px 10px 85px;
	}

#nav {
	height: 50px;
	position: absolute; top: 62px; left: 330px;
	clear: both;
	}

#nav li {
	float: left;
	list-style: none;
	}

#box {
	width: 210px; float: left;
	margin-top: -395px;
	}

#bluebox {
	background: url(images/bluebox.gif) repeat-y;
	}
	
#bluebox p {
	padding: 10px 10px 0px 10px;
	}

#footerbox {
	background: url(images/boxfooter.gif) no-repeat;
	height: 80px;
	padding-bottom: 10px;
	}

h1 {
	background: url(images/latest.gif) left no-repeat;
	width: 210px;
	height: 75px;
	text-indent: -9000px;
	overflow: hidden;
	}

h2 {
	background: url(images/h2.gif) no-repeat;
	color: #fff;
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 22px;
	line-height: 77px;
	font-weight: bold;
	font-style: italic;
	text-align: left;
	}
	
a.home {
	display: block;
	width: 62px;
	height: 50px;
	background: url("images/r_home.gif") 0 0 no-repeat;
	text-decoration: none;
	}
a:hover.home {
	background-position: -62px 0;
	}

a.about {
	display: block;
	width: 75px;
	height: 50px;
	background: url("images/r_about.gif") 0 0 no-repeat;
	text-decoration: none;
	}
a:hover.about {
	background-position: -75px 0;
	}

a.portfolio {
	display: block;
	width: 95px;
	height: 50px;
	background: url("images/r_portfolio.gif") 0 0 no-repeat;
	text-decoration: none;
	}
a:hover.portfolio {
	background-position: -95px 0;
	}

a.services {
	display: block;
	width: 94px;
	height: 50px;
	background: url("images/r_services.gif") 0 0 no-repeat;
	text-decoration: none;
	}
a:hover.services {
	background-position: -94px 0;
	}

a.contact {
	display: block;
	width: 75px;
	height: 50px;
	background: url("images/r_contact.gif") 0 0 no-repeat;
	text-decoration: none;
	}
a:hover.contact {
	background-position: -75px 0;
	}
</style>

</head>

<body>
<div id="container">
	<div id="header"></div>
	<div id="nav"><ul>
	<li><a class="home" href="#">&nbsp;</a></li>
	<li><a class="about" href="#">&nbsp;</a></li>
	<li><a class="portfolio" href="#">&nbsp;</a></li>
	<li><a class="services" href="#">&nbsp;</a></li>
	<li><a class="contact" href="#">&nbsp;</a></li></ul></div>
	<div id="content">
		<h2>welcome...</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nec neque sit amet turpis commodo pharetra. In hac habitasse platea dictumst. Suspendisse potenti. Integer purus leo, iaculis sed, consectetuer eu, hendrerit a, tellus. Pellentesque felis. Duis sagittis tincidunt enim. Fusce et massa id enim cursus tincidunt. Vivamus ullamcorper rutrum augue. Nunc vel magna ultricies tortor congue tristique. Mauris euismod. Mauris at risus. Nullam condimentum adipiscing mauris. Donec fringilla consectetuer mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut euismod tempus turpis. Aliquam auctor ante id nisi. Donec pharetra nunc nec nisi interdum laoreet.</p>
			<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean dolor. Sed in turpis et ligula scelerisque egestas. Phasellus interdum tortor id sem. Pellentesque vehicula mattis arcu. Morbi dignissim auctor neque. Donec ligula felis, venenatis feugiat, tristique non, gravida vitae, metus. Etiam blandit fringilla mi. Curabitur non arcu sed est dictum feugiat. Donec libero justo, pellentesque sed, fermentum posuere, scelerisque ac, neque. Phasellus quis pede.</p>
	</div>
	<div id="box">
		<div id="bluebox">
			<h1><span>Latest Works</span></h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nec neque sit amet turpis commodo pharetra. In hac habitasse platea dictumst. Suspendisse potenti. Integer purus leo, iaculis sed, consectetuer eu, hendrerit a, tellus. Pellentesque felis. Duis sagittis tincidunt enim. Fusce et massa id enim cursus tincidunt. Vivamus ullamcorper rutrum augue.</p>
		</div>
		<div id="footerbox"></div>
	</div>
	<div id="footer">
	<p>&copy; Copyright Silverblade 2007&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;XHTML | CSS </p>
	</div>
</div>

</body>
</html>
    HTML:
    Here is my complete code. I also read here that it has something to do with IE's caching settings.

    ps. This is my first tableless coding, so if you have any other tips for improvement, just tell me ;)
     
    silverblade, May 1, 2007 IP
  8. semantic7

    semantic7 Member

    Messages:
    92
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #8
    In IE the images don't show up because the seem to be hidden under something or off screen. I would suggest giving ul a height and then a border to see where it is. The height might actually fix the problem because floats do not extend the height of their container in this case ul. You can also make the layout you are shooting for with lesser number of divs. Post a link to your site or buzz me on yahoo sweetsam_7 and I can help you with that.
     
    semantic7, May 1, 2007 IP
  9. silverblade

    silverblade Peon

    Messages:
    153
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    silverblade, May 1, 2007 IP
  10. semantic7

    semantic7 Member

    Messages:
    92
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #10
    check your PM
     
    semantic7, May 1, 2007 IP