xshanelarsonx Posted February 7, 2007 Share Posted February 7, 2007 I'm new to CSS and I can't figure out how to get the center of this box to line up with the middle of the screen. Like how <center></center> works to center something in HTML. <style type="text/css"> <!-- .Music { TOP: 65px; Left: 50%; WIDTH: 350px; HEIGHT: 130px; POSITION: absolute; BACKGROUND-COLOR: #989898; } --> </style> Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted February 7, 2007 Share Posted February 7, 2007 <style type="text/css"> <!-- .Music { width: 350px; height: 130px; margin: auto; background: #989898; } --> </style> I believe you will have to set the width and height of the parent container also. Quote Link to comment Share on other sites More sharing options...
obsidian Posted February 7, 2007 Share Posted February 7, 2007 ToonMariner is correct with the code provided; however, be very cautious about providing a width and/or height on the parent container. If your parent container is a div, it will already have a 100% width on it, and your margin: auto will only center it inside your parent div, so if your parent div has a fixed width, it will center within that parent div, not center to the screen. Quote Link to comment Share on other sites More sharing options...
xshanelarsonx Posted February 7, 2007 Author Share Posted February 7, 2007 The box is in the top right now, and I need it in the center. Can you please explain more how to do this. I'm really new. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted February 7, 2007 Share Posted February 7, 2007 It would help to see the rest of the css. If you are using all "absolute" positioning, then there is no telling what your box is in relation to and how changing it will affect the whole layout. Quote Link to comment Share on other sites More sharing options...
xshanelarsonx Posted February 8, 2007 Author Share Posted February 8, 2007 Heres more code. <html> <head> <title>Shane's Home Server</title> <style type="text/css"> <!-- body { background-color: #000000; background-repeat: repeat-x; } .Music { TOP: 65px; Left: 450px; WIDTH: 350px; HEIGHT: 130px; margin-top: center; margin: auto auto; POSITION: absolute; BACKGROUND-COLOR: #989898; } h1 {color: #FFFFFF} --> </style> </head> <body link="blue" alink="blue" vlink="blue"> <center><h1><u>Welcome to Shane's Home Server</u></h1></center> <div class="Music"><form action="Music_Upload.php" method="post" enctype="multipart/form-data"><center><font color="#D0D0D0" size="4"><u>~~~~Music~~~~</u></font></center> <center><a href="Files/Music/">-View music-</a></center> <br /> <center><font color="#D0D0D0" size="2"><u>Upload Music</u></font></center> <center> Song <input type="file" name="file"> <br /> <input type="submit" name="submit" value="Upload"> </form> </center></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
obsidian Posted February 8, 2007 Share Posted February 8, 2007 Did you read ToonMariner's post at all? He told you how to do it. You've got to remove the center tags first of all, as they will only serve to throw off your CSS. Then, replace the CSS you currently have for your Music class with the following: .Music { width: 350px; height: 130px; margin: auto; background: #989898; } Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted February 8, 2007 Share Posted February 8, 2007 You make a few common but critical newbie mistakes. These are mostly thanks to Microsofts' evil influences and IE's displaying of garbage code. First (and most important) use a proper DOCTYPE and charset. If you use a proper doctype, even IE will somewhat behave and follow most web standards. Second get used to coding in all lower case. Eventually xhtml and xml will be the norm, so you may as well get used to those rules. Third use containers for your most important layout ids "divs" - starting with a container for all of your markup within the body tag. A quick recoding (@ 5 minutes) and the following is a relatively "fluid" or "flexible" webpage. This will resize the containers and fonts proportionally as the browser window shrinks: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Shane's Home Server</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- body { background-color: #000000; font-family:Arial, Helvetica, sans-serif; font-size:100%; width:96.8%; margin:0 auto; } a:link, a:visited {color:#0000FF} a:hover {color:#66CCFF} #container { font-size:1em; width:80%; margin:0 auto; text-align:center; } .Music { margin-top: 65px; margin-right:auto; margin-left: auto; width: 80%; height: auto; background-color: #989898; border: 1px solid #66CCFF } h1 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:1.5em;color: #FFFFFF} .pageTitle {color:#D0D0D0; font-size:1.1em} .formfield {border: 1px solid #66CCFF; background-color:#CCCCCC; color:#333333} --> </style> </head> <body> <div id="container"> <h1>Welcome to Shane's Home Server</h1> <div class="Music"> <form action="Music_Upload.php" method="post" enctype="multipart/form-data"> <h2>~~~~Music~~~~</h2> <p><a href="Files/Music/">-View music-</a></p> <p>Upload Music - Song</p> <input name="file" type="file" class="formfield"> <br /><br /> <input type="submit" name="submit" value="Upload"> </form> <!-- close Music --></div> <!-- close container --></div> </body> </html> Cheers. Dave Quote Link to comment Share on other sites More sharing options...
xshanelarsonx Posted February 9, 2007 Author Share Posted February 9, 2007 Thanks dave, and obsidian I did read ToonMariner's post but I didn't really understand it. I'm really new to CSS. Quote Link to comment Share on other sites More sharing options...
obsidian Posted February 9, 2007 Share Posted February 9, 2007 obsidian I did read ToonMariner's post but I didn't really understand it. I'm really new to CSS. I just reread my last post and realized it may have come across a bit harsh. Sorry if it had that slant to it, it was definitely not my intent. I totally understand the frustration with learning something new like that, too. Quote Link to comment Share on other sites More sharing options...
xshanelarsonx Posted February 11, 2007 Author Share Posted February 11, 2007 Don't worry about it obsidian. We all type stuff that seems different to others at times. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.