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
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question css vertical centering problem

    i used the neg margins hack on my site, but it wont work for some reason

    i'm supposed to have a centered (in both directions) div with a smaller vertically centered div inside it... here's the code

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Apostolic Design - Catholic Web Media</title>
    <META http-equiv="Content-Type" content="text/html; charset= ISO-8859-1">
    <meta name="resource-type" content="document">
    <meta name="distribution" content="global">
     <meta name="description" content="A Roman Catholic design company that offers beautiful and functional websites at a low price.">
     <meta name="keywords" content="Roman, Catholic, Web, Design, Roman Catholic, Web Design, Website, HTML, CSS, XHTML, 
     JavaScript, PHP, Dynamic, Code, Markup, Company, Moral, Internet, Homepage, Web, Site, English, Skilled, Cheap, Easy, Helpful">
    <meta name="copyright" content="2005 - Apostolic Design">
    <meta http-equiv="Content-Language" content="EN">
    <meta name="Revisit-After" content="0 Days">
    <META name="robots" content="index,follow">
    
    <style type="text/css">
    
    body 
    	{
    	font-family: Arial, Verdana, Geneva, sans-serif;
    	color: black;
    	margin: auto;
    	background: #888;
    	text-align:center;
    	}
    
    #surround
    	{
    	width: 640px;
    	height: 100%;
    	overflow: hidden;
    	margin: auto;
    	}
    
    #container    
    	{
    	z-index:2;
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	text-align: left;
    	margin: auto;
    	top: 50%;
    	margin-top: -150px;
    	position:relative;
    	width: 640px;
    	height:300px;
    	background: url(graphics/indexbubble.gif) #33a bottom left repeat-x;
    	overflow: hidden;
    	visibility: visible;
    	}
    #inner
    	{
    	z-index:2;
    	font-family: Arial, Verdana, Geneva, sans-serif;
    	font-size: 0px;
    	font-weight: bold;
    	text-align: left;
    	top: 50px;
    	margin:auto;
    	position:relative;
    	width: 640px;
    	height:173px;
    	overflow: hidden;
    	visibility: visible;
    	}
    	
    #topline
    	{
    	position: relative;
    	top: 0px;
    	width:640px;
    	height: 35px;
    	background: url(graphics/indexbg.gif) #33a bottom left repeat-x;
    	color: #fff;
    	line-height: 19px;
    	text-align: right;
    	letter-spacing: 1px;
    	font-family: arial, verdana, helvetica, sans-serif;
    	text-transform: uppercase;
    	font-weight: bold; 
    	font-size: 11px;
    	text-decoration: none;
    	} 
    
    #header
    	{
    	z-index:2;
    	position: relative;
    	left:4px;
    	top: -140px;
    	visibility: visible;
    	}
    
    #filltop
    	{
    	position: relative;
    	z-index:0;
    	top: 0px;
    	width:640px;
    	height: 110px;
    	text-align: right;
    	float: right;
    	font-family: Arial, Verdana, Geneva, sans-serif;
    	color: #000;
    	}
    
    #filltop p
    	{
    	margin: 5px 30px 0px 0px;
    	}
    
    #nav-menu
    	{
    	position: relative;
    	z-index:1;
    	top: -157px;
    	width:640px;
    	height: 35px;
    	background: url(graphics/indexbg.gif) #33a bottom left repeat-x;
    	color: #fff;
    	line-height: 33px;
    	text-align: center;
    	letter-spacing: 1px;
    	font-family: arial, verdana, helvetica, sans-serif;
    	text-transform: uppercase;
    	font-weight: bold; 
    	font-size: 20px;
    	text-decoration: none;
    	} 
    
    #nav-menu span
    	{
    	text-indent: 90px;
    	}
    
    #nav-menu ul
    	{
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	} 
    
    #nav-menu li
    	{
    	float: right;
    	margin: 1px 0em;
    	padding: 0;
    	text-align: center
    	} 
    
    #nav-menu li a
    	{
    	top: -5px;
    	height: 35px;
    	line-height: 35px;
    	float: left;
    	width: 150px;
    	display: block;
    	border-left: 2px solid #fff;
    	color: #fff;
    	text-align: center;
    	letter-spacing: 1px;
    	font-family: arial, verdana, helvetica, sans-serif;
    	text-transform: uppercase;
    	font-weight: bold; 
    	font-size: 30px;
    	text-decoration: none;
    	background-color: transparent;
    	
    	} 
    	
    .navitem a 
    	{
    	letter-spacing: 1px;
    	font-family: arial, verdana, helvetica, sans-serif;
    	padding: 0px 3px 0px 1px; 
    	margin-top: 0px;
    	text-transform: uppercase;
    	font-weight: bold; 
    	text-decoration: none;
    	background-color: transparent;
    	}
    
    #nav-menu li a:hover 
    	{
    	color: #ff8;
    	}
    #thetext
    	{
    	z-index:2;
    	font-family: Arial, Verdana, Geneva, sans-serif;
    	font-size: 15px;
    	font-weight: bold;
    	text-align: center;
    	top: 55px;
    	margin:auto;
    	position:relative;
    	width: 640px;
    	height:100px;
    	overflow: hidden;
    	visibility: visible;
    	}
    
    #cover    
    	{
    	position:absolute;
    	top:50%;
    	margin-top: -150px;
    	z-index:10;
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	text-align: left;
    	width: 640px;
    	height:300px;
    	background-color: transparent;
    	overflow: hidden;
    	}
    #cover a
    	{
    	display: block;
    	width: 100%;
    	height:100%;
    	line-height: 300px;
    	text-decoration: none;
    	}
    
    </style>
    </head>
    <body>
    <div id="surround">
    	<div id="container">
    		<div id="inner">
    			<div id="topline">&nbsp;PHONE: 802.748.7866  &nbsp;&nbsp;&nbsp;&nbsp; FAX: 802.748.6246&nbsp;&nbsp;</div>
    			<div id="filltop">
    				&nbsp;<img src="graphics/world.gif">
    			</div>
    			<div id="header">
    				<img src="graphics/biglogo.gif" alt="Apostolic Design"/>
    			</div>
    			<div id="nav-menu">
    				<span style="float: left"><b>Catholic Web Media</b></span>
    				<ul>
    					<li><a href="home.html">ENTER</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
    				</ul>
    				<br>
    			</div>
    		</div>
    		<div id="thetext">
    			<i>A Catholic design company specializing in Web Design, Graphics, and Dynamic Scripting</i>
    		</div>
    	</div>
    	<div id="cover"><a href="home.html">&nbsp;&nbsp;</a></div>
    </div>
    </body>
    </html>
    btw, the header styles are simply for this index page, so its not terrible

    help?

  • #2
    New Coder
    Join Date
    Jun 2005
    Location
    London
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this,

    I have tried to comment as much as possible

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    /* commented backslash hack for explorer \*/ 
    html, body{height:99.8%;} 
    /* end hack */
    
    /* Set default padding and margin to 0 */
    html,body {margin:0;padding:0}
    
    /* Just going to set a font for fun */
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #666666;
    }
    
    body {
    	background-color: #FFFFFF;
    	text-align: center; /* ensure explorer centers */
    	min-width:640px;/* stop mozilla sliding off the edge */
    }
    .fullsize {
    	min-height:99.8%;
    	margin-bottom:0;
    	height:auto;
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	text-align: left;
    	width: 640px;
    	padding:5px;
    	background:#FF0000;
    	border:1px solid #333333;
    }
    
    /* Change the width to allow for Explorer borders */
    * html .fullsize {height:99.8%;width:638px;}</style>
    </head>
    
    <body>
    <div class="fullsize">everything in here</div>
    </body>
    </html>
    Last edited by Beeper; 07-06-2005 at 09:20 PM.
    Never argue with an idiot.
    They just drag you down to their level...
    ...and beat you with experience.


    -----------------------------------------

    That which is static and repetitive is boring.
    That which is dynamic and random is confusing.
    In between lies art.


  •  

    Posting Permissions

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