SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Inline list

  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline list

    I want to create an inline list for a top nav bar so that all of the links sit to the left except for the search box which would be aligned to the right. My problem at the moment is the entire navbar is too wide with the text links on the left vertically aligned in the middle and the search box on the bottom. Here's my coding:

    Code:
     #topmenu ul {
     	margin: 0px;
     	padding-left: 3px;
     	list-style: none;
     }
     #topmenu li {
     	float: left;
     	position: relative;
     	margin: 0px;
     	padding: 0px;
     	color: #ffffff;
     }
     #topmenu li.search {
     	float: right;
     }
    Code:
     <div id="topmenu">
     	<ul>
     		<li><a href="index.htm">Home</a> |</li>
     		<li><a href="sitemap.htm">Site Map</a> |</li>
     		<li><a href="links.htm">Links</a> |</li>
     		<li><a href="help.htm">Help</a> |</li>
     		<li><a href="feedback.asp">Feedback</a> |</li>
     		<li class="search"><label for="search">Search</label> <input type="text" name="search" /></li>
     	</ul>
     </div>

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to add a display: inline to your li styles. <li>are block level elements by default and will start on a new line by default without this style.

    Code:
    #topmenu ul {
     	margin: 0px;
     	padding-left: 3px;
     	list-style: none;
     }
     #topmenu li {
     	float: left;
     	position: relative;
     	margin: 0px;
     	padding: 0px;
     	color: #ffffff;
    	display: inline;
     }
     #topmenu li.search {
     	float: right;
     }

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't cure my problem. The page renders properly in Moz 1.3 and Opera 7 but its in IE6 I have the problem with the nav bar displaying at about 50px high.

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    I'm thinking the problem is you've got the float and the position on the li, and I'm betting it gets confused doing it that way.

    Did you try to put the display: inline on the li.search and also add a <br style="clear:both" /> after the ul just to be sure the floats are brought back into the document flow?

    You could probably get away with removing the position: relative and float:left on the default li and just have the float: right for the other one (you will probably want to have the other margin, padding, color etc on the li.search also just to be sure it's getting applied equally).
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried that Dave and it doesn't work Seems to be with the content floating to the right there's like a block above it which IE6 only displays. This is what I have now:

    Code:
     <style>
     #topmenu ul {
     	 margin: 0px;
     	 padding: 0px 2px;
     	 list-style: none;
     	display: inline;
     }
     #topmenu li {
     	margin: 0px;
     	padding: 0px;
     	color: #ffffff;
     	display: inline;
     }
     #topmenu li.search {
     	margin: 0px;
     	padding: 0px;
     	float: right;
     }
     </style>
     <div id="topmenu">
     	<ul>
     		<li><a href="../index.htm">Home</a> |</li>
     		<li><a href="../sitemap.htm">Site Map</a> |</li>
     		<li><a href="../links.htm">Links</a> |</li>
     		<li><a href="../help.htm">Help</a> |</li>
     		<li><a href="../feedback.asp">Feedback</a></li>
     		<li class="search"><form action=""><label for="search">Search</label>&nbsp;<input type="text" name="search" class="srchbox" /> <input type="submit" name="submit" value="Go" class="srchbtn" /></form></li>
     	</ul>
     </div>

  6. #6
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not with the CSS and HTML posted, I get a topmenu height of about 0px using IE6

    I assume that you have only posted fragments of your code so I sumise
    that it is something that you haven't posted that is causing the problem.

  7. #7
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Try adding #topmenu form { margin: 0px; padding: 0px; } and see if that makes a difference. Forms have a small padding/margin on them by default.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  8. #8
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, already done that, I'd forgotten I'd done a general form { margin: 0px; padding: 0px; }

  9. #9
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    This is a general question
    What is the purpose of using <li> tags if the idea is to have the items side by side? I know <li> are becoming popular as menu sectors, but isn't it just easier saying <span>item1 item2 item 3, etc..

  10. #10
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by jag5311
    This is a general question
    What is the purpose of using <li> tags if the idea is to have the items side by side?
    I know <li> are becoming popular as menu sectors, but isn't it just easier saying <span>item1 item2 item 3, etc..
    It's a good question, and I tend to agree with you, unless you have some
    reason for the items to appear as a vertical list if CSS is disabled, then you don't
    even need spans, just put in a list of <a> tags.


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
  •