CSS Forum

**LayneMitch** · 01-10-2008, 10:20 AM

Hello.
I'm trying to figure out why my text isn't being positioned inline....
Here's the html code:

Code:

<style type= "text/css">
#navlinks li p {color: white;}
#navlinks ul li {display: inline; margin-left: 10px;}
</style>
<div id="navlinks">
 <ul>
     <li><p>Our Style</p></li>  
     <li><p>Our Look</p></li>
     <li><p>Men Apparel</p></li>
     <li><p>Women Apparel</p></li>
     <li><p>Sign Up</p></li>
</ul>
</div>

Also...
I'm trying to place a background image behind the lists and my original code isn't working either. Here's the style:

Code:

#navlinks {
    height: 14px;
     width: 651px;
    margin-left: 262px; 
    margin-top: 0px;
    background-image: url ("images/Link-Bkgd1.gif");
    background-repeat: repeat-x;
     }

The width of the link background image is 130px. And the thought process was to set is as a background image for the lists and let it repeat for a width of 651px. Since it's a set size of 130px, there should be multiple images repeating (one for each list).
How do I do that?

**maxxximus** · 01:03 PM

Your paragraph tags are block level elements. Remove them and the list will style inline.

Your #navlinks is correct as image will tile along the x-axis using repeat-x.

HTML Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type= "text/css">
#navlinks li {color: white;}
#navlinks ul li {display: inline; margin-left: 10px;}
#navlinks {
line-height:2em;
     width: 651px;
    margin-left: 262px; 
    margin-top: 0px;
    background-image:url(images/about_down.gif);
    background-repeat: repeat-x;
     }
</style>
</head>

<body>

<div id="navlinks">
 <ul>
     <li>Our Style</li>  
     <li>Our Look</li>
     <li>Men Apparel</li>
     <li>Women Apparel</li>
     <li>Sign Up</li>
</ul>
</div>
</body>
</html>

**LadynRed** · 01-10-2008, 02:51 PM

Actually, if you want the background to change on hover, it's better to put the background image on the <a>. Make sure you add display:block to the <a> so that it will take up the entire space in the <li> item. Use top and bottom padding on the <a> to control the height.

**LayneMitch** · 01-11-2008, 08:21 AM

Hello.

Thanks for your responses...but ...Oh My God

I've spent hours coding it exactly like you said and it's not doing anything.

Code:

#navlinks { 
               line-height:2em;
               width: 651px;
               margin-left: 175px; 
               margin-top: 5px;
               background-image: url("images/Link_Bkgd1.png");
               background-repeat: repeat-x;
               background-color: #1219aa;
             }

The image for some strange reason just doesn't want to show. I've used the same formula for my background #header and #content and it's showing perfectly. For those two ID's, I sliced the background and let it repeat-x.

The difference is that the Link Background is an actual image. So I didn't think I needed to slice this image. I've attached the image to this post. Also, I've tried it as a .gif and .png and neither is working. Ignore the bkgd-color..I just put it there as a test.

**chrishirst** · 01-11-2008, 08:36 AM

there should be no quotes around the URL.

**LayneMitch** · 01-11-2008, 09:03 AM

...

I've tried taking the quotes off and it's not making any difference.

You can check the site out here.

www.ibtestsite.info

In fact, there aren't any quotes in the styles right now.

Also, to Ms. Lady'n'Red, I attempted to add the image to the <a> tag as well and nothing happened.

I'm clueless.

**chrishirst** · 01-11-2008, 09:12 AM

the image URL 404s out

**LayneMitch** · 01-11-2008, 09:55 AM

Not sure what you mean by that.

You may have clicked on the link right as I was making updates. But you can click on it now and it should pull up.

www.ibtestsite.info

**maxxximus** · 01-11-2008, 10:38 AM

Your current definition for #navlinks includes this which is whats causing the problem

HTML Code:

 background: #1219aa url(images/Link-Bkgd1.gif) repeat-x;

should be

HTML Code:

background:url(images/Link-Bkgd1.png) repeat-x;

**LayneMitch** · 01-11-2008, 10:49 AM

Code:

background:url(images/Link-Bkgd1.png) repeat-x;

Tried it and here's what it produced...

www.ibtestsite.info

Still the same results (minus the blue background). That was only there for testing purposes anyway.

I'm starting to think maybe my problem isn't the code because I've tried almost everything you can do. I'm thinking it has to be in the design.

**LadynRed** · 01-11-2008, 10:56 AM

Quote:

background: #1219aa url(images/Link-Bkgd1.gif) repeat-x;

There is absolutely NOTHING wrong with that statement, its valid CSS shorthand and not the problem at all.

This code won't do what I mentioned:

Quote:

#navlinks {
line-height:2em;
width: 651px;
margin-left: 175px;
margin-top: 5px;
background: url(images/Link-Bkgd.png) repeat-x;
}

#navlinks li a {color: white;}

What you need is this:

#navlinks li a{background: url(images/bgImage.png/) repeat-x;}

That will put the image ON THE LINK. To change the background image on hover, you'd then need this:

#navlinks li a:hover{background: url(images/bgImageHover.png/) repeat-x;}

The background image you use should be blank so the real text of the link sits over it.

**chrishirst** · 01-11-2008, 01:32 PM

Quote:

Originally Posted by LayneMitch

Not sure what you mean by that.

You may have clicked on the link right as I was making updates. But you can click on it now and it should pull up.

Nope.

try it http://www.ibtestsite.info/images/Link-Bkgd1.gif

**chrishirst** · 01-11-2008, 01:37 PM

one tip as well. NEVER use mixed case for file names.

*nix servers are case sensitive

**LayneMitch** · 01-12-2008, 12:53 PM

To chrishirst

I saw what you were talking about.

You can click on the link now and the image should appear. I had to load it to the server.

I'm still trying to figure out how to do this.

**chrishirst** · 01-13-2008, 06:26 AM

Quote:

You can click on the link now and the image should appear

Not really bothered about whether it appears when you click the link or not. BUT if it isn't on the server where the CSS code expects it to be it won't appear on the page when it's rendered

I suppose the question now is;

What should it look like?

here is what I'm seeing in FireFox
jsrstudio.png