laying a menu on top of a div layer [Archive]

View Full Version : laying a menu on top of a div layer

bgdcham

01-11-2009, 04:46 PM

I have been struggling for the last 2 days trying to figure out how to code a menu on top of my div layer. Every code I have tried isn't working. I know this is easy to do. I did it years ago, but no I have completely forgotten. I'd appreciate help to finally finish my design. Thank you.

I have enclosed a picture of what I want. The pink area is what I've already created. The blue is the type of menu areas I want.

If you go to http://www.bebemybaby.com you will see what the website looks like. I want the blue menu to overlap the pink border a bit.

Here is the code I've tried to do. I know it's pretty messy. I apologize.

ETA: I have uploaded an updated graphic of what I want the layout to look like with the menus. I hope this helps. I want to make div layers (the blue) on top of the content area (pink) with regular text links. I'm not ready to venture futher and want a simple "cutsy" rounded design. Does this photo help at all?

For the record the short coding I have done on the menu area is commented by /* Menu round edges */. If you look towards the bottom of the code I put it there.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>



<head>
<title>Bebe My Baby Online Nursery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="CoffeeCup Free HTML Editor - www.coffeecup.com">
<meta name="description" content="Bebe My Baby online nursery is a place of lifelike ">
<meta name="keywords" content="reborns, reborn, newborns, newborn, girl, boy, twins, triplets, multiples, baby dolls, baby, toddler, infant, child, dolls, babies, stillborn, miscarriage, trying to conceive, ooak, one of a kind, vinyl, Ashton Drake, kit, Lee Middleton">
<meta name="author" content="Ashley Brackett">

<style type="text/css">
body {background: #49280D;
font: 14px "Comic Sans MS", "Arial", Arial, sans-serif;
color: #49280D;
}

A:link
{ text-decoration: none; color:#e7736b; }
A:visited
{ text-decoration: underline; color:#FEDEDE; }
A:active
{ text-decoration: none; color:#49280D; }
A:hover
{ text-decoration: underline; color:#49280D; }




</style>
</head>

<center><img src="http://www.bebemybaby.com/gifs/bmbheader.gif" alt="Bebe My Baby"></center>

<p><center><img src="http://www.bebemybaby.com/gifs/bransonpic.gif" alt="Branson By Ashley" width="250"> <img src="http://www.bebemybaby.com/gifs/emersenpic.gif" alt="Emersen By Ashley" width="250"> <img src="http://www.bebemybaby.com/gifs/keyferpic.gif" alt="Keyfer By Jennifer" width="250"></center></p>
<center>

<div class="menu">
<img src="http://www.bebemybaby.com/basic/TOPborder.gif" alt="Bebe My Baby" />
<div class="inside">
<div class="round-corners">
<img src="http://www.bebemybaby.com/basic/TOPborder.gif" alt="Bebe My Baby" />
<div class="inside">

<center><h3>Welcome to the <a href="http://www.bebemybaby.com">Bebe My Baby</a> Online Nursery</h3> </center>

It is here that dreams become real and dolls become babies. Stop by for a minute to stroll through, and then let us help you bring your very own dream baby to life. <br />
Each of our babies are lovingly handcrafted by us, using our own individual techniques developed specifically to make your baby look real. We pay special attention to each and every detail as we hand paint, and design each baby. No detail is forgotten. When you cradle your new baby for the first time, she will melt in your arms. You may even be so taken aback that you find yourself rocking your wee one as comfort. We create babies that can be enjoyed now and well into the future.

<p></p>

<b>Sign up to get the latest <a href="http://www.bebemybaby.com">Bebe My Baby</a>.com information</b><br />
Leaving your email address here will allow us to automatically send the latest updates about the <a href="http://www.bebemybaby.com">Bebe My Baby</a> nursery and our newest arrivals.<br />


<script type="text/javascript">
function validate_elist_417655922()
{
e = document.getElementById('elist_err417655922');
e.innerHTML="";
regexPattern = "^[-!#$%&'*+./0-9=?A-Z^_`a-z{|}]+@[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~.]+?.+[a-zA-Z]{2,4}$";
if (!document.getElementById('elistaddress417655922').value.match(regexPattern))
{
e.innerHTML += 'Invalid email address';
}
if (e.innerHTML != "") return false;
return true;
}
</script>

<div style="border:0px solid #999999; width:235px; margin: 0px;">
<form action="http://pub28.bravenet.com/elist/add.php" method="post" style="margin:0px;" onsubmit="return validate_elist_417655922()">
<div style="padding:3px; font:12px arial; color:black;"></div>
<div style="margin:10px; font: 11px arial; color: black; text-align:right;">
<div style="margin-bottom:5px;"></div>
Name: <input type="text" id="elistname" name="ename" size="25" maxlength="60" style="width: 170px"><br>
Email: <input type="text" name="emailaddress" id="elistaddress417655922" size="25" maxlength="100" style="width: 170px"><br>
<input type="radio" name="action" value="join" checked style="border: 0px;">Subscribe
<input type="radio" name="action" value="leave" style="border: 0px;">Unsubscribe
<input type="hidden" name="usernum" style="border: 0px solid black; height: 0px; width: 0px;" value="2349752087"><input type="hidden" name="cpv" style="border: 0px solid black; height: 0px; width: 0px;" value="1">
<input type="submit" name="submit" value="GO"></div>
<div style="color: red" id="elist_err417655922"></div>
</form>
</div>


</div>
<img src="http://www.bebemybaby.com/basic/BOTTOMborder.gif" alt="Bebe My Baby" /></div>

</center>
<p></p>
<p><center><img src="http://www.bebemybaby.com/basic/babyline.gif" alt="Bebe My Baby creations"></center><br />
<center><font color="#FE7A7A" size="2">© 2008 - 2009 <a href="http://www.bebemybaby.com">Bebe My Baby</a></font></center>

</body>
</html>

jscheuer1

01-11-2009, 05:12 PM

There is no blue menu.

Snookerman

01-11-2009, 05:14 PM

Do you need help with finding a menu or do you have one in mind already? If you haven't found one yet you could take a look at the DD CSS library (http://www.dynamicdrive.com/style/csslibrary/category/C2/). If you've already tried a menu, please post a link to that specific page.

Good luck!

bgdcham

01-11-2009, 05:28 PM

I didn't include a blue menu in my design I made the menu areas blue so it might make it a little more clear. I'm trying to make a menu on the div layer (pink) that is already in place and have no idea how to do it. I'm hoping someone can get me going on the right track with the base code to overlap (be on top of) the pink layer. I'm drawing a total blank.

There is no blue menu.

bgdcham

01-11-2009, 05:35 PM

Snook,

I have uploaded an updated graphic of what I want the layout to look like with the menus. I hope this helps. I want to make div layers (the blue) on top of the content area (pink) with regular text links. I'm not ready to venture futher and want a simple "cutsy" rounded design. Does this photo help at all?

Do you need help with finding a menu or do you have one in mind already? If you haven't found one yet you could take a look at the DD CSS library (http://www.dynamicdrive.com/style/csslibrary/category/C2/). If you've already tried a menu, please post a link to that specific page.

Good luck!

jscheuer1

01-11-2009, 05:37 PM

Well, you could use floats and relative positioning or possibly negative margins, or just go straight to absolute positioning.

One thing though, your use of the center tag is not recommended. The way to center a block level element is to give it width and set its left and right margins to auto. The way to center text and inline elements is to give their block level parent the text-align: center; style.

For the first part of that to work in some browsers requires a valid URL DOCTYPE, like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

bgdcham

01-11-2009, 05:43 PM

I truly apologize. I really want to understand coding, but I'm new and don't understand how to implement your suggestion on centering nor how to make the menu areas in my document.

Also, am I able to copy and paste the code you left right into my document or do I have to edit in anyway beforehand?

Thank you very much for helping.

Well, you could use floats and relative positioning or possibly negative margins, or just go straight to absolute positioning.

One thing though, your use of the center tag is not recommended. The way to center a block level element is to give it width and set its left and right margins to auto. The way to center text and inline elements is to give their block level parent the text-align: center; style.

For the first part of that to work in some browsers requires a valid URL DOCTYPE, like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

jscheuer1

01-11-2009, 07:23 PM

You can replace your current DOCTYPE with the suggested one.

And, now that I see the current level of your coding experience, I would suggest looking here:

http://www.howtocreate.co.uk/

as any specific design advice I could give you would be over your head. You might be able to copy it to your page if I tailored it to your situation, but you wouldn't understand it or learn much from it.