...

View Full Version : css vertical centering problem



singedpiper
07-06-2005, 07:17 PM
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



<!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?

Beeper
07-06-2005, 09:14 PM
Try this,

I have tried to comment as much as possible :)


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum