div tags overlapping

nev02 · 15-Oct-2007, 11:32 AM #1

hi there!

just wondering if anyone can help

i'm trying to make a template with CSS. one annoying problem is that the editable region in the middle of the header and footer overlaps the footer when i enter in information. is there a way to push the footer tag down as the editable regions height is increased ?

if anyone can help that would be great cheers!

Fyzbo · 15-Oct-2007, 12:10 PM #2

It would be very helpful to see the code for your website. Is it published somewhere? By default divs will be listed one after another from the top down. The overlapping must relate to one of the styles, but I can't be sure without the code.

nev02 · 15-Oct-2007, 12:26 PM #3

sorry i'm new to this forum thing never done one b4 my boss recommended it to me as i'm a beginner. anyway here's the code


<style type="text/css">

</style>
<link href="../newstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>

<body>
<div class="clearfix" id="wrapper">
<div id="header"><img src="../images/header_menu.jpg" width="770" height="34" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="18,9,202,27" href="#" alt="verandahs" />
<area shape="rect" coords="238,11,374,27" href="#" alt="gazebos" />
<area shape="rect" coords="416,9,552,27" href="#" alt="porches" />
<area shape="rect" coords="590,9,758,27" href="#" alt="walkways" />
</map></div>
<div id="headergraphic"><img src="../images/header_image.jpg" alt="header graphic" width="770" height="308" border="0" usemap="#Map3" />
<map name="Map3" id="Map3"><area shape="rect" coords="282,78,326,96" href="#" alt="home " />
<area shape="rect" coords="280,102,340,122" href="#" alt="gallery" />
<area shape="rect" coords="282,126,356,140" href="#" alt="technical" />
<area shape="rect" coords="278,148,330,166" href="#" alt="quote" />
<area shape="rect" coords="282,170,366,186" href="#" alt="contact us " />
</map></div>
<div id="menu"><img src="../images/footer_menu.jpg" width="770" height="33" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="rect" coords="20,7,156,27" href="#" alt="pergolas" />
<area shape="rect" coords="234,7,510,27" href="#" alt="smoking shelters" />
<area shape="rect" coords="604,7,750,27" href="#" alt="car ports" />
</map></div>
<div id="content">
<p> </p>
<p> </p>
</div>
<div id="infobar">
<table class="footer" width="770" height="59" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="712"><div align="right">
<p>home . gallery . quote . contact us<br />
© the past re-cast ltd<br />
site by: michaelassociates</p>
</div></td>
<td width="58"><div align="center"><img src="../images/footer_image.jpg" width="55" height="40" /></div></td>
</tr>
</table>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";

body { background-image: url(images/background_grey.jpg); background-repeat:repeat-y; background-position:center;}

#wrapper {
position:relative;
width:770px;
height: 100%;
z-index:1;
margin: auto;
top: -15px;
background-image: url(images/background_grey.jpg);
background-repeat: repeat-y;
}
#header {
position:absolute;
left:0px;
top:-1px;
width:770px;
height:37px;
z-index:1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
background-color: #690169;
text-align: center;
padding-top: 5px;
visibility: visible;
}
#headergraphic {
position:absolute;
left:0px;
top:41px;
width:770px;
height:75px;
z-index:2;
visibility: visible;
}
#menu {
position:absolute;
left:0px;
top:511px;
width:770px;
height:42px;
z-index:3;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
background-color: #690169;
color:#FCEFBC;
text-align: center;
padding-top: 5px;
visibility: visible;
}
#content {
position:absolute;
left:0px;
top:351px;
width:770px;
height:500px;
z-index:5;
background-color: #FFFFD9;
height:160px;
max-width:770px;
visibility: visible;
clear:both;
}
#infobar {
position:absolute;
left:0px;
top:569px;
width:770px;
height:56px;
z-index:6;
background-color: #FFFFD9;
visibility: visible;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
font-weight: bold;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

.footer {
font-family:Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bolder;
position: absolute;
width: 770px;
visibility: visible;
top: -13px;
height: 45;
}

Fyzbo · 15-Oct-2007, 01:19 PM #4

In your css most classes have position:absolute. This tells the browser to force the content to that location regardless of what else is there. So your footer will always be in the same place no matter how long the content gets.

You can change the top: position of the footer to make sure it is below the content or what I would recommend is changing your styles so that everything is positioned relative to other items on the page.

Are you using a program or wysiwyg to generate your code?

nev02 · 16-Oct-2007, 04:51 AM #5

i changed the position to relative but then everything on page split up and now my content is hidden behind the header image, also the footer has come out of the wrapper even though its its within the wrapper div tags in the code.

nev02 · 16-Oct-2007, 07:00 AM #6

no worries i've sorted it out. thanks for yer help fyzbo. not quite the pure CSS page but not bad for a 1st time i guess once again cheers!

Fyzbo · 16-Oct-2007, 08:48 AM #7

I'm glad you figured it out. Web development takes a lot of time and research congrats on entering the field.

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)