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
  • #22965

    Help is the link for the template I made:


    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" ""&gt;

    <html xmlns=""&gt;


    <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" />


    <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>

    </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" –>



    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!


    Can anyone assist me with this?

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