CSS help positioning website

[janethread]

Hi Everyone,
I’ve asked for help with my blog on this website a few times, and people have been very helpful–thank you!
I’m still having trouble positioning it correctly. All the work I’ve done on my blog has been on a mac. When I look at the site in safari or chrome on my mac, the website is centered. It is also centered when I look at it in IE8 on a PC. It is OFF center when I look at it in chrome on a PC. When my friends look at it, it’s off center for them too–on both PC and mac. Does anyone have any ideas on how to fix this? I know practically nothing about coding, but a friend recommended me to this website, and said it was the best.
Thanks so much!
Jane

I’m posting the code below:

* {
margin: 0;
padding: 0;
}

body {
background-image:url(‘background 10.png’);
background-position: center top;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0 auto;
padding: 0;
min height: 100%;
min width: 1183pix;
}

p {
line-height:1.5;
}

h1, h2, h3{
line-height:1.5;
}

#wrapper {
width:1183px;
margin:0 auto;
}

#contents {
width:1183px;
margin:0 auto;
}

#contents {
width:1183px;
}

#header {
background-image:url(‘new logo 16.jpg’);
float: center center;
width:1183px;
height:234px;
text-align:center;
margin:0 auto;
}

#sitename {
position:relative;
float:left;
padding-top:25px;
font-family:”times new roman”,garamond, serif;
color:#333333;
font-size:2.5em;
text-align:center;
}

#navigation {
float:left;
background: transparent url(nav_background.jpg) no-repeat center top;
float:center;
width:960px;
height:40px;
margin:0 auto;
font-family:”lucida sans”, arial, sans-serif;
font-size:1em;
}

#navigation ul {
float:left;
padding-left:20px;
padding-top:12px;
margin-left:0px;
width:940px;
height:28px;
}

#navigation ul {
margin-left:-12px;
}

#navigation li {
float:left;
display:inline;
font-size:1em;
padding:12px 20px 13px 20px;
margin-top:-12px;
height:15px;
}

#navigation li {
margin-right:4px;
}

#active {
float:center;
background: transparent url(activetab_background.jpg) no-repeat center top;
color:#fff;
text-align:center;
}

#navigation a:link {
color:#fff;
text-decoration:none;
}

#navigation a:hover {
color:#fff;
text-decoration:none;
}

#navigation a:visited {
color:#fff;
text-decoration:none;
}

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

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

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

a:link, a:hover, a:visited {
color:#198bef;
font-weight:normal;
text-decoration:underline;
}

#main {
clear:both;
width:920px;
min-height:400px;
height:auto !important;
height:400px;
margin: 0 auto;
padding:30px 20px 30px 20px;
}

img.image-left {
margin-right:15px;
float:left;
}

img.image-right {
margin-left:15px;
float:right;
}

#footer {
float:left;
width:960px;
border-top:1px solid #000000;
margin:0px 0 30px 0;
}

#footer-contents {
float:left;
color:#000000;
font-family:”lucida grande”, “lucida sans”, arial, sans-serif;
padding:15px 0 0 20px;
width:940px;
height:28px;
}

#footer-contents {
margin-top:-5px;
}

input {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}

textarea {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}

[janethread]

@paulie_d
http://www.janethread.com

[janethread]

I’m not sure what float: center; means either. Should I change it?
I’m using weebly as a host for my blog. They have standard templates, but I have customized my background and header, and that’s where I’ve run into problems.

[janethread]

do I need to take out the margins?

is the site showing up off center on your computer?

[Mottie]

There is no such thing as a float: center; but if you have have an element with a set width, you can set the side margins to auto.

margin: 0 auto;

What that does is set the top and bottom margins to zero and the left and right margins to auto, which centers the element inside of it’s parent.

[janethread]

OK–I’ll try that. thanks.

[janethread]

it’s still off center.
also, the background is not filling up the entire page. It cuts off short at the bottom.
is it showing up positioned incorrectly for you too?

[Mottie]

What exactly are you seeing that is off center?

Also, I’m looking at your page on a monitor at 1600×1200 resolution and I see a lot of white space on either side and on the bottom. You’ll probably need to add a background color and maybe choose a different background image that looks better when you set the background-repeat to “repeat-y”

I’m not a design expert, but I have to say that the title and navigation font is difficult for me to read. Maybe try using a more solid font.

[janethread]

can’t I have a fixed background that doesn’t repeat? I want it so that there is no white space on the sides and bottom. do you know how I can fix that?
I know what you mean, re: font. sometimes it’s clear, but others it is fuzzy. if I highlight the font, it usually goes into focus.

[Mottie]

If you want a fixed background, then you’ll just need to make it bigger or stretch it using javascript or css3 – check out this recent discussion

[janethread]

I am totally lost :(
nothing I try works. I appreciate your help though.

[Mottie]

It looks fine to me… I know you’re probably looking at IE7 & 8, but those browsers don’t support CSS3. If you really want your site to look the same in every browser (which isn’t always possible), then you’ll probably have to use some of the javascript/jQuery that was posted in that link I shared before.

Alternately, as I said before, you could just set the background color to black and stretch the height of the background image (maybe something like 1500px?).

[janethread]

I will try to do that. Thank you!

[mcguiver178]

1183px…. the standard width is 1024px, so that you can see it in every display correctly, or at least in most of them, try changing it for proper styling, and the easiest way is using as the peeps above me said.. set a width to the body (not to the html) and assign ‘margin:0 auto; ‘ you’ll have it centered in no time! also, there are ways to apply the background image in beter ways with Javascript, or better CSS techniques. take out the duplicated properties in the classess.

the margin 0 auto will help you center elements inside your body tag too, but remember to assign a width, if it’s an image, wrap it inside a dive before doing that.

[janethread]

@mcguiver178
thanks so much! I still have a few questions:
what width do I need to set the body to? and what does it mean to take out the duplicated properties in the classes? and what does it mean to wrap and image inside a dive?
I am sorry that I’m such a novice–I’ve never done anything like this before.
thank you!!!

[Author]

Posts