Hello i'm making a splash page and i've almost finished it but i need help with centering the 3 div boxes i got into the middle of the page where the background image is. Here is my code, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Football Club</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Football Club"/> <meta name="keywords" content="Football"/> <link rel="shortcut icon" href="favicon.ico" > <link rel="icon" href="favicon.ico" type="icon" > <style type="text/css"> body { background-color: #000000; color: #FFFFFF; background-image:url('../images/bg_body.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } #leftcolumn { width: 175px; height: 330px; border: 1px outset red; float: left} #rightcolumn { width: 610px; height: 330px; border: 1px outset red; float: left} #bottomcolumn { background-color: black; width: 787px; height: 35px; border: 1px outset red; float: left} </style> </head> <body> <div id="leftcolumn"><a href="http://www.google.com" alt="Enter Site"><img src="images/logo.png" border="0" alt="Enter Site" /></a></div> <div id="rightcolumn"><a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_tv.png" border="0" alt="Enter Site" /></a><a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_membership.png" border="0" alt="Enter Site /></a><a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_news.png" border="0" alt="Enter Site" /></a><a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_sponsors.png" border="0" alt="Enter Site" /></a></div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="bottomcolumn"><h4 style="float: left; padding: 0px 25px 11px">Follow Us On:</h4><div align="center"><a href="http://www.facebook.com" target="_blank"><img src="images/facebook_social.png" border="0" alt="Find Us On Facebook" /></a> <a href="http://www.twitter.com" target="_blank"><img src="images/twitter_social.png" border="0" alt="Find Us On Twitter"/></a> <a href="http://www.youtube.com" target="_blank"><img src="images/youtube_social.png" border="0" alt="Find Us On Youtube" /></a></div></div> </body> </html> Code (markup): Also where it says "Find Us On:" i can't seem to get that aligned into the middle of the div box as it just hangs below the div box. Can anyone please help me fix these things? Thankyou.
Didn't really know what you are talking about, but I center objects like this: CSS: #alignToCenter{ width: 200px; margin-left: auto; margin-right: auto; } Code (markup): HTML: <div id="alignToCenter"> /*content here */ </div> Code (markup):
I tried that but it didn't work. What i mean is i want the content on my website to be aligned in the direct center of the page where the background image is. Here is an image of the site and how i would like it to look like. http://imageshack.us/f/822/ffwebsite.png/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Football Club</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Football Club"/> <meta name="keywords" content="Football"/> <link rel="shortcut icon" href="favicon.ico" > <link rel="icon" href="favicon.ico" type="icon" > <style type="text/css"> body { margin:auto; background-color: #000000; color: #FFFFFF; background-image:url('../images/bg_body.jpg'); background-repeat:no-repeat; } #leftcolumn { width: 175px; height: 330px; border: 1px outset red; } #rightcolumn { width: 610px; height: 330px; border: 1px outset red; } #bottomcolumn { background-color: black; width: 787px; height: 55px; border: 1px outset red; margin:auto; } </style> </head> <body> <table align="center"><tr><td> <div id="leftcolumn"><a href="http://www.google.com" alt="Enter Site"><img src="images/logo.png" border="0" alt="Enter Site" /></a></div></td> <td><div id="rightcolumn"><a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_tv.png" border="0" alt="Enter Site" /></a> <a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_membership.png" border="0" alt="Enter Site /></a> <a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_news.png" border="0" alt="Enter Site" /></a> <a href="http://www.google.com" alt="Enter Site"><img src="images/dolphin_sponsors.png" border="0" alt="Enter Site" /></a> </div></td></tr></table> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="bottomcolumn"><h4 style="float: left; padding: 0px 25px 11px" valign="center">Follow Us On:</h4><div align="center"> <a href="http://www.facebook.com" target="_blank"><img src="images/facebook_social.png" border="0" alt="Find Us On Facebook" /></a> <a href="http://www.twitter.com" target="_blank"><img src="images/twitter_social.png" border="0" alt="Find Us On Twitter"/></a> <a href="http://www.youtube.com" target="_blank"><img src="images/youtube_social.png" border="0" alt="Find Us On Youtube" /></a></div> </div> </body> </html> PHP:
If you want the glow effect, simply Google 'css3 glow effects'. I would have posted a link to a code sample/tutorial but I can't because I am new. I also see that you are using 'border=0" a lot in your image tags. A better way to do this is in CSS. img{ border: 0px; } Code (markup): Sorry, it's been a long day and you code is quite hard to read. The readability on the way you have the tags laid out are very hard to read in my tired state of mind.
@Rising_Star Thanks i gave that a try but the page looks a bit of a mess. Is there a way to fix it? http://imageshack.us/f/716/ffwebsite.png/ @inu11byte Ah thanks a lot i'll give that a search
remove the <br/> tags below the navigation to minimize the empty space , plus add valign="top" to the right portion so that the content will move up