CSS Problems

Tican · 4 Apr 2006 at 12:18

Hi all,

I have a site done in photoshop, 800x600 design, and I would like it centred in all browsers, I am not sure how to do it. I am wanting to do it in css,

Thanks

Ian

Mr_L · 4 Apr 2006 at 12:30

You can create a container div which will hold most of your layout.

Code:

<div id="container">

<!-- your content in here -->

</div>

Then you would need the following CSS; -

Code:

#container{width:800px; height:600px; padding:0; margin:0 auto;}

Tican · 4 Apr 2006 at 12:33

Mr_L said:
You can create a container div which will hold most of your layout.

Code:

<div id="container">  </div>

Then you would need the following CSS; -

Code:

#container{width:800px; height:600px; padding:0; margin:0 auto;}

Nice one works a treat, Thanks

Scam · 4 Apr 2006 at 12:35

Wrap everything in a container div.

CSS

Code:

div#container {
	position: absolute;
	left: 50%;
	margin-left: -360px;
	}

Using this method, where i have 360px it should be half of the width of the div. In fact looking at that code i've forgotton to put in a width. I wonder how that works then :confused:

lol! (It should be 720px there). Note thats it's minus half the width.

Thats the way i use, but i think the most common way is:

Code:

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: <your-width-here>;
text-align: left;
}

It's all in the margin-left/right: auto. The text-align: center on the body is just for old IE's that dont use the margin setting properly.

Also just to note, your container shouldnt be 800px, i think ~750px is the actual max to fit into a browser at 800x600 resolution.

EDIT: Well holy crap. Beaten by a country mile! :eek:

Did i nod off mid-post or something? rofl!

Tican · 4 Apr 2006 at 13:08

Scam said:
Wrap everything in a container div.

CSS

Code:

div#container { position: absolute; left: 50%; margin-left: -360px; }

Using this method, where i have 360px it should be half of the width of the div. In fact looking at that code i've forgotton to put in a width. I wonder how that works then lol! (It should be 720px there). Note thats it's minus half the width.

Thats the way i use, but i think the most common way is:

Code:

body { text-align: center; } div#container { margin-left: auto; margin-right: auto; width: <your-width-here>; text-align: left; }

It's all in the margin-left/right: auto. The text-align: center on the body is just for old IE's that dont use the margin setting properly.

Also just to note, your container shouldnt be 800px, i think ~750px is the actual max to fit into a browser at 800x600 resolution.

EDIT: Well holy crap. Beaten by a country mile!

Did i nod off mid-post or something? rofl!

thanks anyway

Al Vallario · 4 Apr 2006 at 13:45

Just to clarify, the most commonly used (I like to think "correct") method is:

Code:

* {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
}

div#container {
  margin: 0 auto;
  text-align: left;
  width: 750px;
}

nav... · 4 Apr 2006 at 14:04

you can get away without the text-align center if declaring xhtml strict.

Tican · 4 Apr 2006 at 14:08

Now I have another problem.

I am doing a site that is black, and need the text in white, but it wont change from black nor will the font change, could this be because I am using an IFrame and the css doesnt load?

heres my css:

Code:

body {background-color: black }
{font-family: Verdana, Arial, Sans Serif; font-size: 12px; color: FFFFFF; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a:visited { text-decoration: none; }
a:link { color:#ffffff; }
a:visited { color:#ffffff; }
a:hover { color:#ffffff; }
a:active{ color:#ffffff; }

}

Heres the HTML

Code:

<html>
<head>
<LINK href="mc.css" rel="stylesheet" type="text/css">
</head>
<body>
MC R0x0rz
</body>

^^ That is for the iframe source (main.html)

code for iframe

Code:

<iframe src="main.html" width="343" height="300" frameborder="0" allowTransparency="true"></iframe>

Tican · 4 Apr 2006 at 16:04

No one know?

Was hoping to finish this site today lol, then work on a new one for "kings-kingdom"

Al Vallario · 4 Apr 2006 at 16:39

Fix your CSS:

Code:

body {
  background-color: #000;
  color: #fff;
  font-family: Verdana, Arial, Sans Serif;
  font-size: 12px;
}

a:link, a:visited, a:hover, a:active {
  color: #fff;
  text-decoration: none;
}

You had brackets all over the place, repetitive declarations, a missing hash etc. before. Much better

Tican · 4 Apr 2006 at 16:44

Al Vallario said:
Fix your CSS:

Code:

body { background-color: #000; color: #fff; font-family: Verdana, Arial, Sans Serif; font-size: 12px; } a:link, a:visited, a:hover, a:active { color: #fff; text-decoration: none; }

You had brackets all over the place, repetitive declarations, a missing hash etc. before. Much better

Im new to css

Thanks a lot works a treat

Tican · 4 Apr 2006 at 16:51

Hmm just checked the site in internet explorer, but it doesnt centre it, any idea why? :confused:

iCraig · 5 Apr 2006 at 09:40

Well, can you give us a link to the site so we can see?

Tican · 5 Apr 2006 at 11:36

iCraig said:
Well, can you give us a link to the site so we can see?

http://www.wolfenstein-et.co.uk/testsite/

For a clan im in

edit:

ignore the music box, its going to be flash and it does work that way lol - its not my idea

iCraig · 5 Apr 2006 at 11:43

Your IE is running in quirks mode, give it a doc type declaration.

Like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tican · 5 Apr 2006 at 11:49

iCraig said:
Your IE is running in quirks mode, give it a doc type declaration.

Like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ahhhh!!! Nice one

Thanks

works a treat, can u tell im new at all this css thingy