SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation background image

    Okay so I've been frustrated with this for a couple hours now and if anyone can give me some help then it would be greatly appreciated. So, I'm trying to build this site and I'm working on the background image for the navigation. I want this image to span the whole width of the screen and contain the navigation all on one line. My thought was to set the image as the background for the div that contains the ul, set the width to 100% since the divs container (the body) fills 100% of the page, set the height to the minimum height of the background image (59px) and have it repeat in the x axis. Well, iv'e tried lots of things and you can see the last result that I got at this url. The funny thing is that I was able to get the cloud background image to work fine, but obviously i'm dealing with a list here which complicates things.

    http://connect4webdesign.com/New%20S...SiteHeader.php

    Thanks for any help you can provide. Also, I'd much rather have someone tell me my error in the code rather than just copying and pasting code that works.

    thanks, Brian

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It's really not clear what you want here. Can you give some idea of how you want your design to look? At the moment, the cloud image is a background on the header ... which doesn't sound like what you have described here.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was just saying that I got the background image to.work for the header, but I can't get it to work for the nav. I want to make the gray bar the background for the navigation.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Not quite sure how you want it to appear, though, but you could put that image as a background on each li, like so:

    Code:
    #nav ul li {
      background:url(images/New%20Start%20Law%20Website%20Cloud%20header.jpg);
    }
    You'd just have to remove the bg color on the <a>s for that to appear, though.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Nope.

    One way to do this is to add the following:
    1) GET RID of THE DIV
    2) give the UL a class="nav"
    3) use this CSS:
    #nav li { float:left;}
    #nav {overflow:hidden; padding:0; margin:0 15%;}

    4) ins #nav is now the UL, change any #nav ul ... rule to simply #nav

    hope that helps

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me try what you guys have suggested. Here is a link to what i'm trying to create http://connect4webdesign.com/New%20S...Law/jpegs.html

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Let me try what you guys have suggested. Here is a link to what i'm trying to create http://connect4webdesign.com/New%20S...Law/jpegs.html
    Ah, OK ... not what I was picturing at all from what you initially posted. d_p has given you useful directions above. Give those steps a try.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dresden I'm somewhat confused by your directions.
    1) GET RID of THE DIV
    I believe that you mean get rid of just the #MainNav ???

    2) give the UL a class="nav"
    I believe here you mean to just do this

    <ul class="nav">
    <li><a href="SiteHeader.php">Home</a></li>
    <li><a href="Bankruptcy.php">Bankruptcy</a></li>
    <li><a href="Immigration.php">Immigration</a></li>
    <li><a href="PersonalInjury.php">Personal Injury</a></li>
    <li><a href="Aboutus.php">About us</a></li>
    <li><a href="Contactus.php">Contact us</a></li>
    </ul>


    3) use this CSS:
    #nav li { float:left;}
    #nav {overflow:hidden; padding:0; margin:0 15%;}

    I really get confused by this because am I using a div again??


    4) ins #nav is now the UL, change any #nav ul ... rule to simply #nav

    What is "ins"/

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    I believe that you mean get rid of just the #MainNav
    You have a div around your menu <ul>, which isn't necessary. So the idea is to remove that div and put the #nav id (or a class) on the <ul> itself. E.g.

    Instead of
    Code:
    <div id="nav">
      <ul>
          ...
      </ul>
    </div>
    you can just do

    Code:
    <ul id="nav">
          ...
    </ul>

    use this CSS:
    #nav li { float:left;}
    #nav {overflow:hidden; padding:0; margin:0 15%;}
    Yep, that's right.

    am I using a div again??
    No, #nav now refers to the <ul> element.

    What is "ins"/
    A typo.

  10. #10
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry waaay too vague still. I tried it and nothing better

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    The first tip was to change this:

    Code:
    <div id="nav">
      <ul>
        <li><a href="SiteHeader.php">Home</a></li>
        <li><a href="Bankruptcy.php">Bankruptcy</a></li>
        <li><a href="Immigration.php">Immigration</a></li>
        <li><a href="PersonalInjury.php">Personal Injury</a></li>
        <li><a href="Aboutus.php">About us</a></li>
        <li><a href="Contactus.php">Contact us</a></li>
      </ul>
    </div>
    to this:

    Code:
    <ul id="nav">
        <li><a href="SiteHeader.php">Home</a></li>
        <li><a href="Bankruptcy.php">Bankruptcy</a></li>
        <li><a href="Immigration.php">Immigration</a></li>
        <li><a href="PersonalInjury.php">Personal Injury</a></li>
        <li><a href="Aboutus.php">About us</a></li>
        <li><a href="Contactus.php">Contact us</a></li>
    </ul>
    That's not vague at all, but quite specific.

    You don't need to remove that div, though. It's just a little more efficient to do that.

    Make that change, if you wish, and then we'll go through step 2.

    Edit:


    Actually, looking at your image again, I'd suggest you keep the div after all. That way it will be a little easiet to have the gray band across the page. So, set up your style like so:

    Code:
    #nav {
    	overflow:hidden;
    	padding:0;
    	background-image:url(images/Main%20Nav%20background.jpg);
    }
    
    #nav ul {
    	list-style: none;
    	margin-top:0px;
    	margin-left:0px;
    	padding-left:0px;
    	width:1027px;
    	height:59px;
    	margin: 0 auto;
    }
    
    #nav ul li {
    	text-align: center;
    	line-height:59px;
    	white-space:nowrap;
    	color:#003;
    	float: left;
    }
    
    #nav ul li a{
    	display: block;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:18px;
    	font-weight:bold;
    	background-image:url(images/Main%20Nav%20background.jpg);
    	min-height:100%;
    	min-width:100%;
    	padding: 0px 28px;
    	border-right: 1px solid black;	
    }
    
    #nav ul li a:link, #nav ul li a:visited {
    	color:#000033;
    	text-decoration: none;
    	font-family:Arial, Helvetica, sans-serif; 
    }
    
    #nav ul li a:hover, #nav ul li a:active {
    	color: #1860a3;
    	text-decoration: none;
    }

  12. #12
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh snap I'm getting closer to what I want! thx

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    OK, great. I don't see any changes yet, but let us know if you need any help.


Tags for this Thread

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
  •