Home/ Questions/Q 9092301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:48:33+00:00

In my CSS, I’ve created a menubar <div> and a header <div> . My

  • 0

In my CSS, I’ve created a menubar <div> and a header <div>. My intention is to have the menu line flush with the BOTTOM of the header’s background image, so I’ve nested the menu inside the header. Alas, it’s not working, and I can’t figure out why.

I’ve created a fiddle, but I can’t figure out how to upload the associated image file, so I’ve attached the header placeholder imageheader background placeholder. I’ve also uploaded a Wireframe Wireframe demonstrating what I’m trying to make happen.

If you’re not able to view the fiddle, here’s my HTML and CSS:

HTML:

<!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ------------------------------------------------------------------------>
<head>
    <title>Test</title>
    <LINK rel="stylesheet" href="t2.css" type="text/css">
</head>
<!-- ------------------------------------------------------------------------>

<body>
    <div id="header" >
        <div id="menubar">
            <a href="#">home</a>  |  <a href="#">about</a>  |  <a href="#">contact</a>
        </div>
    </div>
</body>
</html>

CSS:

body     {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 12px;
    }

h1    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 2em;
    }

h2    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1.5em;
    margin-left: 5%;
    }

h3    {
    background-color: #FFFFFF;    
    color: #000064;
    font-family: "Calibri", sans-serif;
    font-size: 1em;
    margin-left: 20%;
    }

p    {
    background-color: #FFFFFF;
    color: #000064;
    font-family: "Calibri", sans-serif
    font-size: 12px;
    padding: 0px 0px 0px 600px;
    margin: 0px:
    float: bottom;
    }

a    {
    color: #000064;
    text-decoration: none;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    }

a.visited {
    color: #640064;
    weight: bold;
    text-decoration: none;
    }

#header {
    height: 120px;
    background-color: #ffffff;
    background-image: url(headerblock.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    float: bottom;
    }

#menubar {
    border-width: 1px 0px 1px 0px;
    border-color: #000064;
    border-style: solid;
    font-family: "Calibri", sans-serif;
    font-size: 14px;
    line-height: 16px;
    float: bottom;
    padding: 0px 0px 0px 600px;
    margin: 0px 0px 0px 0px;
    }

#menubar a {
        text-decoration: none;
        color: #000064;
        float: bottom;
        }

#menubar a.visited {
    text-decoration: bold;
    color: #000000;
    float: bottom;
        }

Anyone have any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put the image in a separate div, all inside the header, like so:

    <div id="header">
    <div id="banner"></div><!--
 --><div id="menubar"></div>
</div>

    Then use display: inline-block; on #banner and #menubar.
    Note the HTML comment after #banner and before #menubar. It’s to remove the white space between those elements, you can remove it if you don’t care about the blank space. Look at this for more info: Fighting the Space Between Inline Block Elements.

    Check this fiddle.

    By the way, you should use <ul> and <li> for your navigation.
    And use borders on your separators, instead of |. That’s for presentation, and presentation should be handled with css, not html.

    • 0