Forums > Center in All Resolutions!

Full Version: Center in All Resolutions!

Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics

wintermelody

Dec 3 2008, 12:59 AM

I don't know how to center my website in all resolutions! I've tried the solutions I found on google but it's still not working!

HTML;

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SLHS's Key Club - The Kiwis =)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<center>
<body bgcolor=#DBE5F1 leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<!-- ImageReady Slices (dec.psd) -->
<table width=653 border=0 cellpadding=0 cellspacing=0>
	<tr>
		<td>
			<img src="images/index_01.gif" width=163 height=313 alt=""></td>
		<td>
			<img src="images/index_02.gif" width=164 height=313 alt=""></td>
		<td>
			<img src="images/index_03.gif" width=163 height=313 alt=""></td>
		<td>
			<img src="images/index_04.gif" width=163 height=313 alt=""></td>
	</tr>
	<tr>
		<td colspan=4>
			<img src="images/index_05.gif" width=653 height=531 alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->

<div class="wrapper">
<!-- START OF CONTENT -->
<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="content">

<h1><span>T</span>he Holidays =)</h1>
<img src="images/avatar.gif" align="left">Welcome back from Thanksgiving Break, Key Clubbers. Such a pity that it went by <em>so</em> fast D: But Winter Break is coming <strong>soon</strong>, so that's something to look forward to =)

<p>I'm <em>excited</em> to show this new layout that I can't wait till Thursday to put it up :] I <strong>really</strong> like this layout, esp. because I didn't like the layout for November. It's <u>not</u> your average bright red & green Christmas layout. Instead, soft winter colors plus snowflakes are presented :) I hope you will like it too :3 Ok...maybe the color scheme isn't much appealing to those who don't like bright/soft colors- sorry! Deal with it for this month >:]

<p>Okay, I'll update with <em>real</em> content after this week's meeting. In the meantime, <strong>stay warm</strong>!

<p style="text-align: right;"><img src="images/sig.png" alt=""><br>Kiwied on <strong>12.02.08</strong> (=

<p>P.S. I know that it's not centered in <em>all</em> resolutions...I'm working on it!


</p></td></tr>
</table>

<!-- End of Content -->

<!-- Start of Navigation -->

<div id="navcontainer">
<ul id="navlist">
<div id="navigation">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="navigation">
<h1><span>N</span>avigation</h1>
<li><a href="http://www.freewebs.com/keyclubsl/">Main</a>
<li><a href="aboutkc.html">About</a>
<li><a href="members.html">Board Members</a>
<li><a href="events.html">Events</a>
<li><a href="motm.html">Member of the Month</a>
<li><a href="http://slkeyclub.dotphoto.com">Photo Gallery</a>
<li><a href="hours.html">Member Hours</a>
<li><a href="newsletters.html">Newsletters</a>
<li><a href="cheers.html">D2 Cheers</a>
<li><a href="chat.html">Time To Chat!</a>
<li><a href="credits.html">Credits</a>

<br>

<h1><span>O</span>ther Links</h1>
<li><a href="http://cnhkeyclub.org/">CNH Key Club</a>
<li><a href="http://d2kiwis.org">D2 Kiwis</a>
<li><a href="http://www.keyclub.org/">Key Club International</a>
<li><a href="http://alamedakeyclub.bravehost.com">Alameda</a>
<li><a href="http://ehskeywees.org/">Encinal</a>
<li><a href="http://www.ohskeyclub.org/">Oakland</a>
<li><a href="http://groups.google.com/group/d02_cnhbees0809">D2 Reflector Group</a></u></li>
<br>


</center>

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

<!-- End of Navigation -->

</div>
</body>
</html>

CSS;

CODE

body {
background-color: #DBE5F1;
background-image: url('images/index_05.gif');
background-repeat: repeat-y;
background-attachment: fixed;
background-position: center; 
}

div.wrapper {
text-align: left;
margin-left: auto;
margin-right: auto;
}

 #navigation {
background-color: #FFF;
font-family: Georgia, Arial, sans-serif;
position: absolute;
top: 0px;
left: 300px;
width: 160px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #91B9DE;
}

#navcontainer a:link, #navlist a:visited
{
color: #FFF;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #BCEBEA;
color: #34ADAB;
}

#content {
background-color: #FFF;
position: absolute;
top: 325px;
right: 440px;
width: 289px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

blockquote {
margin-top: 10px; 
margin-bottom: 10px; 
margin-left: 50px; 
padding-left: 15px; 
border: 1px dotted #159E8E; 
}

a:link {
color: #159E8E;
background-color: #DCF4F9;
font-family:Georgia;
font-style: italic;
font-size: 9px;
text-transform: none;
text-decoration: none;
letter-spacing: 2px;
}

a:visited {
color: #159E8E;
background-color: #DCF4F9;
font-family:Georgia;
font-style: italic;
font-size: 9px;
text-transform: none;
text-decoration: none;
letter-spacing: 2px;
}

a:hover {
font-family: Georgia, Arial;
font-size: 9px;
text-transform: none;
text-decoration: none;
cursor: ne-resize;
}

table, td, tr {
font-family: Georgia;
color: #1878B5;
font-size: 10px;
border: none;
}

h1 {
border-bottom: 1px dotted #96ADD5;
color: #A9BFDF;
padding: 3px;
font-family: Arial;
font-size: 12.5px;
letter-spacing: 1px;
text-transform: Uppercase;
}

h1 span {
font-family: Georgia;
color: #507CBE;
font-size: 33px;
line-height: 80%;
font-style: italic;
}


h2 {
color: #A6A9DD;
font-size: 16.5px;
font-family: Lucida Sans, Georgia, Arial;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
letter-spacing: 5px;
text-align: center;
}

h3 {
color: #89D576;
font-style: italic;
font-size: 17.5px;
text-align: center;
font-family: Times New Roman;
margin: 10px 0px 0px 0px;
text-transform: Capitalize;
}

b, strong {
color: #84B5E7;
}

i, em {
color: #6BC773;
}

u {
color: #E2A5D0;
}

newkidontheblock

Dec 3 2008, 05:29 PM

if you want to keep something center in all resolution you cannot use

CODE

position: absolute;

Here is an example of centered content:

CODE

/* Edit to suit your neet 
	-------------------------------------- */
	
	body {
		background-color: #EEE;
		text-align: center; /* Require for Internet Explorer 6 */
		margin: 0px; /* Require */
}

	p {
		margin: 0px;
}

	#page_content {
		background-color: #FF0000;
		height: 500px; 
		margin: auto; /* Require */
		width: 500px; /* Require change width to suit your need! */
}

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" lang="en" xml:lang="en">
<head>
	<title> Test Page </title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="Stylesheet" href="style.css" type="text/css" id="style" />
</head>	
<body id="body" >
	<div id="page_content" >
		<p> Content Here! </p>
	</div>
</body>
</html>

PM me if you need more help... I can recode your design for you ->

wintermelody

Dec 3 2008, 11:19 PM

Ok...I will PM for more help!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.