PDA

Click to See Complete Forum and Search --> : Wierd alignment..

IronPegasus
06-04-2006, 03:14 AM
Hello,

I am having troubles centering all the contents on my page. Here's an image of my errors in IE:

http://img149.imageshack.us/img149/79/temp0kt.jpg

Here's what I am trying to achieve:
http://img149.imageshack.us/img149/9426/temp24my.jpg

FireFox is similar, only all the contents are lined up on the left side of the page.

Now for the code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Entity Games</title>
<style type="text/css">
body{
background-color: rgb(34,57,83);
font-family: Tahoma;
font-size: 12px;
text-align: center;
}
.header{
background-color: rgb(71,119,171);
color: rgb(0,0,0);
height: 100px;
width: 768px;
font-size: 42px;
}
.menubg{
background-color: rgb(0,0,0);
color: rgb(255,255,255);
width: 768px;
height: 40px;
}
.menu a{
text-decoration: none;
background-color: rgb(0,0,0);
color: white;
height: 20px;
width: 80px;
border-color: rgb(72,72,72);
}
.menu a:hover{
text-decoration: none;
background-color: rgb(80,80,80);
color: white;
height: 20px;
width: 80px;
}
img.h {
width: 768px;
height: 7px;
border: none;
display: block;
}
.content{
background-color: rgb(255,165,0);
color: white;
height: 350px;
width: 550px;
float: left;
}
.subnav{
background-color: rgb(0,0,0);
color: rgb(255,255,255);
width: 109px;
height: 350px;
float: left;
}
</style>
</head>
<body>

<div class="header">
<font style="color: rgb(255,165,0)">Entity</font>Games
</div>
<img src="images/th.bmp" class="h">
<div class="menubg">
<div class="menu">
<a href="">Home</a>
<a href="">Projects</a>
<a href="">About</a>
<a href="">Articles</a>
<a href="">Forums</a>
</div>
</div>
<img src="images/bh.bmp" class="h">
<div class="subnav">
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br /><br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
</div>
<div class="content">
Some more random text
</div>
<div class="subnav">
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
</div>

</body>
</html>


I'm new to CSS, so could someone be kind enough to show me a solution to this problem?:o)
GaryS
06-04-2006, 05:10 AM
Give the items that you want to be centered left and right margins of "auto". For example:


.header{margin: 0 auto}
IronPegasus
06-04-2006, 02:46 PM
For some reason, that had no effect. Please help!
infiniteone
06-04-2006, 02:57 PM
Have you tried creating a table? Create a table that is 3 columns and 0 rows. Make the table 733 pixels wide. And place the top image in the centered column of the table? Try That, if it works, then make a new table under that one, and make it 5 columns and however many lines you need, make that many columns.
GaryS
06-04-2006, 03:04 PM
Try this: wrap the whole thing in a DIV, give it a width, and do the margin auto trick.

The following code works in both IE and Firefox:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Entity Games</title>
<style type="text/css">
body{
background-color: rgb(34,57,83);
font-family: Tahoma;
font-size: 12px;
text-align: center;


}
.wrapper{
width: 768px;
margin:0 auto

}


.header{
background-color: rgb(71,119,171);
color: rgb(0,0,0);
height: 100px;
width: 768px;
font-size: 42px;
}
.menubg{
background-color: rgb(0,0,0);
color: rgb(255,255,255);
width: 768px;
height: 40px;
}
.menu a{
text-decoration: none;
background-color: rgb(0,0,0);
color: white;
height: 20px;
width: 80px;
border-color: rgb(72,72,72);
}
.menu a:hover{
text-decoration: none;
background-color: rgb(80,80,80);
color: white;
height: 20px;
width: 80px;
}
img.h {
width: 768px;
height: 7px;
border: none;
display: block;
}
.content{
background-color: rgb(255,165,0);
color: white;
height: 350px;
width: 550px;
float:left;



}
.subnav{
background-color: rgb(0,0,0);
color: rgb(255,255,255);
width: 109px;
height: 350px;
float: left;
}
</style>
</head>
<body>


<div class="wrapper">

<div class="header">
<font style="color: rgb(255,165,0)">Entity</font>Games
</div>
<img src="images/th.bmp" class="h">
<div class="menubg">
<div class="menu">
<a href="">Home</a>
<a href="">Projects</a>
<a href="">About</a>
<a href="">Articles</a>
<a href="">Forums</a>
</div>
</div>
<img src="images/bh.bmp" class="h">
<div class="subnav">
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br /><br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
</div>
<div class="content">
Some more random text
</div>
<div class="subnav">
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
random text<br />
</div>


</div>

</body>
</html>
IronPegasus
06-04-2006, 03:29 PM
Thanks! I only have one more problem. In FireFox, everything is on the left side of the screen, how can I get it centered like it is in IE?

Thank you.
WebJoel
06-04-2006, 03:41 PM
Have you tried creating a table? ...

Best to avoid use of TABLEs unless you're inserting tabular data, like a spreadsheet or columns of itemized textual content. You can create three vertical DIVs with CSS and acheive the desired result, do it with about 1/3 the KB over using TABLEs, and have it therefore download faster and render more correctly in more media.
TABLEs are great, -I still use 'em. -for tabular data. Read enough posts and you begin to see a recurrant theme, -...people converting from TABLEs to DIV.
GaryS
06-04-2006, 04:52 PM
Thanks! I only have one more problem. In FireFox, everything is on the left side of the screen, how can I get it centered like it is in IE?

Thank you.


The code I posted is centered in Firefox (for me, anyway)