Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Hi all.

    I've just started with working on a clients' website and am toying around with this menu.

    But seriously, it's not wanting to play. I just can't get the background images to stay in the right visible position.

    I should be able to do this but for some reason I can't. Could someone please help? Also this is quite urgent.

    URL: http://diddy29.110mb.com/cr/index.html

    HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
    <title>Cornelia Ramsay - Design Concept 1</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
        <div id="logo">
        <img src="logo.png" width="400" height="98" alt="" />
        </div>
        <div id="navcontainer">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </div>
    </body>
    </html>
    CSS:
    Code:
    body
    {
    background: #ffff99;
    margin: 0;
    padding: 0;
    }
    
    div#wrapper
    {
    width: 900px;
    margin: 0 auto;
    padding: 0 auto;
    border: 1px solid black;
    }
    
    div#logo
    {
    width: 100%;
    clear: both;
    }
    
    div#navcontainer
    {
    width: 850px;
    margin: 0 auto;
    padding: 20px 0px 20px 0px;
    border: 1px solid black;
    clear: both;
    text-align: center;
    }
    
    div#navcontainer ul
    {
    margin: 0;
    padding: 0;
    }
    
    div#navcontainer ul li
    {
    list-style-type:none;
    display: inline;
    }
    
    div#navcontainer ul li a:link
    {
    width: 200px;
    height: 55px;
    padding: 20px 71px 20px 71px;
    margin: 0px 10px 0px 10px;
    font-family: arial;
    color: #ffffff;
    font-size: 15px;
    background-image: url(nav1.png);
    text-decoration: none;
    }

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    try this instead:

    Code:
        <div id="navcontainer">
            <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>About</span></a></li>
                <li><a href="#"><span>Register</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
            </ul>
            <div style="clear: both"> </div>
        </div>
    
    
    
    
    div#navcontainer ul {
        margin: 0 0 10px;
    }
    
    div#navcontainer ul li {
        list-style-type: none;
        display: block;
        float: left;
        margin: 0 10px 0 0;
    }
    
    div#navcontainer ul li a,
    div#navcontainer ul li a:link,
    div#navcontainer ul li a:active,
    div#navcontainer ul li a:visited {
        display: block;
        width: 180px;
        height: 50px;
        background-image: url(nav1.png);
        text-decoration: none;
    }
    
    div#navcontainer ul li a span {
        display: block;
        padding: 20px 0;
        text-align: center;
        color: #ffffff;
        font-family: arial;
        font-size: 15px;
        font-weight: normal;
    }

  4. #3
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, thanks Steve, I'll try it out in a sec and get back to you,but knowing you it's going to work. :-D

  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, it worked. Thanks sooooooo much Steve!

    But just a question....how are you getting the list to display horizontally without using display: inline;? I thought you had to do that?

    Also, I added a reverse gradient on hover. Not sure how good it looks though. I've updated the site at the same link provided in the first post. What do you think about the hover? The more I look at it the more I"m thinking to take away the hover.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:55 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com