Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Menu Help

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 22, 2008 at 10:24 pm #22965
    james.davis
    Member

    Help is the link for the template I made:

    viewtopic.php?f=3&t=460

    Here is the CSS I wrote for the masthead which includes the header and the main menu:

    #masthead {
    height: 185px;
    background-image: url(‘../images/bkgdHeader.png’);
    background-position: left top;
    background-repeat: repeat-x;
    z-index: 0;
    }

    h1#logo {
    width: 931px;
    height: 129px;
    margin: 0 auto;
    background-image: url(‘../images/imgMasthead.png’);
    background-repeat: no-repeat;
    text-indent: -9999px;
    z-index: 1;
    }

    ul#main-menu li {
    width: 931px;
    height: 51px;
    display: inline;
    z-index: 2;
    }

    ul#main-menu li a {
    background-image: url(‘../images/bkgdIcon.png’);
    }

    If needed here is my html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>New Unity Church Ministries | Home</title>

    <link rel="stylesheet" type="text/css" href="scripts/default.css" media="screen" />

    </head>

    <body id="home">

    <div id="masthead">

    <h1 id="logo">NUCM | The Equipping Ministry</h1>

    <ul id="main-menu">
    <li class="home"><a href="home.html">Home</a></li>
    <li class="about"><a href="about.html">About Us</a></li>
    <li class="believe"><a href="believe.html">What We Believe</a></li>
    <li class="schedule"><a href="schedule.html">Ministry Schedule</a></li>
    <li class="events"><a href="events.html">Upcoming Events</a></li>
    <li class="city"><a href="city.html">Our City</a></li>
    <li class="action"><a href="action.html">Church in Action</a></li>
    <li class="request"><a href="request.html">Prayer Request</a></li>
    <li class="giving"><a href="giving.html">Online Giving</a></li>
    </ul>

    </div> <!– End "masthead" –>

    <div id="page-wrap">

    <div id="main-content">

    <div id="content-area">

    <img id="vision" src="images/imgVision.png" width="152" height="187" alt="Habakkuk 2:2" />

    <h2>The Vision</h2>
    +

    </div> <!– "content-area" –>

    <div id="sidebar">

    </div> <!– "sidebar" –>

    </div> <!– "main-content" –>

    </div> <!– End "page-wrap" –>

    </body>

    </html>

    I cannot get my menu to overlap the logo. Also, my background image for links on the main menu has been cut short. I know I am missing something simple but I cannot figure it out. I tried using z-index but it did not work. Can someone please provide some assistance? Thanks!

    July 23, 2008 at 10:46 am #48668
    james.davis
    Member

    Can anyone assist me with this?

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.