Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts

    CSS - Cant get a background-image to display behind a UL

    As the title says, i want a background image to repeat-x across the back end of all my list-items but i either have a bug or i cant do this for some reason...

    Heres the code, i wonder if anyone can help...

    Question: Is there actually an image behind "images/nav.center.gif"?
    Answer: Yup!

    Hosted online: http://www.southparksugardaddy.com/helpme!

    Code:
    <!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" xml:lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    		<meta name="description" content=""/>
    		<meta name="keywords" content=""/>
    		<title>UK Pass Fast &bull; Your guide to passing your theory test quickly!</title>
    		<style type="text/css">
    body {
    	background-color:#fff;
    	background-image:url(images/background.gif);
    	background-repeat:repeat-x;
    	margin:0;padding:0;
    	font-family:verdana;
    	font-size:13px;
    }
    img { border:0 }
    #header {
    	border-bottom:5px solid #4A4949;
    	background-color:#6C6C6C;
    	height:118px;
    	background-image:url(images/nav.bg.gif);
    	background-repeat:no-repeat;
    	background-position:bottom right;
    }
    #logo {
    	background-image:url(images/logo.gif);
    	background-repeat:no-repeat;
    	background-position:bottom left;
    	width:810px;
    	margin:0 auto;
    	height:118px;
    }
    #logo ul {
    	margin:0;padding:0;
    	list-style-type:none;
    	position:relative;
    	top:88px;
    	left:172px;
    	_margin-top:88px;
    	_margin-left:172px;
    	background-image:url(images/nav.center.gif);
    }
    #logo ul li {
    	float:left;
    	height:30px;
    	border-right:1px solid #6C6C6C;
    	background-image:url(images/nav.left.gif);
    	background-repeat:no-repeat;
    	padding:0 0 0 3px;
    }
    #logo ul li a {
    	padding:0 10px;
    	height:30px;
    	line-height:30px;
    	background-image:url(images/nav.right.gif);
    	background-repeat:no-repeat;
    	background-position:center right;
    	color:#fff;
    	text-decoration:none;
    	text-transform:uppercase;
    	display:block;
    	_width:20px;
    	white-space:nowrap;
    }
    #container {
    	width:728px;
    	border-left:1px solid #8C9CB1;
    	border-right:1px solid #8C9CB1;
    	border-bottom:1px solid #8C9CB1;
    	background-color:#fff;
    	margin:0 auto;
    	background-image:url(images/bar.gif);
    	background-position:top center;
    	background-repeat:no-repeat;
    	padding:30px 10px 10px;
    }
    		</style>
    	</head>
    <body>
    <div id="header">
    	<div id="logo">
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Practise Tests</a></li>
    			<li><a href="#">Members</a></li>
    			<li><a href="#">Other</a></li>
    			<li><a href="#">Documentation</a></li>
    		</ul>
    	</div>
    </div>
    <div id="container">
    	<br/><br/><br/>
    </div>
    </body>
    </html>
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #2
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    I think the problem is in the filename and not the CSS. This is just a guess, but I'm pretty sure you can't have two periods in the filename, only one for the file extension. Try using dashes instead.

    If you still need the extra periods, try adding quotation marks around the filename. For example:
    Code:
    background-image:url("images/nav.bg.gif");
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Neither of those helped...but thanks for trying.

    Anyone else?
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #4
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Assuming you want the repeated background image to be the one on the UL, you need to add a height to it for it to show. This is because your LI's are floated so they don't cause the UL to expand. Try this:

    Code:
    #logo ul {
    	margin:0;padding:0;
    	list-style-type:none;
    	position:relative;
    	top:88px;
    	left:172px;
    	_margin-top:88px;
    	_margin-left:172px;
    	background-image:url(images/nav.center.gif);
    	height: 30px;
    }
    This leads to some other issues but fixes the background image not showing. I don't know if you've read this article, but A List Apart has a tutorial on "Sliding door" navigation that can fix some of the issues here.

    Good Luck!
    Last edited by medigerati; 07-25-2007 at 05:31 PM.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Oh yeah how could i forget that!

    Thanks alot medigerati, i added to your reputation!
    Daniel Warner
    - - - - - - - - - -
    GuitarMart.co.uk - Free Online Classified Advertisement for Guitarists in the United Kingdom. Free Ads with a Free Photo.

  • #6
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    My pleasure and thanks for the rating. Let me know if you need any more help with it.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.


  •  

    Posting Permissions

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