...

View Full Version : Centering in css (help)



njfail
08-17-2010, 11:16 PM
my website: www.njfail.com

The top banner picture is centered, however, the banner ad below it is not and the footer at the bottom of the page is not. The footer also is supposed to be underlined when hovered over, however, this isn't working for some reason. Its also supposed to turn to #0099FF (light blue) when hovered over, but thats not working either.
Is there something wrong with my code? Any help or helpful criticism is appreciated!

css:


html, body{
margin:0;
padding:0;
text-align:center;
background-color:#000000
}

#container {
width: 970px;
margin-left:auto;
margin-right:auto;
}

p {color:#0099FF;}

#pagewidth{
width:90%;
text-align:left;
margin-left:auto;
margin-right:auto;
}

#header1 span {
display:block;
position:relative;
margin:0 auto;
padding:0;
height:150px;
width:800px;
}

#header2 span {
display:block;
position:relative;
margin:0 auto;
padding:0;
height:100px;
width:600px;
}

#header3 span {
display:block;
position:relativel
margin:0 auto;
padding:0;
height:100px;
width:500px;
}

#leftcol{
width:325px;
float:left;
position:relative;
background-color:#000000;
}

#maincol{background-color: #000000;
width:500px;
float: left;
display:inline;
position: relative;

}

#rightcol{
width:120px;
float:right;
position:relative;
background-color:#000000;
}

#footer span {
display:block;
margin:0 auto;
padding:0;
height:75px;
width:450px;
}

#footermenu a:hover {
color: #0099FF;
text-decoration: underline;
}

#footermenu a{
color: #0033FF;
text-decoration: none;
}

#yellbox { width: 300px; text-align: center; }
#yellbox iframe { height: 250px; border: 1px inset; margin: 0px; width: 90%; }
#yellbox input { width: 90%; }
#yellbox button { height: 25px; }

/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}


html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK REL=StyleSheet HREF="njstyle.css" TYPE="text/css" MEDIA=screen>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
<title>Starcraft II Gaming News</title>
<meta name="Copyright" content="&copy; 2010 NJFAIL">
<meta http-equiv="Content-Language" content="EN-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Description" content="NJFAIL is a community site focused on Starcraft II, featuring pro-gaming news and information, videos, strategy, and replays, casts, and the latest info from Blizzard.">
<meta name="keywords" content="Starcraft II 2 sc2 wc3 warcraft blizzard best rts computer game tournaments prizes gosu pro replays casts free real time strategy video videogame gaming community clan league guild terran zerg protoss" />
</head>
<body>
<div id="pagewidth" class="clearfix">
<div id="container">
<div id="header1">
<img src="njfail_images/njfail_banner.JPG" border="0" alt="nice job failure">
</div>
<div id="header2">
<!-- Begin: AdBrite, Generated: 2010-08-16 3:01:26 -->
<script type="text/javascript">
var AdBrite_Title_Color = '0033FF';
var AdBrite_Text_Color = '0099FF';
var AdBrite_Background_Color = '000000';
var AdBrite_Border_Color = '000000';
var AdBrite_URL_Color = '0033FF';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeUR IComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<span style="white-space:nowrap;"><script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1700638&zs=3732385f3930&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
<a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1700638&afsid=1"><img src="http://files.adbrite.com/mb/images/adbrite-your-ad-here-leaderboard-w.gif" style="background-color:#000000;border:none;padding:0;margin:0;" alt="Your Ad Here" width="14" height="90" border="0" /></a></span>
<!-- End: AdBrite -->
</div>
<div id="header3">
<ul id="menu">
<li><a href="http://www.njfail.com/" target="_self">Home</a></li>
<li><a href="forums" target="_self">Forums</a></li>
<li><a href="tournaments.html" target="_self">Tournaments</a></li>
<li><a href="replays.html" target="_self">Replays</a></li>
<li><a href="calender.html" target="_self">Calender</a></li>
<li><a href="pro.html" target="_self">NJFAIL Pro</a></li>
</ul>
</div>
<div id="leftcol">

<div id="yellbox">
<script language="Javascript" type="text/javascript" src="http://www.yellbox.com/ybscript.js"></script>

<iframe name="ybframe" frameborder="0" allowtransparency="true" src="http://www.yellbox.com/yellbox.php?name=njfail"></iframe>

<form action="http://www.yellbox.com/addmessage.php" method="post" target="ybframe" name="yellform" style="margin: 1px;">
<input type="hidden" name="sub_username" value="njfail" />
<input name="sub_name" value="Name" maxlength="15" onfocus="if(this.value == 'Name')this.value = '';" /><br />
<input name="sub_message" value="Message" maxlength="255" onfocus="if(this.value == 'Message')this.value = '';" /><br />
<button onclick="return clearMessageBox();" style="width: 70%;">Say</button>
<button onclick="makeNewWindow(); return false;" style="width: 20%; border: none; background-color: transparent;"><img src="http://www.yellbox.com/images/smile.gif" alt="Smileys" /></button>
</form>
</div>

<br />

<!-- Begin: AdBrite, Generated: 2010-08-14 18:41:20 -->
<script type="text/javascript">
var AdBrite_Title_Color = '0033FF';
var AdBrite_Text_Color = '0099FF';
var AdBrite_Background_Color = '000000';
var AdBrite_Border_Color = '000000';
var AdBrite_URL_Color = '0033FF';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeUR IComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1729706&zs=3330305f323530&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1729706&afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>
<!-- End: AdBrite -->
</div>

<div id="maincol">
<p>You'll notice some huge changes with the site's layout and features during the next week or so. If you have any suggestions or problems, feel free to voice them on the forums!</p>
</div>

<div id="rightcol">
<p>Under Construction</p>
<br />
<br />
<!-- Begin: AdBrite, Generated: 2010-08-14 19:00:26 -->
<script type="text/javascript">
var AdBrite_Title_Color = '0033FF';
var AdBrite_Text_Color = '0099FF';
var AdBrite_Background_Color = '000000';
var AdBrite_Border_Color = '000000';
var AdBrite_URL_Color = '0033FF';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeUR IComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1729713&zs=3132305f363030&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1729713&afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>
<!-- End: AdBrite -->
</div>

<div id="footer">
<div id="footermenu">
<ul>
<a href="sitemap.html">Site Map</a>
(&nbsp;)(&nbsp;)(&nbsp;)
<a href="privacypolicy.html">Privacy Policy</a>
(&nbsp;)(&nbsp;)(&nbsp;)
<a href="tournamentpolicy.html">Tournament Policy</a>
(&nbsp;)(&nbsp;)(&nbsp;)
<a href="contact.html">Contact Us</a>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

ch4sethe5un
08-17-2010, 11:29 PM
For the centering issue:

In the div#header2, the span tag is an inline element.
This code should help:

#header2 span {
display:block;
margin:0 auto;
width:740px; <-- thats just an arbitrary width that i came up with
}

It should be the width of the banner.

njfail
08-17-2010, 11:38 PM
Alright thanks!
can i ask what display: block; does?

ch4sethe5un
08-17-2010, 11:43 PM
Alright thanks!
can i ask what display: block; does?

http://www.w3schools.com/css/pr_class_display.asp

Play with these examples here. I learned a lot from hitting the "try it yourself" button and just experimenting.

Block level elements have line breaks before and after the box, inline don't. So inline 'flows' with the content.
For example: a div is a block element. so if you change the span that was mentioned earlier into a div and take out the display:block from the code, you should get the same result.

njfail
08-18-2010, 12:08 AM
Thanks again, i'll be taking a look at that page.

Do you know why my footer code isn't working right?

SB65
08-18-2010, 06:08 PM
Do you know why my footer code isn't working right?

At the moment you have:


#footermenu a:hover {
color: #0099FF;
text-decoration: underline;
}

#footermenu a:link {
color: #0033FF;
text-decoration: none;
}

#footermenu a:visited {
color: #0033FF;
text-decoration: none;
}
#footermenu a:active {
color: #0033FF;
text-decoration: none;
}


The latter styles are taking precedence over the :hover. Try replacing this with:


#footermenu a:hover {
color: #0099FF;
text-decoration: underline;
}

#footermenu a{
color: #0033FF;
text-decoration: none;
}

njfail
08-18-2010, 10:48 PM
man, I tried centering the footer with that code, and now the footer floats half way up the page :mad:

I tried looking up a fix for it and it said to add height:100% to the body and put margin-top:-100px;, and it'll always show up 100px from the bottom of the page. Well it didn't work...

how do I get my footer to stay at the bottom?



#footer span {
display:block;
margin:0 auto;
width:450px;
position:relative;
margin-top:-100px;
}


Edit:
I've edited my Original Post to contain my *new* css layout. Its what I updated it to after reading all of the information on this page.

ch4sethe5un
08-18-2010, 11:56 PM
how do I get my footer to stay at the bottom?



#footer span {
display:block;
margin:0 auto;
width:450px;
position:relative;
margin-top:-100px;
}


First, you dont have a #footer with a <span> in it, in your code.
So that css above should be like this

#footer {
background:yellow; <----thats just so i can see the footer
clear:both; <--- fixed it. You had floated objects above it.
display:block; <--- dont need this because #footer is a div
height:75px;
margin:0 auto; <---centers
padding:0;
width:100%;
}

#footer ul{
text-align:center; <--- will center text
}

second, you might want to try a css global 'reset'.
just so you dont have to repeat padding:0 and margin:0 all the time. There are tons of other benefits too, like a more consistent webpage amongst browsers.
Basic reset http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
be aware that it might change your current layout a bit or a lot. just letting you know.

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

njfail
08-19-2010, 12:13 AM
Alright, i made it yellow.

Its not right under the text anymore, but its still not at the bottom of the page.

ch4sethe5un
08-19-2010, 12:33 AM
i noticed that you pulled the div#footer out of div#container.

The #container was bounding the #footer to a width of 970px.
If you pull the #footer out, then you should set the width of the #footer to 970px.

I dont know what you mean by bottom? Do you want the content to have a certain amount of space before the footer or do you just want to text in your #footer div to be at the bottom of the #footer?
Because the div is at the bottom of the page.

If its the first one, you need this(either of them will give you the desired result):
http://boagworld.com/technology/fixed-footers-without-javascript
http://ryanfait.com/sticky-footer/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum