Overlapping DIVs: one isn't blocking the other

[Liam Gibbs]

Hello everyone.

I'm having a problem with a web page. What I have is one DIV (a
header) overlapping the border around another DIV (a menu block). I
want this, because I want to put this header overtop the border of the
menu. The problem is that the border is still showing through the
text, giving it a strikethrough appearance. What I need is for the
menu header to block that part of the border. An example is here:
http://www.altmarvel.net/Liam/whatiwant.jpg. The first menu is what
I'm getting, and the second is what I need.

I first tried a background image which was just a black square and set
the background-repeat attribute. That didn't work (and, since the
colours of the site will probably change, I'd have to create a new
background image every time I try a new colour set).

I've done a search on the Internet and in this group, but haven't come
up with anything quite like what I need. (Maybe I'm using the wrong
search string?) Does anybody have any solutions?

Here is my CSS code. If you know a more efficient way of doing this,
I'd love to hear it.
menu-header {
font-size: .8em;
margin-bottom: -5px;
border-left: 1px solid;
border-right: 1px solid;
width: 60%;
}

In case it matters, here is my HTML code:
<div class="menu-header">Main Menu</div>
<p class = "box-menu">
<a class = "menuitem" href = "index.php">Home</a><br>
<a class = "menuitem" href = "Products.php">Products</a><br>
<a class = "menuitem" href = "Locations.php">Locations</a><br>
<a class = "menuitem" href = "Accounts.php">Accounts</a><br>
<a class = "menuitem" href = "Contact_Us.php">Contact Us</a>
</p>
Thanks, everyone!

[Ben C]

On 2008-06-11, Liam Gibbs <li*******@sympatico.cawrote:

Hello everyone.

I'm having a problem with a web page. What I have is one DIV (a
header) overlapping the border around another DIV (a menu block). I
want this, because I want to put this header overtop the border of the
menu. The problem is that the border is still showing through the
text, giving it a strikethrough appearance. What I need is for the
menu header to block that part of the border. An example is here:
http://www.altmarvel.net/Liam/whatiwant.jpg. The first menu is what
I'm getting, and the second is what I need.

I first tried a background image which was just a black square and set
the background-repeat attribute. That didn't work (and, since the
colours of the site will probably change, I'd have to create a new
background image every time I try a new colour set).

Just set a background colour-- if you don't set one you get background:
transparent.

The image should have also worked.

You also need to make sure menu-header is stacked on top of box-menu,
which may mean for example adding position: relative and z-index: 1 to
menu-header.

[Jonathan N. Little]

Liam Gibbs wrote:

Hello everyone.

I'm having a problem with a web page. What I have is one DIV (a
header) overlapping the border around another DIV (a menu block). I
want this, because I want to put this header overtop the border of the
menu. The problem is that the border is still showing through the
text, giving it a strikethrough appearance. What I need is for the
menu header to block that part of the border. An example is here:
http://www.altmarvel.net/Liam/whatiwant.jpg. The first menu is what
I'm getting, and the second is what I need.

I first tried a background image which was just a black square and set
the background-repeat attribute. That didn't work (and, since the
colours of the site will probably change, I'd have to create a new
background image every time I try a new colour set).

I've done a search on the Internet and in this group, but haven't come
up with anything quite like what I need. (Maybe I'm using the wrong
search string?) Does anybody have any solutions?

Here is my CSS code. If you know a more efficient way of doing this,
I'd love to hear it.
menu-header {
font-size: .8em;
margin-bottom: -5px;
border-left: 1px solid;
border-right: 1px solid;
width: 60%;
}

In case it matters, here is my HTML code:
<div class="menu-header">Main Menu</div>
<p class = "box-menu">
<a class = "menuitem" href = "index.php">Home</a><br>
<a class = "menuitem" href = "Products.php">Products</a><br>
<a class = "menuitem" href = "Locations.php">Locations</a><br>
<a class = "menuitem" href = "Accounts.php">Accounts</a><br>
<a class = "menuitem" href = "Contact_Us.php">Contact Us</a>
</p>

Firstly I would use a list for your links, because it IS a list of links...

Need to specify a background...here is one way with only 1 class...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>template</title>

<style type="text/css">
body { color: #fff; background: #000; }
div.menu {
width: 8em; /* adjust for content */
position: relative;
padding: 1em .25em .25em .25em; /* pad top for header */
}
div.menu div {
/* postion header where you want */
position: absolute; left: 1.25em; top: .25em; width: 6em;
/* color it */
color: #fff; background: #000;
border-left: 1px solid #fff; border-right: 1px solid #fff;
text-align: center;
}
div.menu ul {
font-family: sans-serif;
margin: 0; padding: .5em;
border: 1px solid #fff;
list-style: none
}
div.menu a {
/* mimic your design...not what I would do */
text-decoration: none;
color: #f00;
}
</style>
</head>
<body>

<div class="menu">
<div>Main Menu</div>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="Products.php">Products</a></li>
<li><a href="Locations.php">Locations</a></li>
<li><a href="Accounts.php">Accounts</a></li>
<li><a href="Contact_Us.php">Contact Us</li>
</ul>
</div>
</body>
</html>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com