20 replies [Last post]
Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

hi, i have tried loads of things to get this site working but no luck!! i want to get the page centered so that as you resize the page, it will still stay central. i have got 2 wrappers, one which has
{text-align:center} and the inside 1 is
{width:760px; margin:0 auto; padding:none; text-align:center; background-color:#FFFFFF; padding-right: 20px;}

i have about 40 other overlays on the site which are all in the correct position, so i assume its something to do with the wrapper codes

the website is: http://www.free-rich-guide.com

you help would be greatly appreciated!!

Thanks
Ash

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 10 years 8 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

I think you may need a

I think you may need a "position: relative" on the whatever is containing the fixed width container. which browser isn't it working on?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Would help if the link

Would help if the link worked!

It's the outer wrapper generally that would be centred but assuming that it is full width then the inner should centre, however the text-align trick for IE5 should be outer or usually body text-align:center first child text-align:left to re-set things, also your padding declarations are a bit odd.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

hmmm

its not working on safari or IE 6, i havent tried it on firefox windows. yet. But it looks like when i preview the site in IE on my computer, but when i upload it to the net, its all shifted over to the right!!

so how come i need position:relative then?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sort the link out please or

Sort the link out please or post all the html/css

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

link

ah i appologise the link is
http://www.free-rich-guide.com/template1

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

Working in safari now!!

It is working in safari, but not IE 6

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Divitis

I'm afraid you've got quite a serious case of divitis there Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

ha

haha yer, i love divs theyre so cool, but i hate IE Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think you are going to

I think you are going to have to run things through the validator before going further.

text-align:center needs to go on body re-aligned left on wrapper, but sort out the markup errors first.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

code

hey could you please show me what u mean in the css:
p.s the div.window and #wrapper are the two containers

http://www.free-rich-guide.com/basic.css

thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I don't see where div.window

I don't see where div.window figures in things?

As I said text-align:center goes on the body selector then re-align on #wrapper.

I suspect the problems you are having are due to positioning the #nav absolutely, not sure though, but there is no reason to be positioning it at all just let it flow and then we'll see how things stack up.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

the div.window i think is

the div.window i think is the same as setting the text as center in the body! i have just created 2 wrappers instead of 1.

littlecharva
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-06-21
Posts: 19
Points: 0

This is what you need:body

This is what you need:

body {
margin: 0 auto 0 auto;
width: 775px;
text-align: center;
}

#Wrapper {
width: 775px;
text-align: left;
}

The 'margin: auto' centers your content on CSS2 compliant browsers and the 'text-align: center' does it in IE.

Then you set the text alignment back to left in your wrapper DIV, and that is inherited by your other elements.

Littlecharva

mod edit/code tags added - tph

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

dude, cheers for that, it

dude, cheers for that, it works for safari, which is css2 and sorta works in IE6, it just doesnt expand as you resize the page. hmmm. well i assume that IE7 has css2 capabilities. would i be right with that?

thanks again
Ash

littlecharva
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-06-21
Posts: 19
Points: 0

Get rid of your

Get rid of your padding-right: 40px; and left:0px in your body, and most importantly, get rid of your position:relative in your wrapper; that seems to be causing the problem.

I get the feeling you've stuck lots of CSS in your CSS file in the process of trying to figure this out (such as left:0px), I think if you were to clear all of the erroneous CSS code out, it would make debugging it much easier.

Try spending twenty minutes removing things and testing the result to see what you can safely remove. You'll thank yourself for it later on when you hit another problem.

Littlechar

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

hi

hey i have done all that and it doesnt seem to be working. it works in safari but not IE and its a bit odd in FF

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

Which is better practice?

littlecharva wrote:
This is what you need:

body {
margin: 0 auto 0 auto;
width: 775px;
text-align: center;
}

#Wrapper {
width: 775px;
text-align: left;
}

Hugo, is this code correct? because it seems to screw thing up! I was testing centering the wrapper and this is the code i came up with:

body { font-family: Times; font-size: 14px; color: #000000; background-color: #000000; margin: 0px; padding: 0px; }

#main
{
width: 930px;
background-color: #000000;
height: 750px;
margin: 0 auto;
padding: 1px;
}

Isn't that the correct code. Im interested into which 1 is better practice!!

thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The second example is the

The second example is the normal method of achieving this requirement and to which you can add text-align:center to the body ruleset and text-align:left to the #main ruleset which will then center a block that is within body but for IE only as it's only meant to center inline elements. IE gets this wrong but it suits IE5+ which can't auto center.

So both would work but the second is more usual, adjusting body works in standards mode and can be a useful technique for layouts but in this instance I dont see the need to treat body as a wrapper element as such.

You should have a centred layout by now? or are there still specific problems?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 14 years 40 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

IE

yeh i think i have it centered now, you can check if you would like, i havent tested it in IE yet but works fine in safari and FF! If you see any problems could u please let me know
anyway thanks

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ashdude2000

Ashdude2000 wrote:


body
{
font-family: Times;
font-size: 14px;
color: #000000;
background-color: #000000;
margin: 0px;
padding: 0px;
}

#main
{
width: 930px;
background-color: #000000;
height: 750px;
margin: 0 auto;
padding: 1px;
}

Isn't that the correct code. Im interested into which 1 is better practice!!

Its bad practice to:
- use a font-family and not include the generic definition, e.g. one of serif, sans-serif or monospace.
- to use a pixel size as IE won't allow the user to resize it.
- to set a color the same as the background color

Its unecessary to put px on 0.

Its good practice to use short cuts where possible.

body { font: 87% "Times New Roman", Times, Serif; color: #ff0; background-color: #000; margin: 0; padding: 0; }