vertically center my splash? [Archive]

View Full Version : vertically center my splash?

s.g.d

06-27-2006, 07:36 PM

can anyone suggest a simple method for vertically centering my splash page? i've tried several different methods, but nothing seems to be working.

link is here:
http://www.westnetsolutions.com/dev/regatronics/

Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Regatronics</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="splash.css" rel="stylesheet" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="sneaky.js"></script>
</head>
<body>

<div id="splashHead">
<img src="images/splash_logo.jpg" alt="Regatronics Splash Image" width="214" height="54" style="float:left;" />
<img src="images/splash_tagline.jpg" alt="Splash Tagline" width="214" height="54" style="float:right;" /></div>

<div id="splashImage"><img src="images/splash_image.jpg" alt="Regatronics Splash Image" style="float:left;" /></div>

<div id="contentWrap">

<div id="splashContent">
<div id="frenchBox">
<h1>Français</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin placerat mattis urna.</p>
<a href="en-home.asp" target="_parent">Entrez</a></div>
<div id="englishBox"><h1>English</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin placerat mattis urna.</p>

<a href="en-home.asp" target="_parent">Enter</a></div>
</div>
<img src="images/secondnav_square.jpg" alt="lower sqaure graphic" width="8" height="8" id="square" /></div>

</body>
</html>

CSS:
/****** Regatronics Splash CSS ******/

/****** Specific Divs ******/

#splashHead{

height:60px;

voice-family: "\"}\"";

voice-family:inherit;

height:54px;

width:100%;

background:url(images/splash_tile.jpg) repeat-x;

border-top:6px solid #ababab;

border-bottom:1px solid #ed4a40;

margin:14px 0px 0px 0px;

text-align:left;

}

#splashHead img{

margin:0px;

padding:0px;

}

#splashImage{

height:100px;

width:100%;

background:#ffffff;

border-top:6px solid #ababab;

border-bottom:1px solid #ed4a40;

}

#contentWrap{

height:260px;

width:100%;

background:#ffffff;

border-bottom:1px solid #ed4a40;

text-align:left;

}

#splashContent{

width:610px;

margin:0 auto;

}

#frenchBox, #englishBox{

height:107px;

width:288px;

border:1px solid #7a7a7a;

background:url(images/homebox_tile.jpg) repeat-x;

margin:65px 0px 0px 0px;

padding:0px 0px 5px 4px;

}

#frenchBox{

float:left;

}

#englishBox{

float:right;

}

#square{

clear:both;

float:right;

margin:70px 3px 0px 0px;

}

Thank you very much,
:cool:

harbingerOTV

06-28-2006, 12:13 AM

probally not the greatest but it's easy enough to do.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>center block table style</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
cursor : default;
background-color : #699;
}
table {
height: 100%;
width: 100%;
}
td {
vertical-align: middle;
text-align: center;
}
#container {
text-align: left;
width: 500px;
height: 400px;
background: #ccc;
margin: 0 auto;
position: relative;
}

</style>
</head>
<body>
<table><tr><td><div id="container">

</div></td></tr></table>
</body>

</html>

and it works

_Aerospace_Eng_

06-28-2006, 12:23 AM

If you prefer not to use tables then you can use the CSS2 display table format.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Regatronics</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="splash.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="sneaky.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
#splashHolder { /*display:table and display:table-cell supported in all modern browsers except IE*/
display:table;
height:100%;
width:100%;
position:relative;
}
#splashHoldcell {
width:100%;
vertical-align:middle;
position:relative;
display:table-cell;
}
#splashContain {
position:relative;
}
</style>

</head>
<body>
<div id="splashHolder">
<div id="splashHoldcell">
<div id="splashContain">
<div id="splashHead"> <img src="images/splash_logo.jpg" alt="Regatronics Splash Image" width="214" height="54" style="float:left;" /> <img src="images/splash_tagline.jpg" alt="Splash Tagline" width="214" height="54" style="float:right;" /></div>
<div id="splashImage"><img src="images/splash_image.jpg" alt="Regatronics Splash Image" style="float:left;" /></div>
<div id="contentWrap">
<div id="splashContent">
<div id="frenchBox">
<h1>Français</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin placerat mattis urna.</p>
<a href="en-home.asp" target="_parent">Entrez</a></div>
<div id="englishBox">
<h1>English</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin placerat mattis urna.</p>
<a href="en-home.asp" target="_parent">Enter</a></div>
</div>
<img src="images/secondnav_square.jpg" alt="lower sqaure graphic" width="8" height="8" id="square" /></div>
</div>
</div>
</div>
</body>
</html>
The display:table thing isn't supported by IE so we give it a conditional comment.

s.g.d

06-28-2006, 03:38 PM

Aerospace,

worked great! i had tried something similar but it didn't seem to work, so thanks!. that table-cell, table formatting works quite well.

Thanks very much again!

:thumbsup: