DIV in a DIV
Hey guys,
Found this free-to-use CSS template and I'm trying to insert a DIV CSS menu into a certain position but everytime i insert the DIV in between another DIV tag the menu doesn't show properly at all. It removes all formatting.
The code for the layout is:
And the code for the menu is located here:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css" media="screen">
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "Verdana", tahoma, verdana, arial, sans-serif;
overflow: hidden;
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:200px; position:relative; z-index:3; word-wrap:break-word;}
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:100px; background:#fff; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:51px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:100px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
<style type="text/css" media="print">
html {padding:0; margin:0; border:0; background:#fff; font-size:10pt; font-family: arial, sans-serif;}
body {padding:0; margin:0; border:0;}
#content {display:block; position:relative; z-index:3; word-wrap:break-word;}
#head {display:none;}
#printhead {height:100px; background:#fff; font-size:24pt; color:#000; border-bottom:1px solid #000;}
#printfoot {height:50px; background:#fff; color:#000; text-align:right; font-size:12pt; border-top:1px solid #000; margin-top:20px;}
#foot {display:none;}
</style>
</head>
<body>
<div id="printhead">www.s7u.co.uk - Cutting Edge CSS</div>
<div id="head">
<div class="pad1"></div>
Header
</div>
<div id="content">
<a name="Top"></a>
<div class="pad2"></div>
<h2> </h2>
<p>You can now add the header and footer using position:absolute; with a suitable z-index such that it appears over the content div. When the content is scrolled it will disappear under the header / footer.</p>
<p>BUT note that the header and footer will need to be positioned right:18px; to avoid covering the scroll bar. This will make the header and footer overhang the left of the screen by 18px so you may need a 'pad' of 18px to bring header and footer back on screen.</p>
<p>© 2004/5/6 Stuart Nicholls</p>
<p class="bold">Works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>
<p>NN7 displays correctly but an absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
<a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Basics2" title="Your comments">Your comments</a>
<br />
<a href="#Top">Top</a><br />
<a href="#Middle">CSS - the body tag</a>
<br><br>
<div class="pad2"></div>
</div>
<div id="foot">Footer</div>
<div id="printfoot">Copyright ©2004/5/6 Stu Nicholls</div>
</body>
</html>
http://css.maxdesign.com.au/listamatic/horizontal13.htm
Basically I wanna add the menu from above into the "Header" section of the website. I can't seem t fit it into there.
Thanks for any help guys.
pitfall
CSS Codes
Reply With Quote
Bookmarks