I'm constructing a website which was going fine until I tried inserting layers. When I put in a layer and positioned it as relative instead of absolute, it put in a big space above the masthead which should appear at the top of the page. Everything else is in place, it's just that I have a bit gap of nothing at the top. Any advice?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
MAKING PAGE APPEAR AT T0P
- Thread starter pinkbabe
- Start date
traingamer
Programmer
That's not really enough information.
It's possible (even likely) that your relative layer is positioned relative to another layer / div and not to the page as you may be expecting.
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
It's possible (even likely) that your relative layer is positioned relative to another layer / div and not to the page as you may be expecting.
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
- Thread starter
- #3
This is the code I have so far on the page. It's the Alien that I'm having trouble with. If I use absolute positioning for it, even though it looks fine in dreamweaver it pushes it slightly left in my browswer. If I change it to relative position (as I've done below) and use the correct co-ordinates for where I want it placed, the further I want the Alien to be down the page, the bigger the gap it leaves at the top.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(images/starsglow.gif);
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Alien {
position:relative;
left:755px;
top:650px;
width:246px;
height:300px;
z-index:1;
}
-->
</style></head>
<body>
<div id="Alien"><img src="images/alien.png" alt="alien" width="246" height="300" /></div>
<table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center"><img src="images/masthead.png" alt="masthead" width="1045" height="179" /></div></td>
</tr>
<tr>
<td height="75"><div align="center"><img src="images/navmenu.png" alt="navmenu" width="881" height="30" /></div></td>
</tr>
<tr valign="middle">
<td height="500" align="center"><div align="center"><img src="images/frame.png" alt="frame" width="887" height="254" align="middle" /></div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(images/starsglow.gif);
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Alien {
position:relative;
left:755px;
top:650px;
width:246px;
height:300px;
z-index:1;
}
-->
</style></head>
<body>
<div id="Alien"><img src="images/alien.png" alt="alien" width="246" height="300" /></div>
<table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center"><img src="images/masthead.png" alt="masthead" width="1045" height="179" /></div></td>
</tr>
<tr>
<td height="75"><div align="center"><img src="images/navmenu.png" alt="navmenu" width="881" height="30" /></div></td>
</tr>
<tr valign="middle">
<td height="500" align="center"><div align="center"><img src="images/frame.png" alt="frame" width="887" height="254" align="middle" /></div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
traingamer
Programmer
Positioning absolutely removes the object from the normal flow (that is, everything fills in the space it would have occupied as if it isn't there).
Relatively positioning reserves the space that the object would occupy and moves the object relative to its parent container (in this case the body of the page).
The gap you see at the top is the space that the Alien div would occupy if you hadn't moved it.
What are you actually trying to accomplish?
If you want the Alien div to appear on top, you could use absolute positioning. (I wouldn't, because you will not be able to see whatever is underneath it.)
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
Relatively positioning reserves the space that the object would occupy and moves the object relative to its parent container (in this case the body of the page).
The gap you see at the top is the space that the Alien div would occupy if you hadn't moved it.
What are you actually trying to accomplish?
If you want the Alien div to appear on top, you could use absolute positioning. (I wouldn't, because you will not be able to see whatever is underneath it.)
Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
- Thread starter
- #5
Basically how I want the page to look is to for the masthead to be at the top (centred), the navbar underneath (centred), the frame underneath that and the alien overlaps the frame (appears in the right hand side of it but with bits overlapping the top and bottom).
- Status
Similar threads
- Locked
- Question