Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Centering in css (help)

    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:
    Code:
    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:
    Code:
    <!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=encodeURIComponent(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=encodeURIComponent(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=encodeURIComponent(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>
    Last edited by njfail; 08-18-2010 at 10:54 PM.

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    For the centering issue:

    In the div#header2, the span tag is an inline element.
    This code should help:
    Code:
    #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.
    If i was of any help, dont forget to click the 'thank' button =]

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright thanks!
    can i ask what display: block; does?

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by njfail View Post
    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.
    Last edited by ch4sethe5un; 08-17-2010 at 11:46 PM.
    If i was of any help, dont forget to click the 'thank' button =]

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks again, i'll be taking a look at that page.

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

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Quote Originally Posted by njfail View Post
    Do you know why my footer code isn't working right?
    At the moment you have:

    Code:
    #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:

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

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    man, I tried centering the footer with that code, and now the footer floats half way up the page

    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?

    Code:
    #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.
    Last edited by njfail; 08-18-2010 at 10:55 PM.

  • #8
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by njfail View Post
    how do I get my footer to stay at the bottom?

    Code:
    #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
    Code:
    #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/200...-reset-styles/
    be aware that it might change your current layout a bit or a lot. just letting you know.
    Code:
    * {
    	vertical-align: baseline;
    	font-weight: inherit;
    	font-family: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	border: 0 none;
    	outline: 0;
    	padding: 0;
    	margin: 0;
    	}
    Last edited by ch4sethe5un; 08-19-2010 at 12:01 AM.
    If i was of any help, dont forget to click the 'thank' button =]

  • Users who have thanked ch4sethe5un for this post:

    njfail (08-19-2010)

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright, i made it yellow.

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

  • #10
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    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/fixe...out-javascript
    http://ryanfait.com/sticky-footer/
    Last edited by ch4sethe5un; 08-19-2010 at 12:36 AM.
    If i was of any help, dont forget to click the 'thank' button =]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •