perhaps i am just being blind…
but how can i replicate this …with two vertically centered elements? when i try, and ive been trying it seems that the positioning of the divs in the html affects where it ends up on the page despite the css remaining the same.
here is my page
http://www.philipdusel.com/ggallen.html
i want to add navigational arrows which are achieved w multiple divs using the show/hide behavior so its essential i figure out how to avoid them stacking but remaining centered and retaining their function
thanks!
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Horizontal and vertical centerl</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<style type=“text/css”>
html, body {
height:100%;
margin:0;
padding:0;
}
body {
background:#eae7d7;
text-align:center;
min-width:626px;
min-height:400px;
}
#vertical {
float:left;
height:50%;
margin-top:-198px;/* half vertical height*/
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
text-align:left;
clear:both;
}
.test {
color:#fff;
margin:0;
padding:0;
width:624px;
height:394px;
position:fixed;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
}
#pagecontent {
position:absolute;
left:0;
top:0;
width:100%;
}
</style>
</head>
<body>
<div id=“vertical”></div>
<div id=“hoz”>
<div class=“test”>Content goes here</div>
</div>
<div id=“pagecontent”>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>