SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Menu in CSS

  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu in CSS

    Hello,

    I'm doing a menu in CSS using Unordered Lists. The menu is horizontally aligned, and what I actually need is:

    I need to have 3-4 menu items on the left side of the screen, and 1 on the right side. Something like:

    Menu1 | Menu2 | Menu3 | [this space should take all the free space] | MenuRight |

    Or should I use table as a solution?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might find the answer here.

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot! That's exactly what I need!

    But there is a slight problem in IE, I have a background-color change on link hover, and when I apply float to the left items, I got background-color of the link cut, but with the right one everything is fine! Any ideas, hacks for IE?

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can we see a link/code?

  5. #5
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure, sorry

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>UAEchat - Conversation</title>

    <style type="text/css">
    body
    {
    padding: 0;
    margin: 0;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    /* Layout */
    div#Wrapper
    {

    }

    div#Header
    {
    height: 120px;
    }

    div#TopMenu
    {
    background-color: #eeeeee;

    padding: 5px;
    padding-left: 20px;

    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    }

    /* END OF Layout */

    /* TopMenu */
    ul.TopMenu
    {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 12px;

    text-align: right;
    }

    ul.TopMenu li
    {
    display: inline;
    }

    ul.TopMenu li.Left
    {
    float: left;
    }

    ul.TopMenu li a:link, ul.TopMenu li a:visited
    {
    text-decoration: none;
    color: #000099;

    padding: 5px 10px;
    }

    ul.TopMenu li a:hover
    {
    text-decoration: none;
    color: #ffffff;
    background-color: #000099;
    cursor: default;
    }
    /* END OF TopMenu */
    </style>
    </head>

    <body>
    <div id="Wrapper">
    <div id="Header">
    <img width="200" height="100" />
    </div>

    <div id="TopMenu">
    <ul class="TopMenu">
    <li class="Left"><a href="#">Chat options</a></li><li class="Left"><a href="#">Help</a></li><li><a href="#">Log Out</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>


    you can see in IE that left menus are not fully highlighted as the right one

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a little more complicated because you need to make the anchors display: block which means you end up having to float the righthand list item right after all:

    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">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
     <title>UAEchat - Conversation</title>
     
     <style type="text/css">
     * { margin: 0; padding: 0; }
     
     body { font-family: Verdana, Arial, Helvetica, sans-serif; }
     
     div#Header { height: 120px; }
     
     div#Top-Menu {
     background-color: #eeeeee;
     padding-left: 20px;
     border-top: 1px solid #999999;
     border-bottom: 1px solid #999999;
     }
     
     /* END OF Layout */
     
     /* TopMenu */
     ul.TopMenu
     {
     padding: 0;
     margin: 0;
     list-style: none;
     font-size: 12px;
     height: 30px;
     text-align: right;
     overflow: hidden;
     }
     
     ul.TopMenu li { display: inline; }
     
     ul.TopMenu a {
     float: left;
     display: block;
     width: 90px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     text-decoration: none;
     }
     
     ul.TopMenu .right a { float: right; }
     
     ul.TopMenu li a:link, ul.TopMenu li a:visited { color: #000099; }
     
     ul.TopMenu li a:hover  { color: #ffffff; background-color: #000099; cursor: default; }
     /* END OF TopMenu */
     </style>
     </head>
     
     <body>
     	<div id="Wrapper">
     		<div id="Header"><img width="200" height="100" /></div>
     		
     		<div id="Top-Menu">
     		<ul class="TopMenu">
     			<li class="Left"><a href="#">Chat options</a></li>
     			<li class="Left"><a href="#">Help</a></li>
     			<li class="right"><a href="#">Log Out</a></li>
     		</ul>
     		</div>
     	</div>
     </body>
     </html>

  7. #7
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot! You made my day Regards!!!


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
  •