Results 1 to 8 of 8

 

Thread: CSS inline horizontal lists

  1. 08-08-07 #1
    gadget
    Registered User
    Status
    Offline
    Join Date
    Nov 2004
    Location
    Wirral, Merseyside
    Posts
    2,205
    Thanks
    60
    Thanked 112 Times in 86 Posts


    Anyone up for helping me out with some basic css?
    I'm trying to create a simple horizontal list to use as the top navigation, whilst being true to CSS.
    For some reason, the following code does not produce a horizontal list.
    I'm convinced it 99% right but can't find that magical final part.
    I'm using IE6.

    HTML CODE

    <head>
    <link href="master.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="header">
    <div id="menu">
    <ul>
    <li><a href="index.html">Item One</a></li>
    <li><a href="sitemap.html">Item Two</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    CSS CODE

    body {
    color: #000000;
    margin: 0 auto;
    padding: 0;
    background: #000000; font-size:76%; font-family: Arial, Helvetica, sans-serif;
    }

    body {
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    }

    /* TOP MENU */

    #menu {
    clear: left;
    float: left;
    width: 100px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    }

    #menu ul {
    list-style: none;
    white-space: nowrap;
    width: 100px;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 1.1em;
    }

    #menu li {
    margin-bottom: 4px;
    display: inline;
    list-style-type: none;
    }

    #menu li a {
    font-weight: bold;
    height: 20px;
    width: 100%;
    text-decoration: none;
    color: #000000;
    display: block;
    padding: 6px 0 0 10px;
    background: #FE7C02;
    border-left: 4px solid #FFA500;
    }

    #menu li a:hover {
    background: #FFA500;
    color: #000000;
    border-left: 4px solid #FE7C02;
    }
    Reply With Quote Reply With Quote
  2. 08-08-07 #2
    jonsp
    Registered User
    Status
    Offline
    Join Date
    Jun 2006
    Posts
    628
    Thanks
    7
    Thanked 70 Times in 67 Posts
    The problem is the width you've set on the ul and #menu of 100px, this is too narrow for the list items to sit next to each other. By changing the width to auto on ul removing it from #menu and giving the li a width in ems (so they resize with text size) it works. Also better to use float:left rather than display:inline on the li.
    #menu ul {
    list-style: none;
    white-space: nowrap;
    width: auto
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 1.1em;
    }

    #menu li {
    margin-bottom: 4px;
    float:left;
    width:8em;
    margin-right:6px;
    }

    To make this behave in IE6 we'd also need a conditional comment -
    Code:
    <!--[if lte IE 6]>
<style>
#menu a {height:1%;}
#menu li{height:1%;}
</style>
<![endif]-->
    Cheers,
    Jon
    Last edited by jonsp; 08-08-07 at 11:51 AM. Reason: Correction
    Reply With Quote Reply With Quote
  3. 08-08-07 #3
    gadget
    Registered User
    Status
    Offline
    Join Date
    Nov 2004
    Location
    Wirral, Merseyside
    Posts
    2,205
    Thanks
    60
    Thanked 112 Times in 86 Posts
    It's official .. you're a genius!

    Does the IE6 comment sit with the CSS or in the header of the HTML?

    Very much appreciated.
    Reply With Quote Reply With Quote
  4. 08-08-07 #4
    jonsp
    Registered User
    Status
    Offline
    Join Date
    Jun 2006
    Posts
    628
    Thanks
    7
    Thanked 70 Times in 67 Posts
    It needs to go after </style> - just before </head> is probably the easiest place

    Cheers,
    Jon
    Reply With Quote Reply With Quote
  5. 08-08-07 #5
    gadget
    Registered User
    Status
    Offline
    Join Date
    Nov 2004
    Location
    Wirral, Merseyside
    Posts
    2,205
    Thanks
    60
    Thanked 112 Times in 86 Posts
    Thank you, very much appreciated.
    Reply With Quote Reply With Quote
  6. 08-08-07 #6
    gadget
    Registered User
    Status
    Offline
    Join Date
    Nov 2004
    Location
    Wirral, Merseyside
    Posts
    2,205
    Thanks
    60
    Thanked 112 Times in 86 Posts
    Jon - any chance you could help me out again pls?

    It works fine using IE6 but it doesn't work with IE7!
    Reply With Quote Reply With Quote
  7. 09-08-07 #7
    moredial
    Registered User
    Status
    Offline
    Join Date
    Nov 2003
    Location
    London
    Posts
    680
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Most of the gremlins in IE6 are also in IE7. To include all versions of IE replace the first line with
    Code:
    <!--[if IE]>
    If you want some really cool menu effects and code that works for most browsers, do a search for skidoo layouts.
    Reply With Quote Reply With Quote
  8. 09-08-07 #8
    gadget
    Registered User
    Status
    Offline
    Join Date
    Nov 2004
    Location
    Wirral, Merseyside
    Posts
    2,205
    Thanks
    60
    Thanked 112 Times in 86 Posts
    moredial - thank you (again!).
    Reply With Quote Reply With Quote


« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Questions on CSS page layouts
    By accelerator in forum Programming
    Replies: 4
    Last Post: 14-11-06, 02:34 PM
  2. IE7 - CSS Problems - Check your site!
    By kevquinlan in forum Programming
    Replies: 5
    Last Post: 10-11-06, 11:27 PM
  3. CSS new starter
    By renamecor in forum Programming
    Replies: 15
    Last Post: 11-09-06, 10:35 PM
  4. How to Build An Opt-In Mailing Lists?
    By piano in forum Media Coverage & PR Strategy
    Replies: 0
    Last Post: 31-08-06, 07:54 PM
  5. Panorama Holidays UK and Manos stock lists up-dated (including summer 07)
    By VickiM in forum Affiliate Future
    Replies: 0
    Last Post: 07-06-06, 01:04 PM

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
  •  

Forum Rules

To Top

Content Relevant URLs by vBSEO 3.5.0 RC2