Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Page contents are centered, but some graphics keep floating..

    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;

    Code:
    <!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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    have a try by giving position:relative; to your #idContainer.

    PS: Why tables for layout is stupid?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •