SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image for lists?

    I'm having a little trouble with aligning a background image to my nav list <li>items.

    The image repeats along all of the page (which is an easy fix) but the problem I'm having a lot more trouble with is having each <li> with its own background image. Also, for some reason, the background image is resizing itself when displayed.

    Do I need to assign a class for each list item?

    Link and code is below.

    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" xml:lang="en" lang="en">
    <head>
    	<link href="master.css" rel="stylesheet" type="text/css" media="all" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Page Mockup 1</title>
    	
    </head>
    
    <body> 
    	<div id="header"></div>
    		<div id="nav">
    			<ul id="nav">
    				<li>Home</li>
    			</ul>
    	</div>
    </body>
    </html>
    css:
    Code:
    * {
      margin: 0px;
      padding: 0px;}
    
    body {
      background:#fff;
      font-family:"Lucida Grande",tahoma,sans-serif;
      font-size:11px;
    }
    #header {
      position: relative;
      height: 70px;
      background: #333;
      text-align: left; 
    }
    #nav {
      height: 20px;
      background: #ADD8E6;
      text-align: center;
      border-top: 1px solid #fff;
    }
    #nav ul {
      border-top:0px;
      text-align:left;
      color:#333;
    }
    #nav li {
      list-style:inline;
      list-style-type:none;
      background-image:url('images/home.jpg');
      text-align:left;
    }

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your stylesheet (http://www.americansportsgamer.com/test/master.css) is blank.

    1) IDs should be unique. You could use a class instead.

    Class and ID Selectors
    When should I use a class and when should I use an ID?
    Use class with semantics in mind
    The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS

    Multiple elements may belong to the same class and an element may belong to multiple classes. The X/HTML class attribute's value may be a space separated list of classes.

    2) Yes, if you want a different background image on each list item, you'll need to give each one a class or ID.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Wow, I've no idea how that happened - something odd must have happened when uploaded. Its fixed now though.

  4. #4
    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)
    The background image is not resizing itself, just the <li> is only the height of the text. As the links will contain <a> elements, display the <a>s as blocks, give them a size to suit the graphic, and apply the graphics to the <a> instead of the <li> (this will allow you to change the graphic on the hover for a rollover if needed). The <li>s can be floated left, and the <ul> styled to eliminate the div (and multiple id). Try html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<link href="master.css" rel="stylesheet" type="text/css" media="all">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Page Mockup 1</title>
    </head>
    
    <body> 
    	<div id="header"></div>
    		<ul id="nav">
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Link2</a></li>
    			<li><a href="#">Link3</a></li>
    			<li><a href="#">Link4</a></li>
    		</ul>
    </body>
    </html>
    and css :
    Code:
    * {
      margin: 0;
      padding: 0;
    }
    body {
    	font-family:"Lucida Grande",tahoma,sans-serif;
    	font-size:11px;
    	background-color: #FFFFFF;
    }
    #header {
    	height: 70px;
    	background-color: #333333;
    }
    #nav {
    	height: 20px;
    	border-top: 1px solid #FFFFFF;
    	padding-left: 100px;
    	background-color: #ADD8E6;
    }
    #nav li {
    	float: left;
    	display: inline;
    	list-style: none;
    }
    #nav a {
    	display: block;
    	width: 75px;
    	height: 20px;
    	background-image: url('images/home.jpg');
    	color: #333333;
    	text-align: center;
    	text-decoration: none;
    	line-height: 20px;
    }
    #nav a:hover {
    	font-weight: bold;
    	color: #000;
    }
    Cheers
    Graeme

  5. #5
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Graeme, cheers for that. It never ceases to amaze me how powerful CSS is.


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
  •