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 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    list-style-image on an inline list?

    hello-

    so i was told by my web design teacher that i should code my navbar as a list, whether it is vertical or horizontal... i am using a horizontal navbar and want to use my own custom image as the bullets... but from my research (google) i think that you cannot use "list-style-image" on a list that has "display:inline"... is this true? how can i use my own image as bullets on a horizontal navbar?

    my css
    Code:
    #navbar {
      text-align: center;
      font-size: 1.4em;
      background: #cccccc url("../images/fade.gif");
      background-repeat: repeat-x;
      border: 2px outset #cc0000;
      padding-top: 1px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 1px;
      height: 35px;
      width: 80%;
      }
    
    #navbar ul {
      list-style-image: url("../images/bullet.gif");
      margin-left: 0;
      margin-bottom: 0;
      }
    
    #navbar li {
      display: inline;
      margin-left: 10px;
      margin-right: 10px;
      }
    my html
    Code:
    <div id="navbar">
      <ul>
        <li><a href="index.html" class="current">Home</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="pictures.html">Pictures</a></li>
        <li><a href="fun.html">Fun</a></li>
        <li><a href="shops.html">Shops</a></li>
        <li><a href="aboutme.html">About Me</a></li>
        <li><a href="sitemap.html">Site Map</a></li>
        <li><a href="links.html">Links</a></li>
      </ul>
    </div>
    thanks in advance for your help...

    ps - i am coding to xhtml 1.0 strict

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Instead of using "display: inline" you could use "float: left" on the <li>s...

    I haven't tried this with bullets (or list-style-image) but I think it should work with a little padding. If it doesn't, you could always use a background image on the <li>s, too:

    Code:
    li {
     float: left;
     display: block;
     width: 100px;
     height: 25px;
     padding-left: 10px;  /* the width reserved for the background image */
     background: url(bullet.gif) no-repeat 0px 10px; /* the "bullet"... adjust these numbers to taste */
     }
    Something like this should work. Hope this helps...

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inline lists

    Some browsers (IE? Not sure here...) seem to ditch bullets on inline lists, including image based ones; as Richard indicated, you can always use background images to create bullets. This is the preferred method for normal lists as well, by the way, since there's more control over the images (if every list item is uniquely identified, you can even have a different bullet for each list item).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks to you both for your replies...

    rmedek, your code works perfectly thank you so much, i've got it exactly how i want it... didn't even occur to me to use background images duh...

    thanks again,
    TheRoper
    Last edited by TheRoper; 05-19-2005 at 08:55 PM.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Glad I could help.

  • #6
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for bumping the generation old thread, but this thread got me to this site.

    So I was trying out the same method as mentioned in the thread and I seem to have a problem. I have a feeling that this has got nothing to do with the method itself but something else that I am missing.

    On IE7 the top navigation bar is coming out very well. (see 2nd attached image)
    On FF2 however, the background image of 'list item' and the 'link text' both are floating down. (see 1st attached image)

    Please see the image.

    HTML
    Code:
    	<div id="rightcolumn">
    		<div id="topnav">
    		<div class="leftfloat">
    			<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Home</a></li>
    			</ul>
    		</div>
    		<div class="rightfloat">
    			<ul>
    			<li><a href="#">About us</a></li>
    			<li><a href="#">Sitemap</a></li>
    			</ul>
    		</div>
    	</div>
    CSS
    Code:
    #rightcolumn {
    	width:835px;
    	float:right;
    	background-color:#ffffff;
    	margin:0px;
    	padding:0px;
    	}
    	
    #topnav {
    	background-color:#4f6373;
    	width:835px;
    	height:22px;
    	background-image:url(../images/top-nav-right.gif);
    	background-position:right;
    	background-repeat:no-repeat;
    	margin:0px;
    	padding:0px;
    	}
    	
    div#topnav li {
    	float:left;
    	display:block;
    	width:80px;
    	height:22px;
    	padding:4px 0 0 21px;
    	background:url(../images/hex-bullet.gif) no-repeat 0 0px;
    	}
    	
    .leftfloat {
    	float:left;
    	margin:0px;
    	padding:0px;
    	}
    
    .rightfloat {
    	float:right;
    	margin:0px;
    	padding:0px;
    	}
    Attached Thumbnails Attached Thumbnails list-style-image on an inline list?-ff.png   list-style-image on an inline list?-ie7.jpg  
    Last edited by Roc; 07-28-2007 at 06:24 PM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    .leftfloat ul, .rightfloat ul {
    margin:0;
    padding:0;
    }
    See if that helps any.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot aerospace_eng.
    I virtually set margin and padding to 0 to everything except that. :P
    Works like a charm.
    I would have repped you but I am in grey so wouldnt matter.

  • #9
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by Roc View Post
    Thanks a lot aerospace_eng.
    I virtually set margin and padding to 0 to everything except that. :P
    Works like a charm.
    A little tip. Instead of setting margin and padding to 0 on every element in your stylesheet, just put this:

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    That will remove all default margin and padding and it will be a lot easier to code things. And it results in a lot less code, because with this you've declared a zero margin and padding only once.
    .
    .

  • #10
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks thats extremely helpful!!


  •  

    Posting Permissions

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