Log In · Register

 
Center in All Resolutions!, I'm getting frustrated D:
wintermelody
post Dec 3 2008, 12:59 AM
Post #1


Senior Member
***

Group: Member
Posts: 31
Joined: Jul 2007
Member No: 552,713
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;
}
 

Posts in this topic
wintermelody   Center in All Resolutions!   Dec 3 2008, 12:59 AM
Fawaz   if you want to keep something center in all resolu...   Dec 3 2008, 05:29 PM
wintermelody   Ok...I will PM for more help!   Dec 3 2008, 11:19 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic