Navigation background image

HTML & CSS
1

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%20Start%20Law/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

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

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

Not quite sure how you want it to appear, though, but you could put that image as a background on each li, like so:

#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

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

Let me try what you guys have suggested. Here is a link to what i’m trying to create http://connect4webdesign.com/New%20Start%20Law/jpegs.html

7

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. :slight_smile:

8

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>

  1. 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??

  1. ins #nav is now the UL, change any #nav ul … rule to simply #nav

What is “ins”/

9

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


<div id="nav">
  <ul>
      ...
  </ul>
</div>

you can just do

<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. :smiley:

10

Sorry waaay too vague still. I tried it and nothing better

11

The first tip was to change this:

[COLOR="#FF0000"]<div id="nav">[/COLOR]
  <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>
[COLOR="#FF0000"]</div>[/COLOR]

to this:


[COLOR="#FF0000"]<ul id="nav">[/COLOR]
    <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. :slight_smile:

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. :slight_smile:

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:


#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

Oh snap I’m getting closer to what I want! thx

13

OK, great. I don’t see any changes yet, but let us know if you need any help. :slight_smile: