Another CSS question...

Neo824 · 12-26-2007

I figured out that using background-image would solve my other problem. But now...I am having a problem with background-image! I want my site to be in the middle of the page, how do I go about doing so? 'background-position' didn't work, and I don't know what else to try. Any suggests will be appreciated. I've provided my code below:

stylesheet.css

Code:

body {
background-color: #383838;
font-family: arial;
font-size: 10px;
}

div.centered {

}

div#image1 {
background-image: url('images/image1.png');
display: block;
height: 75;
width: 777;
}

div#image2 {
background-image: url('images/image2.png');
display: block;
height: 166;
width: 777;
}

div#image3 {
background-image: url('images/image3.png');
background-repeat: no-repeat;
background-position: center;
display: block;
height: 9;
width: 777;
}

div#image4 {
background-image: url('images/image4.png');
background-repeat: no-repeat;
display: block;
height: 453;
width: 777;
}

div#image5 {
background-image: url('images/image5.png');
display: block;
height: 9;
width: 777;
}

div#image6 {
background-image: url('images/image6.png');
display: block;
height: 18;
width: 777;
}

div#image7 {
background-image: url('images/image7.png');
display: block;
height: 143;
width: 777;
}

index.html

Code:

<html>

<!-- #BEGIN# Head Information -->
<head>
<title>Neo Productions | UNDER CONSTRUCTION</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<!-- #END# Head Information -->

<!-- #BEGIN# Body Information -->
<body>

<div class="centered" id="image1"></div>

<div class="centered" id="image2"></div>

<div class="centered" id="image3"></div>

<div class="centered" id="image4"></div>

<div class="centered" id="image5"></div>

<div class="centered" id="image6"></div>

<div class="centered" id="image7"></div>

</body>
<!-- #END# Body Information -->

</html>

- Neo

Jolt · 12-26-2007

background position needs 2 properties

Code:

background-position: center top;

I prefer the shorthand. You also need to define measurements.... you simply have 9 or 777. What are those? pixels? ems? picas? points? inches?

Code:

div#image3 {
display: block;
height: 9px;
width: 777px;
background: url('images/image3.png') no-repeat center top;
}

Neo824 · 12-26-2007

I've made all the specified changes, and still no success! If you want to see the site the URL is Neo Productions | UNDER CONSTRUCTION

[Note: When I add background-position it does NOTHING]

NEW CODE:

stylesheet.css

Code:

/* Neo Productions - STYLESHEET */

body {
background-color: #383838;
font-family: arial;
font-size: 10px;
}

div#image1 {
background: url('images/image1.png') no-repeat center top;
display: block;
height: 16px;
width: 777px;
padding: 0px;
margin: 0px;
}

div#image2 {
background: url('images/image2.png') no-repeat center top;
display: block;
height: 166px;
width: 777px;
padding: 0px;
margin: 0px;
}

div#image3 {
background: url('images/image3.png') no-repeat center top;
display: block;
height: 9px;
width: 777px;
padding: 0px;
margin: 0px;
}

div#image4 {
background: url('images/image4.png') no-repeat center top;
display: block;
height: 453px;
width: 777px;
padding: 0px;
margin: 0px;
}

div#image5 {
background: url('images/image5.png') no-repeat center top;
display: block;
height: 9px;
width: 777px;
padding: 0px;
margin: 0px;
}

div#image6 {
background: url('images/image6.png') no-repeat center top;
display: block;
height: 18px;
width: 777px;
padding: 0px;
margin: 0px;
}

div#image7 {
background: url('images/image7.png') no-repeat center top;
display: block;
height: 143px;
width: 777px;
padding: 0px;
margin: 0px;
}

index.html

Code:

<html>

<!-- #BEGIN# Head Information -->
<head>
<title>Neo Productions | UNDER CONSTRUCTION</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<!-- #END# Head Information -->

<!-- #BEGIN# Body Information -->
<body>

<div id="image1"></div>

<div id="image2"></div>

<div id="image3"></div>

<div id="image4"></div>

<div id="image5"></div>

<div id="image6"></div>

<div id="image7"></div>

</body>
<!-- #END# Body Information -->

</html>

- Neo

**Man1c M0g** · 12-26-2007

Hmmm, a bit beyond me as I'm not a CSS nut. I'll give 5 +rep points to the first person to solve this problem though...

Jolt · 12-27-2007

Easy

Code:

/* Neo Productions - STYLESHEET */

* {margin: 0; padding: 0; } /* removes default margin and padding for everything */

body {
background-color: #383838;
font: 10px Arial, san-serif;
text-align: center; /* Centers for IE6 */
}

#page {
display:block;
width: 777px; /* sets page width */
margin: 0 auto; /* centers main div */
text-align: left; /* resets standard text alignment */
}

div#image1 {
background: url(images/image1.png) no-repeat center top;
display: block;
height: 16px;
}

div#image2 {
background: url(images/image2.png) no-repeat center top;
display: block;
height: 166px;
}

div#image3 {
background: url(images/image3.png) no-repeat center top;
display: block;
height: 9px;
}

div#image4 {
background: url(images/image4.png) no-repeat center top;
display: block;
height: 453px;
}

div#image5 {
background: url(images/image5.png) no-repeat center top;
display: block;
height: 9px;
}

div#image6 {
background: url(images/image6.png) no-repeat center top;
display: block;
height: 18px;
width: 777px;
}

div#image7 {
background: url(images/image7.png) no-repeat center top;
display: block;
height: 143px;
}

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" xml:lang="en" lang="en">

<!-- #BEGIN# Head Information -->
<head>
<title>Neo Productions | UNDER CONSTRUCTION</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<!-- #END# Head Information -->

<!-- #BEGIN# Body Information -->
<body>
<div id="page">

<div id="image1"></div>

<div id="image2"></div>

<div id="image3"></div>

<div id="image4"></div>

<div id="image5"></div>

<div id="image6"></div>

<div id="image7"></div>

</div>

</body>
<!-- #END# Body Information -->

</html>

Note the text-align property for the body tag. This centers in IE6/WIN. Also used the shorthand for the font property. You should set a default (serif, san-serif) whenever setting a font. You may want to rethink 10px. That's terribly small and I generally only use it for things like copyright info, not page content. 12px is more of a realistic minimum now days.

I added an enclosing div (#page) which encompasses the entire page. Then I added margin: 0 auto; to center the page in every browser other than IE6. (o top and bottom, auto right and left.) I added text-align: left to this div to reset the text to standard alignment. Having this encompassing div will prevent other problems down the road. It is possible to center each div you have (by adding the margin: 0 auto

, but that makes for a pretty unstable layout. It's better to have 1 div that's centered to prevent things breaking.

Also note, for 0 measurements like padding: 0; you do not need a measurement. 0px is the same as 0em or 0in.. so no need for the measurement. But only with zeros.

Also, a doctype declaration was added to the XHTML. Always proper coding. I also removed the single quotes from the image paths. They aren't needed and can, at times, cause issues with dynamic scripting (php, asp, etc).

Neo824 · 12-27-2007

Quote:

Originally Posted by Jolt

Easy

Code:

/* Neo Productions - STYLESHEET */

* {margin: 0; padding: 0; } /* removes default margin and padding for everything */

body {
background-color: #383838;
font: 10px Arial, san-serif;
text-align: center; /* Centers for IE6 */
}

#page {
display:block;
width: 777px; /* sets page width */
margin: 0 auto; /* centers main div */
text-align: left; /* resets standard text alignment */
}

div#image1 {
background: url(images/image1.png) no-repeat center top;
display: block;
height: 16px;
}

div#image2 {
background: url(images/image2.png) no-repeat center top;
display: block;
height: 166px;
}

div#image3 {
background: url(images/image3.png) no-repeat center top;
display: block;
height: 9px;
}

div#image4 {
background: url(images/image4.png) no-repeat center top;
display: block;
height: 453px;
}

div#image5 {
background: url(images/image5.png) no-repeat center top;
display: block;
height: 9px;
}

div#image6 {
background: url(images/image6.png) no-repeat center top;
display: block;
height: 18px;
width: 777px;
}

div#image7 {
background: url(images/image7.png) no-repeat center top;
display: block;
height: 143px;
}

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" xml:lang="en" lang="en">

<!-- #BEGIN# Head Information -->
<head>
<title>Neo Productions | UNDER CONSTRUCTION</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<!-- #END# Head Information -->

<!-- #BEGIN# Body Information -->
<body>
<div id="page">

<div id="image1"></div>

<div id="image2"></div>

<div id="image3"></div>

<div id="image4"></div>

<div id="image5"></div>

<div id="image6"></div>

<div id="image7"></div>

</div>

</body>
<!-- #END# Body Information -->

</html>

Note the text-align property for the body tag. This centers in IE6/WIN. Also used the shorthand for the font property. You should set a default (serif, san-serif) whenever setting a font. You may want to rethink 10px. That's terribly small and I generally only use it for things like copyright info, not page content. 12px is more of a realistic minimum now days.

I added an enclosing div (#page) which encompasses the entire page. Then I added margin: 0 auto; to center the page in every browser other than IE6. (o top and bottom, auto right and left.) I added text-align: left to this div to reset the text to standard alignment. Having this encompassing div will prevent other problems down the road. It is possible to center each div you have (by adding the margin: 0 auto

, but that makes for a pretty unstable layout. It's better to have 1 div that's centered to prevent things breaking.

Also note, for 0 measurements like padding: 0; you do not need a measurement. 0px is the same as 0em or 0in.. so no need for the measurement. But only with zeros.

Also, a doctype declaration was added to the XHTML. Always proper coding. I also removed the single quotes from the image paths. They aren't needed and can, at times, cause issues with dynamic scripting (php, asp, etc).

Wow, thank you so much! Not only was my problem fixed, I learned something new! Thank you Jolt!

Thank you also, Man1c M0g!

P.S
I've added to both of your reputations. :P

- Neo

Jacorre · 12-28-2007

It's actually not recommended to set font sizes in pixels. It limits users from increasing the size of the font for readability. Some use percentages or a mixture. Here's a good article about it.

Jolt · 12-29-2007

That's actually untrue. I set px all the time.. and every browser will scale the font if desired. Ems are better... but can be more difficult to control.

*notjustgraphics* · 01-03-2008

Correct me if I'm wrong but I do not believe that Internet Explorer will allow you to resize text defined with px which is why the em unit became so useful...

Even IE7's zoom feature is not technically changing the size of the text its just enlarging everything in the viewable window.

But with that said, i still tend to use px for text definitions for predictability... a pixel is a pixel... an em can be different under different situations.

Mike.

chatake · 01-25-2008

quick em fix to convert 1em to 10 points

html {
font-size:125%;
}
body {
font-size:50%;
}

Jolt · 01-26-2008

I just use font-size: 62.5%; in the body tag. That sets 1em to 10px.

*notjustgraphics* · 01-28-2008

Quote:

Originally Posted by Jolt

I just use font-size: 62.5%; in the body tag. That sets 1em to 10px.

Would this not depend on the overall size of the parent? and would it not change if the window size changes?

Curious now...

Mike.

agentxi · 01-28-2008

Well the issues I have seen with using em's or percentages in your body tag is that it can change according to the browser defaults.

Defaults are usually set to 16px within your browser preferences, but what happens when someone changes their browser default to say 10px, now your 62.5% now becomes what? 6.25px? and then all the em's for that page are now offset by that amount.

I have considered setting the high level font size to a pixel value then a child of that value can be used with em's. for example if you change your font-size in your html or body to say 10px
then anything inside it can be used with em's like wrapper{font-size: 1em} would equal 10px. So you start with a value you know, then use em's to scale accordingly. need 12px? go to 1.2em (i think that's the math

)

Although to be truthful in the matter, I usually just end up using px's as my value's, but I can see the benefit of scalability in a site if you set your sizes and margins, etc with em's. but you just got to remember that we do not have control over the user end, and that the user can change the starting value on us.