...

View Full Version : Page contents are centered, but some graphics keep floating..



tomcatexodus
02-13-2009, 03:52 AM
I suppose I need to take a different approach to the layout choice I've made, but I figure that what I've done can be worked with.

My page is set in a container, 800px wide. Body is set to center alignment so that the contents (the container and rest of the page) centers in browsers, and the container is set to left alignment so that everything in the container (the rest of the page) is back to normal.

The problem is, that I have images that need to be in each of the four corners of the page, and they float static when the browser is resized, while the rest of the page centers itself. (in fact, the one image in the lower left hand corner is fine, the ones that have a left value, and therefore are on the right top and bottom corners, are the problem ones.)

Maybe the code will help, the lines in red at the bottom are the problem images, one of them appears to be fine;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>.:genuinfo productions:.</title>

<style type="text/css">
*{
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

a:link, a:visited, a:active{
text-decoration:none;
color:#000000;
}

a:hover{
text-decoration:underline;
color:#000000;
}

body{
text-align:center;
background:#000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #000000;
}

h1{
line-height:36px;
}

hr{
color:#000000;
}

#idContainer{
text-align:left;

height:100%;

width:800px;
}

#idHeader{
position:relative;
width:800px;
height:100px;
background-color:#FFFFFF;
z-index:0;
}

#idBody{
position:relative;
width:800px;
height:400px;
background-color:#FFFFFF;
z-index:0;
}

#idFooter{
position:relative;
width:800px;
height:100px;
background-color:#FFFFFF;
z-index:0;
}

#idNavbar{
position:relative;
width:800px;
height:20px;
}

#idCopyright{
position:absolute;
width:400px;
height:50px;
left:275px;
top:25px;
text-align:center;
vertical-align:middle;
}

#idUpdates{
position:absolute;
width:480px;
left:275px;
top:25px;
height: 330px;
overflow:auto;
padding:10px;
border:solid #000000 1px;
}

#idComicslist{
position:absolute;
width:225px;
left:25px;
top:25px;
height: 250px;
}

</style>

</head>

<body>

<!--MAIN CONTAINER-->
<div id="idContainer">

<!--PAGE HEADER-->
<div id="idHeader">
<img src="IMAGES/GENUINFO-LOGO1.GIF" alt="Genuinfo Productions" width="350" height="64" style="padding:10px;"/>
<!--TOP NAVIGATION BAR-->
<div id="idNavbar">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="75px"><a href="index.html">Home</a></td>
<td align="center" width="5px">|</td>
<td align="center" width="75px">Comics</td>
<td align="center" width="5px">|</td>
<td align="center" width="75px">News</td>
<td align="center" width="5px">|</td>
<td align="center" width="75px">Design</td>
<td align="center" width="5px">|</td>
<td align="center" width="75px">Contribute!</td>
<td align="center" width="5px">|</td>
<td align="center" width="75px">About</td>
</tr>
</table>
</div>
</div>

<!--PAGE MAIN SECTION-->
<div id="idBody">
<!--COMICS MENU AT LEFT-->
<div id="idComicslist" style="vertical-align:middle;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><div align="center"><img src="IMAGES/AMARANTH-LOGO1.GIF" width="100" height="78" /></div></td>
<td colspan="3"><div align="center"><img src="IMAGES/VAGINAPO-LOGO1.GIF" width="100" height="78" /></div></td>
</tr>
<tr>
<td><div align="center">Recent</div></td>
<td><div align="center">|</div></td>
<td><div align="center">Archive</div></td>
<td><div align="center">Recent</div></td>
<td><div align="center">|</div></td>
<td><div align="center">Archive</div></td>
</tr>
<tr>
<td colspan="3"><div align="center"><img src="IMAGES/UNRELEAS-LOGO1.GIF" width="87" height="100" /></div></td>
<td colspan="3"><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">Recent</div></td>
<td><div align="center">|</div></td>
<td><div align="center">Archive</div></td>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</div>
<!--SITE UPDATES AT RIGHT-->
<div id="idUpdates">
<table width="460px" border="0" cellspacing="0" cellpadding="0" style="text-align:justify;">
<tr>
<td><h1>Wednesday, February 11th, 2009 - 10:21 PM EST</h1></td>
<tr>
<tr>
<td>
<p>Content Content Content</p>
</td>
</tr>
<td><hr width="460px" noshade="noshade" size="1px;" /></td>
</tr>
<tr>
<td><h1>Thursday, October 23rd, 2008 - 2:34 AM EST</h1></td>
</tr>
<tr>
<td>
<p>Content Content Content</p>
</td>
</tr>
</table>
</div>
</div>

<!--PAGE FOOTER-->
<div id="idFooter">
<!--COPYRIGHT CRAPOLA-->
<div id="idCopyright">
<p>Copyright &copy; 2008 Genuinfo Productions, All rights reserved.</p>
<p>Some images are property of other companies. A list can be found here.</p>
</div>
</div>

<!--IMAGE LAYOUT; GRAFFED PAGE CORNERS-->
<img src="IMAGES/GENUINFO-GRAF1.GIF" width="250" height="100" style="position:absolute; top:0px; left:550px; z-index:1;" />
<img src="IMAGES/GENUINFO-GRAF2.GIF" width="250" height="200" style="position:absolute; top:400px; z-index:1;" />
<img src="IMAGES/GENUINFO-GRAF3.GIF" width="100" height="100" style="position:absolute; top:500px; left:700px; z-index:1;" />

</div>
</body>

</html>

abduraooft
02-13-2009, 07:10 AM
have a try by giving position:relative; to your #idContainer.

PS: Why tables for layout is stupid? (http://www.hotdesign.com/seybold/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum