12 replies [Last post]
mifootball
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-08-06
Posts: 14
Points: 0

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;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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)

mifootball
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-08-06
Posts: 14
Points: 0

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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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=&lt1=&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> | &copy;2005 MIFootball | <img src="http://s132511960.onlinehome.us/tinc?key=QaZuvuoj&no=5">
</center>
</div>

</body>
</html>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mifootball
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-08-06
Posts: 14
Points: 0

OK, where does the wrapper go?

Also, what is BB tags? I told you I'm pretty new.

nix
nix's picture
Offline
Enthusiast
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Last seen: 13 years 6 weeks ago
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Timezone: GMT-4
Joined: 2003-08-12
Posts: 159
Points: 0

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

mifootball
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-08-06
Posts: 14
Points: 0

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;
}

mifootball
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-08-06
Posts: 14
Points: 0

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?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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. Smile

mifootball
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-08-06
Posts: 14
Points: 0

Another Problem

I noticed today that in Firefox my middle box with my main content is forced down to the bottom! This is frustrating!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

mifootball
Offline
Regular
Last seen: 16 years 48 weeks ago
Joined: 2005-08-06
Posts: 14
Points: 0

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.