SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP! I can't get my image based nav bar to show up!

    I probably have a couple other errors also. But the main thing that's bothering me is being able to see the links in the status bar at the bottom of the screen, but not being able to see the images that make up the Navbar. If I click edit CSS in the web developer toolbar I can see the navbar, but as it's displayed in the site, I cannot.

    Any help that is provided will be greatly appreciated....I'm a bit of a noobie when it comes to CSS.


    HTML:

    <!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=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="all"/>
    <title></title>
    </head>

    <body>
    <ul id="nav">
    <li id="nav_abo"><a href="/">AboutUs</a></li
    >
    <li id="nav_pas"><a href="/ProductsandServices/">ProductsandServices</a></li
    >
    <li id="nav_pro"><a href="/Promotions/">Promotions</a></li
    >
    <li id="nav_wor"><a href="/Workshops/">Workshops</a></li
    >
    <li id="nav_fun"><a href="/FunandGames">FunandGames</a></li
    >
    <li id="nav_con"><a href="/ContactUs/">ContactUs</a></li
    >
    </ul>
    <img src="images/sidelogo.png" class="sidelogo" alt="sidelogo" /><img src="images/graphicsph1to4.png" class="graphicsph1to4" alt="photos" />
    </body>
    </html>



    CSS:


    @charset "utf-8";
    /* CSS Document */


    body {

    margin: 0;
    padding: 0;
    background-color: #ffcc00;
    width: 800px;
    }

    #nav {
    width: 618px;
    height: 160px;
    top: 91px;
    left: 181px;
    position: absolute;
    background: url(images/navbar.png) no-repeat;
    margin: 0;
    padding: 0;
    z-index: 1;
    }

    img.sidelogo {
    padding: 0;
    border: 0;
    margin: 0;
    z-index: 2;

    }
    img.graphicsph1to4.png {
    padding: 0;
    border: 0;
    margin: 0;
    position: absolute;
    z-index: 3;

    }

    #nav li {
    float: left;
    }
    #nav li a {
    position: absolute;
    top: 20px;
    left: 181px;
    margin: 0;
    padding: 0;
    display: block;
    height: 54px;
    background: url(images/navbar.png) no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    font-size: 1%;
    }
    li#nav_abo a {
    left: -2px;
    width: 129px;
    background-position: 0 0;
    }
    li#nav_pas a {
    left: 303px;
    width: 90px;
    background-position: -129px 0;
    }
    li#nav_pro a {
    left: 393px;
    width: 99px;
    background-position: -219px 0;
    }
    li#nav_wor a {
    left: 492px;
    width: 87px;
    background-position: -318px 0;
    }
    li#nav_fun a {
    left: 579px;
    width: 88px;
    background-position: -405px 0;
    }
    li#nav_con a {
    left: 667px;
    width: 84px;
    background-position: -493px 0;
    }
    li#nav_abo a:hover {
    background-position: 0 -54px;
    }
    li#nav_pas a:hover {
    background-position: -129px -54px;
    }
    li#nav_pro a:hover {
    background-position: -219px -54px;
    }
    li#nav_wor a:hover {
    background-position: -318px -54px;
    }
    li#nav_fun a:hover {
    background-position: -405px -54px;
    }
    li#nav_con a:hover {
    background-position: -493px -54px;
    }
    #body_abo li#nav_abo a {
    background-position: 0 -108px;
    }
    #body_pas li#nav_pas a {
    background-position: -129px -108px;
    }
    #body_pro li#nav_pro a {
    background-position: -219px -108px;
    }
    #body_wor li#nav_wor a {
    background-position: -318px -108px;
    }
    #body_fun li#nav_fun a {
    background-position: -405px -108px;
    }
    #body_con li#nav_con a {
    background-position: -493px -108px;
    }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to this online? - would make it easier to faultfind with the images available. The main thing I see here that is unusual is the absolute positioning on the <a> elements - you should be able to just float them left, and specify only the width for each one.

  3. #3
    SitePoint Member digitalninja's Avatar
    Join Date
    Mar 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having the exact same problem:
    http://reyalexander.com/

    Links seem to work properly but the positioning of the images doesnt show up properly. I got a tutorial from "The Art And Science Of CSS" book from sitepoint.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait until I get home, ok? And please, post a live link to your problem page as digitalninja has done.

  5. #5
    SitePoint Member digitalninja's Avatar
    Join Date
    Mar 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Ninja:
    FTW: Why don't you just make a 1-2-3 pixel wide and however tall your nav is and repeat-x? I remember when that method came out, I didn't like it much.
    Ryan B | My Blog | Twitter

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I basically got the code from 'The Art & Science of CSS' as well, from the section 'Advanced Horizontal Navigation'. Sitepoint usually provides great books and information, but it's a little annoying that 'The Art & Science of CSS' has so many errors, especially when you are using it as a learning tool. Thank you for those who have provided solutions, its good to know that there is a great support community that are willing to help....and I'm sure you'll be hearing from me again.

  8. #8
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, I still haven't been able to figure out what's going wrong. Any help would be appreciated. As suggested, I've posted the problem to www.jasonmyles.net

    Hope that's more helpful.
    Thanks

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have an error in your css file - there is a definition but no defined element :
    Code:
    img.graphicsph1to4.png {
    	padding: 0;
    	border: 0;
    	margin: 0;
    	position: absolute;
    	float: right;
    	z-index: 2;
    }
    {clear: both;
    }
    #nav {
    	width: 618px;
    	height: 54px;
    	top: 91px;
    	left: 181px;
    	position: relative;
    	background: url(images/navbar.png) no-repeat;
    	margin: 0;
    	list-style-type: none;
    	overflow: hidden;
    	z-index: 3;
    }

  10. #10
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Centauri, thanks for the quick reply. I removed the code you highlighted, but it doesn't make a difference, I still can't see the Nav bar that seems to be underneath the background colour.

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Main problem here is the images folder location is referenced from the css file location, not the html - as the css file is ina folder above the root level, to reference the nav graphic you need ../images/navbar.png.

    While that gets the image working, there are a number of alignment problems within the menu due to the absolute positioning of the <a> elements, which can be solved by just floating them left instead. The background image only needs to be on the <a>s, and the shift between states is actually 53px, not 54px.

    Try this revamped css :
    Code:
    #nav {
    	width: 618px;
    	height: 54px;
    	top: 91px;
    	left: 181px;
    	position: relative;
    	margin: 0;
    	list-style-type: none;
    	overflow: hidden;
    	z-index: 3;
    }
    #nav li {
    float: left;
    }
    #nav li a {
    	margin: 0;
    	padding: 0;
    	height: 54px;
    	background: url(../images/navbar.png) no-repeat;
    	text-indent: -9999px;
    	overflow: hidden;
    	font-size: 1%;
    	text-decoration: none;
    	float: left;
    }
    li#nav_abo a {
    	width: 129px;
    	background-position: 0 0;
    }
    li#nav_pas a {
    	width: 90px;
    	background-position: -129px 0;
    }
    li#nav_pro a {
    	width: 99px;
    	background-position: -219px 0;
    }
    li#nav_wor a {
    	width: 87px;
    	background-position: -318px 0;
    }
    li#nav_fun a {
    	width: 88px;
    	background-position: -405px 0;
    }
    li#nav_con a {
    	width: 84px;
    	background-position: -493px 0;
    }
    li#nav_abo a:hover {
    background-position: 0 -53px;
    }
    li#nav_pas a:hover {
    background-position: -129px -53px;
    }
    li#nav_pro a:hover {
    background-position: -219px -53px;
    }
    li#nav_wor a:hover {
    background-position: -318px -53px;
    }
    li#nav_fun a:hover {
    background-position: -405px -53px;
    }
    li#nav_con a:hover {
    background-position: -493px -53px;
    }
    #body_abo li#nav_abo a {
    background-position: 0 -106px;
    }
    #body_pas li#nav_pas a {
    background-position: -129px -106px;
    }
    #body_pro li#nav_pro a {
    background-position: -219px -106px;
    }
    #body_wor li#nav_wor a {
    background-position: -318px -106px;
    }
    #body_fun li#nav_fun a {
    background-position: -405px -106px;
    }
    #body_con li#nav_con a {
    background-position: -493px -106px;
    }

  12. #12
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Centauri, Thank you so much!
    I would have never figured out what was going wrong....now I just have to make a note of what I was doing wrong, so I can learn. And I have to figure out my positioning of the various elements too.

    Thanks again!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •