Jump to content

Centering issues


Lucky guy

Recommended Posts

Hello all.

 

I'd be extremely grateful if you could give me any hints on a centering problem I have.

 

I make websites mainly out of photoshop jpeg images with transparent gifs overlaid for the links. I have always used the following code for centering my pages:

 

div#container {
width:800px;
position: absolute;
top:0;
left:50%;
margin-left: -400px;
}

 

<div id="container"> (page content) </div>

 

This has always centered my pages neatly, which I can tell by zooming out on my browser; the content stays nicely centered with the background.

 

However, getting back into doing websites after a long absence; I'm finding this doesn't work any more! As you can see on my page here:

 

http://slrdesign.webs.com/katepage.htm

 

I'm wondering if this is because the page is hosted on a free site (the finished site will be uploaded to a paid host)? Or is it that my container just won't work any more?

 

I have tried the following:

 

-enlarging the pixel width of the container (no change)

-changing the values on all my divs to 'relative' (mucked all the positions up completely)

-using several different centering codes, none of which seem to work

 

Any suggestions would be greatly, greatly appreciated!

 

LG

Link to comment
Share on other sites

Which browser are you using? It centers fine in Firefox and Chrome.

 

That said... I try to avoid using absolute positioning unless I absolutely have to. This should work the same, and works on all browsers:

 

div#container {
margin:0 auto; /* sets left/right "auto" margins */
width: 800px; /* make sure to set a width, or the margin above won't do anything. */
}

Link to comment
Share on other sites

...a couple questions...

 

-- What's with all of the inline CSS on #main, #menu, #bottom, etc? That sort of thing should be in an external CSS stylesheet

-- Why is the #container 800px wide, but divs inside the #container 1280px?

-- You're missing out on a lot of SEO opportunities by keeping a good portion of the text within the design as images rather than plain text. Search engines can't see the text within images. I understand doing this for items where the font won't be available on the user's computer, but you should try to do this as minimally as possible.

 

Also, a correction to the above code: using "margin: 0 auto" won't work if every single element in your site is absolutely positioned. In that case, you also need to add "position:relative" to your #container's CSS.

Link to comment
Share on other sites

Hi Ben, many thanks for your responses!

 

I use firefox myself, and the website does apear ok on there, but I don't know if it would if someone used a different screen resolution to mine I also don't know how to zoom in and out on firefox to check things stay in place. -however your comment encourages me.

 

The other browser I use is Avant Browser, an Internet Exlorer enhancement, and I have also checked on IE itself, and both of these place the content a set pixel width from the edge of the screen rather than centered, which messes the whole thing up completely. So I guess it's maybe just an IE problem I have, but still one that has got to be fixed before the site goes live, as most people use IE. :(

 

I will try your suggestion -with your later ammendment, would that make it

 

div#container {
margin:0 auto; 
width: 800px;
position: relative;
}

 

?

 

I use images instead of text just for reasons of apearance really. I didn't know this had a serious impact on the search engines -of course I will be adding page descriptions and key words etc. The unnecessary code that I am using on my elements is because I originally used sitespinner and sort of learned the coding side (not very well) through cut and paste and seeing what worked, so I wouldn't really know if something is redundant or not!

 

Once again; many thanks for your suggestion.

 

LG

Link to comment
Share on other sites

I can't actually test this myself, but two things I noticed:

 

-- The document is missing a valid doctype, which indicates to the browser what sort of file it is and how it should be parsed. Without a doctype, browsers tend to do strange things. Recommended doctypes are HTML 4.01 Strict or HTML5: http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

-- The #container is 800px wide, but the #main div inside #container is 1280px with a left of -240px. That's a strange setup -- the #container needs to have the same width as the elements inside it.

Link to comment
Share on other sites

I can't actually test this myself, but two things I noticed:

 

-- The document is missing a valid doctype, which indicates to the browser what sort of file it is and how it should be parsed. Without a doctype, browsers tend to do strange things. Recommended doctypes are HTML 4.01 Strict or HTML5: http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

-- The #container is 800px wide, but the #main div inside #container is 1280px with a left of -240px. That's a strange setup -- the #container needs to have the same width as the elements inside it.

 

Hello again. Sorry to trouble you, but would you know which one of those doc types would be appropriate for my site? I will enlarge the container as you suggest.

Link to comment
Share on other sites

Ben; do you think the superfluous css code I have on my elements could be stopping things from being centered properly? If so, what do I need to get rid of?

 

Edit: Have added a doctype declaration as per the template you linked to. This hasn't solved the IE problem but has strangely made the background static so it stays full size when I zoom out on the page content.

 

I just can't understand this.

 

Sorry to take so much of your time and thanks again. :)

Link to comment
Share on other sites

Ben, were you aware that even your own site doesn't center properly in IE?

 

http://imageshack.us/photo/my-images/808/14204843.jpg/

 

But it does do it perfectly in FF

 

http://imageshack.us/photo/my-images/84/fcff.jpg/

 

In your case it's not too great an issue because the background stays with the rest of the content, keeping the design unified, but in my case with a background that is centered and content that won't center it looks awful! I can't find a single site or tutorial on the web that can either tell me how to do this in CSS, or gets it right itself! But it used to work perfectly!

 

I'm completely despairing about it. :(

Link to comment
Share on other sites

Here is a basic tutorial on centering pages - maybe that will help you. http://www.csstutorial.net/2010/02/creating-a-basic-2-column-center-aligned-fixed-width-layout-with-css/

 

On you page, you currently have your container division inside a p tag - that doesn't make any sense - remove the opening and closing p tags.

 

Also, in you CSS you're missing the colon here:

 

div#container {

width:1280px;

Link to comment
Share on other sites

I am using 7. Your site does work fine; it just seems that IE 7 just likes to put things to one side instead of centering them; I have not seen a single site that remains centered as in FF when I zoom out. This means I'll have to change how the background is positioned so the site isn't ruined when users have different screen resolutions. Which will in turn spoil how it looks in FF. :/

Link to comment
Share on other sites

Just a note, You have said that it has been awhile sense you have built a site. You are save with using 960px of width now for your main container. Also you do not have to put the div in front of #container. Not a big deal but if you are like me any keys that you do not have to hit on the keyboard is cool.

Link to comment
Share on other sites

Just a note, You have said that it has been awhile sense you have built a site. You are save with using 960px of width now for your main container. Also you do not have to put the div in front of #container. Not a big deal but if you are like me any keys that you do not have to hit on the keyboard is cool.

 

Thanks Grabenair. :) And to all; I've just made an image of a blue square, put it in place, got rid of my tiled background, and left it at that. It's a messy solution but I can't think of any other I could possibly manage. Internet Explorer is such shite -excuse my French. How they are still the most popular browser is a mystery to me.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...