Sun, 2006-01-01 22:28
I think this is a frequent question. However, I've been looking everywhere and I am still confused. I started my page with a dreamweaver template and have altered it a lot. So I know I have a lot of bloated code. I'm pretty new to CSS. I am using an external style sheet. I am trying to get my main page to look good in many screen resolutions 800X600 and up. I have a box running down the right and lefthand side of my page. However, I'd like to try and center the entire thing so that there will be a white border on the left and right hand side of the page when viewed above 800X600. I notice sites like MSN and Yahoo do this and there pages look good on many resolutions. My page is up at www.mifootball.com I'll paste my external css sheet below. Thanks for any help.
/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/
/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
a.black{
color: #000000;
text-decoration: none;
}
a.black:link{
color: #000000;
text-decoration: none;
}
a.black:visited{
color: #000000;
text-decoration: none;
}
a.black:hover{
color: #000000;
text-decoration: underline;
}
a.white{
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-style: italic;
}
a.white:link{
color: #ffffff;
text-decoration: none;
}
a.white:visited{
color: #ffffff;
text-decoration: none;
}
a.white:hover{
color: #cccccc;
text-decoration: underline;
}
a.red:link{
color: #CC0033;
text-decoration: none;
}
a.red:visited{
color: #CC0033;
text-decoration: none;
}
a.red:hover{
color: #CC0033;
text-decoration: underline;
font-weight: bold;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #000000;
margin: 0px;
padding: 0px;
}
h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #000000;
margin: 0px;
padding: 0px;
}
h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #ffffff;
margin: 0px;
padding: 0px;
}
h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #000000;
margin: 0px;
padding: 0px;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #cccccc;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 130px;
height: 925px;
margin: 0px;
padding: 0px;
background-color: #4B6294;
border-right: 1px solid #4B6294;
}
#headlines{
float:right;
width: 180px;
height: 925px;
padding-left: 1px;
border-left: 1px solid #cccccc;
}
#content{
float: left;
width: auto;
padding-left: 1%;
padding-right: 1%;
}
/***********************************************/
/* Components */
/***********************************************/
#siteName{
margin: 0;
padding: 0 0 0 10px;
}
/*************** #pageName styles **************/
#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}
/************* #breadCrumb styles *************/
#breadCrumb{
font-size: 90%;
padding: 2px 2px 2px 2px;
border-top: 1px solid #cccccc;
}
/************** .feature styles ***************/
.feature{
padding: 0px 0px 0px 0px;
font-size: 80%;
}
.feature h3{
padding: 5px 0px 5px 0px;
text-align: center;
}
.feature img{
float: left;
padding: 10px 10px 0px 0px;
}
/************** .story styles *****************/
.story{
clear: both;
padding: 0px 0px 0px 5px;
font-size: 80%;
}
.story p{
padding: 0px 0px 0px 0px;
}
/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #000000;
padding: 10px 10px 10px 10px;
}
#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}
/************* #search styles ***************/
#search{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
background-color: #4B6294;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #4B6294;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #4B6294;
}
/*********** .relatedLinks styles ***********/
.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
border-bottom: 1px solid #cccccc;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
background-color: #4B6294;
}
.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}
/************** #advert styles **************/
#advert{
padding: 30px 0px 10px;
}
#advert img{
display: block;
}
/************** #headlines styles **************/
#headlines{
margin: 0px;
padding: 0px 0px 0px 3px;
font-size: 80%;
}
#headlines p{
padding: 5px 0px 5px 0px;
}
Sun, 2006-01-01 22:43
#1
Need help centering
CSS isn't much good without the HTML. There is no way to know what each style is applying to.
To centre things, give the element concerned a fixed width and then use margin-left: auto & margin-right: auto (or margin: x auto; where is is some legitimate value for your top and bottom margins)
Sun, 2006-01-01 22:54
#2
Here is the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<title>MIFootball</title>
<meta name="description" content="This site is developing into a one stop solution for all your Michigan high school football needs.">
<meta name="keywords" content="football, michigan, high school, coaches, coach, players, player, fans, fan, officials, official, parents, parent, forum, polls, news, articles">
<link rel="stylesheet" href="mystyles.css" type="text/css" media="screen">
<script type="text/javascript">
/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, "")
}
</script>
<style type="text/css">
<!--
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 240%;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="masthead">
<h1 align="center" class="style2" id="siteName"> MIFootball</h1>
<div id="breadCrumb">
<a href="http://www.mifootball.net/cgi-bin/yabb/YaBB.pl" target="_blank" class="black">Forum</a> / <a class="black" href="http://s132511960.onlinehome.us/tinc?key=sd35Grpw&channel=98896">Chat</a> / <a class="black" href="http://www.mifootball.net/link.htm"> Links </a>
</div>
</div>
<div id="navBar">
<div id="search">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="_top">
<table border="0" bgcolor="#4B6294">
<tr><td width="100" height="32" align="left" valign="top" nowrap="nowrap">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25gry.gif"
border="0" alt="Google"></img></a>
<br/>
<input type="hidden" name="domains" value="www.mifootball.com"></input>
<input type="text" name="q" size="17" maxlength="255" value="">
</input>
</td></tr>
<tr>
<td width="100" nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked="checked"></input>
<font size="-1" color="#ffffff">Web</font>
</td>
<td>
<input type="radio" name="sitesearch" value="www.mifootball.net"></input>
<font size="-1" color="#ffffff">MIFootball</font>
</td>
</tr>
</table>
<input type="submit" name="sa" value="Search"></input>
<input type="hidden" name="client" value="pub-3101714493255275"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#0066CC;GL:1;DIV:#999999;VLC:336633;AH:center;BGC:FFFFFF;LBGC:FF9900;ALC:0066CC;LC:0066CC;T:000000;GFNT:666666;GIMP:666666;FORID:1;"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>
<div class="relatedLinks">
<h3>Main Sections</h3>
<ul>
<li><a class="white" href="http://www.mifootball.net/index.htm">Home</a></li>
<li><strong><a class="white" href="http://www.mifootball.net/coaches.htm">Coaches</a></strong></li>
<li><strong><a class="white" href="http://www.mifootball.net/fans.htm">Fans</a></strong></li>
<li><strong><a class="white" href="http://www.mifootball.net/parents.htm">Parents</a></strong></li>
<li><strong><a class="white" href="http://www.mifootball.net/players.htm">Players</a></strong></li>
<li><strong><a class="white" href="http://www.mifootball.net/teams.htm">Teams</a></strong></li>
</ul>
</div>
<div class="relatedLinks">
<h3><em>Five Hot Sites</em></h3>
<ul>
<li><strong><a class="white" href="http://www.michigan-football.com" target="_blank">Michigan-Football</a></strong></li>
<li><strong><a class="white" href="http://www.mhsfca.com" target="_blank">MHSFCA</a></strong></li>
<li><strong><a class="white" href="http://www.mlive.com/preps/football" target="_blank">M-Live</a></strong></li>
<li><strong><a class="white" href="http://www.michiganhelmetproject.com" target="_blank">Helmet Project</a></strong></li>
<li><strong><a class="white" href="http://www.mhsaa.com/sports/fb/index.htm" target="_blank">MHSAA Football</a></strong></li>
</ul>
</div>
<div class="relatedLinks">
<ul>
<h3><em>Michigan College FB Conferences</em> </h3>
<li><a href="http://bigten.collegesports.com/sports/m-footbl/big10-m-footbl-body.html" target="_blank" class= "white">
Big Ten (D1)</a></li>
<li><a href="http://www.gliac.org/mens/football/default.asp" target="_blank" class="white">GLIAC (D2)</a></li>
<li><a href="http://www.miaa.org/fb/" target="_blank" class= "white">MIAA (D3)</a></li>
</ul>
</div>
<div class="relatedLinks">
<ul>
<li><a href="http://www.nfl.com" target="_blank" class="white">Official NFL Site</a></li>
<li><a href="http://www.ncaa.com" target="_blank" class="white">The NCAA Site</a></li>
<h3><a href="http://msn.foxsports.com/nfl" target="_blank" class="white">Fox Sports NFL</a> <a href="http://msn.foxsports.com/cfb" target="_blank" class="white">Fox Sports CFB</a></h3>
<h3><a href="http://sports-att.espn.go.com/nfl/index" target="_blank" class="white">ESPN NFL </a><a href="http://sports.espn.go.com/ncf/index" target="_blank" class="white">ESPN CFB</a></h3>
<h3><a href="http://www.sportsline.com/nfl" target="_blank" class="white">CBS SL NFL</a> <a href="http://www.sportsline.com/collegefootball" target="_blank" class="white">CBS SL CFB</a></h3>
</ul>
</div>
<div class="relatedLinks">
</div>
<div class="relatedLinks">
<ul>
<a class="white" style="cursor:hand" onclick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.mifootball.com');">Set as Home Page</a>
<a class="white" href="javascript:bookmarksite('MIFootball', 'http://www.mifootball.com')">Add to Favorites</a>
</ul>
</div>
</div>
<!--end navBar div -->
<div id="headlines">
<script type="text/javascript" charset="UTF-8" src="tinc?key=G8juX0C7"></script>
<div id="advert"> <center>
<form action="http://www.amazon.com/exec/obidos/external-search">
<table class="normal" border="0" cellpadding="1" cellspacing="0">
<tr>
<td style="background-color:#fff;">
<table border="0" cellpadding="0" cellspacing="0" align="top" height="90" width="120" style="border: 1px solid #000000 !important;">
<tr>
<td style="background-color:#fff;" height="20" valign="bottom" align="center">
<span style="font-family: verdana,arial,helvetica,sans-serif; font-size:10px !important; font-weight:bold !important;">Search Now:</span>
</td>
<td style="background-color:#fff;"> </td>
</tr>
<tr>
<td style="background-color:#fff;" align="center" height="30" valign="top">
<input type="text" name="keyword" size="10" value="" />
</td>
<td style="background-color:#fff;" height="20" valign="top" align="left">
<input type="hidden" name="mode" value="blended" />
<input type="hidden" name="tag" value="quotationsfor-20" />
<input type="image" border="0" value="Go" name="Submit" src="http://g-images.amazon.com/images/G/01/associates/build-links/ap-search-go-btn.gif" alt="[ Go ]" align="absmiddle" />
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#000;" height="40">
<a href="http://www.amazon.com/exec/obidos/redirect-home/quotationsfor-20">
<img src="http://g-images.amazon.com/images/G/01/associates/build-links/searchbox-logo-126x32.gif" height="36" border="0" width="126" alt="Amazon Logo" /></a>></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
</div>
</div>
<!--end headlines -->
<div id="content">
<div class="feature">
<br>
<h2>Highlight Videos</h2>
<p><font size="-1">Still don't have a team highlight video? Our videos are cheap and high quality. There isn't a better way to motivate your players in the offseason. You can contact us for details at: <a class="red" href="mailto:[email protected]">[email protected]</a></font></p>
<h2>New Poll: <font size="-1">W</font><font size="-1">ho will be a repeat champion? Vote on the <a class="red" href="http://www.mifootball.net/fans.htm">Fans</a> page. </font></h2>
<p><center>
</center></p>
</div>
<div class="story">
<p><img src="fordfield.jpg" width="427" height="319"></p>
<p>Ford Field- Home of the Michigan High School Football Playoffs.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<!--end content -->
<div id="siteInfo">
<center>
<iframe src="http://rcm.amazon.com/e/cm?t=quotationsfor-20&o=1&p=13&l=st1&mode=sporting&search=football&fc1=&=1&lc1=<1=&bg1=&f=ifr" marginwidth="0" marginheight="0" width="468" height="60" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe>
</center>
<center>
<img src="icon.jpg" width="44" height="22"> <a class="black" href="comingsoon.htm" target="_blank">About Us</a> |<a class="black" href="comingsoon.htm" target="_blank"> Site
Map </a>| <a class="black" href="comingsoon.htm" target="_blank">Privacy Policy</a> | <a class="black" href="contactus.htm" target="_blank">Contact Us</a> | ©2005 MIFootball | <img src="http://s132511960.onlinehome.us/tinc?key=QaZuvuoj&no=5">
</center>
</div>
</body>
</html>
Sun, 2006-01-01 23:37
#3
Need help centering
It looks as though you are missing an overall wrapper/container for your elements; nine times out of ten one wants the layout elements contained in a wrapper which will enable you to easily apply an overall dimension to your structure and the use of left/right margins to centre it, the nesting of elements is/can be a fairly crucial aspect of layouts using CSS.
P.S would you use BB code tags when posting code please.
Hugo.
Sun, 2006-01-01 23:56
#4
OK, where does the wrapper go?
Also, what is BB tags? I told you I'm pretty new.
Mon, 2006-01-02 05:23
#5
Need help centering
BB code is using square brackets [BBTAG] with a few predefined tags such as B for bold, i for italics, u for underlined, quote for quoting someone, code for posting code, and there are a few more that you can see whenever you make a post here right about the text area box in the reply page.
In this case you'd use <html>Blah blah...</html>
I refuse to be like the faceless masses of sheep and have a signatu......awwwwwwwww CRAP!!
Backups? Ha! I've never had troub**&{[}$$ERROR NO CARRIER
Mon, 2006-01-02 09:58
#6
Need help centering
And to clarify ...
It (BBCode) refers to formatting your posts. Look at those little buttons above your textarea when you are writing a post. Highlight a small amount of text and then press one of those buttons and see what happens. The BB = Bulletin Board.
Mon, 2006-01-02 16:11
#7
Think I Got it
I looked into the wraper thing and added the following to my external style sheet. It looks better when I don't have the borders, but I guess it it necessary for compatibility. Thanks for all the help. If you have any more suggestions I'd love to hear them. I think I might understand that BB thing too.
#wrapper{
width: 770px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #4B6294;
text-align:left;
}
Tue, 2006-01-03 03:05
#8
One Problem Left
For some reason now that I have added this my left and write boxes that extend down my page (I've given them a fixed length) don't extend down to my bottom box. I guess I'm a perfectionist. Any thoughts?
Tue, 2006-01-03 10:04
#9
Need help centering
With height set to auto browsers don't extend the height of an element passed what is necessary to hold their content, so it is difficult to get two columns to "appear" like they are the same length. There are several techniques.
(1) Faux columns. Place the columns in a common container. Ensure that container has correct styles to surround the longest column and place a background on the container that "looks like" two columns.
(2) Use oversize padding-bottom (10000px) matched with negative margin-bottom (-10000px). This keeps the element the same actual size but has the effect of filling any empty space under the column with the columns own background.
(3) You'll need to google for this one. But there is a third way, its slipped my mind at present. 
Tue, 2006-01-03 15:25
#10
Another Problem
I noticed today that in Firefox my middle box with my main content is forced down to the bottom! This is frustrating!
Tue, 2006-01-03 16:10
#11
Need help centering
That sounds like a floating issue. There not being sufficient room for the main content to exist side by side with the other content. Try adjusting the widths.
Wed, 2006-01-04 02:22
#12
Hmm.
Chris, Thanks for the help so far. I'm testing to see if my adjusted sizes of my boxes works out. On these two side boxes, I tried the code
padding-bottom: 10000px; margin-bottom: -10000px;
For some reason one extended to the bottom of the page and through my bottom box that spands the whole page width, and the other didn't change at all. Still working on that one.