Jump to content

CSS Centering Problem


xshanelarsonx
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.