SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

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

    Menu Help Needed

    Hi Guys,

    I'm fairly new to CSS and am trying to convert a design from tables for practice. A main sticking point i have is with the menu.

    CSS Version:
    http://www.sixthsense-esp.co.uk/CSS/needmotorsport.htm

    Tables Version:
    http://www.sixthsense-esp.co.uk/needmotorsport/1.htm

    I have set the rectangles behind the menu as a background image in the div which is then positioned. Problem is, the text is not lining up nicely (the distance between each menu item is smaller).

    I was wondering how to fix this, or if there was a better way of doing a menu like this.

    Thanks

    The CSS if needed:
    Code:
    /* BODY */
    
    body
    { 
    background-color: #FFFFFF;
    margin: 0 0 0 0; /*top right bottom left*/
    padding: 0 0 0 0;
    }
    
    
    /* FONT */
    
    
    h1 {
    font-family: arial;
    font-size: 100%;
    color: #44A5E2;
    font-weight:bold;
    }
    
    h2 {
    font-family: arial;
    font-size: 80%;
    color: #44A5E2;
    }
    
    p {font-family: arial; font-size: 12px; color: #808080; text-align: justify;}
    p a:link {color: #5DB2E8; text-decoration: none;} 
    p a:visited {color: #5DB2E8; text-decoration: none;}
    p a:hover {color: #5DB2E8; text-decoration: none;}
    p a:active {color: #5DB2E8; text-decoration: none;}
    
    p.menu {font-family: arial; font-size: 12px; color: #E1F1FB; text-decoration: none; line-height: 20px; text-align: right;}
    p.menu a:link {color: #E1F1FB; text-decoration: none;} 
    p.menu a:visited {color: #E1F1FB; text-decoration: none;}
    p.menu a:hover {color: #FFFFFF; text-decoration: none;}
    p.menu a:active {color: #E1F1FB;text-decoration: none;}
    
    p.logo {font-family: arial; font-size: 0pt; color: #E1F1FB; text-decoration: none; text-align: right}
    
    li {
    list-style-type: none;
    line-height: 150%; 
    }
    
    hr {
    border: 0px none;
    width: 100%;
    color: #9ECEEC;
    background-color: #9ECEEC;
    height: 1px
    }
    
    /* LAYOUT */
    
    
    a img {border: none; }
    
    #logo {
    position: absolute; top: 0px; left: 0px;
    width: 248px;
    height: 138px;
    padding: 0 0 0 0; /*top right bottom left*/
    background-color:#5DB2E8;
    margin: 0;
    margin-top: 0px;
    font-weight: normal;
    }
    
    #topright {
    position: absolute; top: 0px; left: 5px;
    width: 642px;
    height: 111px;
    padding: 27px 0px 0 0; /*top right bottom left*/
    margin-top: 0px;
    margin-left: 243px;
    background-image: url('NeedMotorsport/top-repeat.gif');
    background-repeat: repeat;
    background-color:#CCCCCC;
    } 
    
    #navigation {
    position: absolute; top: 138px; left: 0px;
    width: 232px;
    height: 100%;
    padding: 0 16px 0 0; /*top right bottom left*/
    background-color:#5DB2E8;
    margin: 0 0 0 0;
    margin-top: 0px;
    font-weight: normal;
    background-image: url('NeedMotorsport/menu-background.gif');
    background-repeat: no-repeat;
    background-position: 96px 4px; 
    }
    
    #centerDoc {
    position: absolute; top: 138px; left: 5px;
    width: 626px;
    height: 600px;
    padding: 0 0 0 16px; /*top right bottom left*/
    background-color:#FFFFFF;
    margin-top: 0px;
    margin-left: 243px;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try using a list for a menu instead of the paragraphs.

    <ul>
    <li>link1</li>
    </ul>

    etc..


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
  •