PDA

View Full Version : centering my website on any monitor



saunders1989
Mar 5th, 2010, 12:51 PM
im trying to centre my website on any monitor. ive done some code but for some reason it is off to the right still and i dont know why it is. i have a feeling is cause the div is only 1024px.


#wrapper
{
height:auto;
margin-left:auto;
margin-right:auto;
width:1024px;
position:relative;
}

im not sure what else id need to do to centre it. ive looked around the internet and they all say that is the code you use. so im quite baffled.

thanks

effpeetee
Mar 5th, 2010, 01:21 PM
Not enough information for me to help but:-

Here is a source of info for you.
(http://exitfegs.co.uk/Sources.html)
Frank

saunders1989
Mar 5th, 2010, 01:40 PM
thanks for that i did think it was to do with the 1024px part. i changed the code to this:


#wrapper
{
height:auto;
margin-left:auto;
margin-right:auto;
width:50%;
position:absolute;
}

not a big change but i changed the position to absolute and width to 50% instead of an actual value and it worked. thanks for your link it put me into the right place.

thanks!

abduraooft
Mar 5th, 2010, 01:50 PM
To center an element, position is not required at all, and the use of an absolute value might cause some other issues to your layout.

saunders1989
Mar 5th, 2010, 01:55 PM
i tried taking out position:absolute but it makes my website alignment go really off to the right. do you suggest a different way?

abduraooft
Mar 5th, 2010, 02:44 PM
#wrapper
{
margin-left:auto;
margin-right:auto;
width:50%;
}
would be enough!

saunders1989
Mar 5th, 2010, 02:57 PM
i tried that but it moves my website over to the right and gets cut off by the screen but if i put position:absolute it lines up right.

abduraooft
Mar 5th, 2010, 03:03 PM
i tried that but it moves my website over to the right and gets cut off by the screen Can we have a link to your page?

saunders1989
Mar 5th, 2010, 03:09 PM
im running on a local server off my machine so i have no address at the moment sorry. do you want me to send some files over? i can send my home page and css file?

abduraooft
Mar 5th, 2010, 03:15 PM
im running on a local server off my machine so i have no address at the moment sorry. You could easily sing-up at a free host like freehostia.com and upload a demo of your layout. OR you may post your complete html and CSS here.

saunders1989
Mar 5th, 2010, 04:03 PM
heres a link to the page:

http://blean-photos.freehostia.com/Home.php

Excavator
Mar 5th, 2010, 05:22 PM
Hello saunders1989,
The content of your website is 1100px wide so #wrapper must be at least that wide. 50% is not going to work at all.

To center an element you need three things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto


Your site would center with this -

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

saunders1989
Mar 5th, 2010, 05:44 PM
if i was to do you code it doesnt actually have the website in the centre. its slightly off centre. but with my code ive got its alligned in the centre but its a problem because im using position:absolute

met
Mar 5th, 2010, 06:00 PM
remove position:absolute from #wrapper

add overflow:auto to #wrapper to clear any floated elements

you are also mixing percentage based containers with fixed width elements - there is nothing wrong with this, but you cannot expect it to display correctly with such a large width - 1100px.

you essentially are saying

make #wrapper 50% of the width of the users window, but regardless of this, insert a DIV thats 1100px wide.

your best bet is to either go all fixed, or all fluid.

and edit ~ excavators code DOES center the #wrapper div, its "offcentre" due to the very wide fixed width div contained with it.

saunders1989
Mar 5th, 2010, 06:25 PM
i tried your overflow method and it gives me the scroll bars like this:

http://blean-photos.freehostia.com/Home.php

Excavator
Mar 5th, 2010, 08:46 PM
i tried your overflow method and it gives me the scroll bars like this:

http://blean-photos.freehostia.com/Home.php

I mentioned earlier that what you put in your #wrapper has to actually fit in it or there will be overflow issues.
When you put overflow:auto; on #wrapper and get scrollbars like that, it's because your box model (http://www.w3.org/TR/CSS2/box.html) is broken.

Remember, margin/padding/border all count when figuring total width.

You should really get past this 50% width thing...

Sometimes it helps to put background colors on elements so they stand out from other elements. Helps to show where they are in your layout. If you'd put a background:#fc6; on #wrapper when you tested my code it would have showed you that it actually was centered.

saunders1989
Mar 6th, 2010, 11:06 AM
now my code looks like this:


#wrapper
{
width:1300px;
margin:0 auto;
overflow:auto;
}

there is no scroll bars and it is in the middle. is that correct?

Excavator
Mar 6th, 2010, 11:41 AM
Good job on centering it correctly :thumbsup:

But have a look at another problem. #menu_images is 700px high but it's content is 740px. Even negative margins count when figuring your box model (http://www.w3.org/TR/CSS2/box.html).
margin/padding/border all count.

If you put a background color on that element you can see what I'm talking about -

#menu_images
{
height:700px;
width:1100px;
margin-top:-60px;
background: #f00;
}

If you remove the height and let that element expand to fit it's content it would work much better. You have to clear your floats (http://www.quirksmode.org/css/clearing.html) of course.
Try it like this -

#menu_images {
width:1100px;
overflow: auto;
background: #f00;
}

there is no scroll bars and it is in the middle. is that correct?
To check your markup and CSS for errors, have a look at the links about validation in my sig below.


...

saunders1989
Mar 6th, 2010, 11:50 AM
i now have this
#menu_images
{
width:1300px;
overflow:auto;

}

and is in the middle :). thank you for this. im liking this learning curve on how to do it. im just not sure on the whole clearing floats part its kind of just gone over my head

Excavator
Mar 6th, 2010, 12:02 PM
You position your thumbnail images with a lot of negative margins... That's not invalid but I usually try to avoid negative margins until they're needed. Have a look at demo I have of an alternative method here - http://nopeople.com/CSS/thumbnail%20presentation/index.html

saunders1989
Mar 6th, 2010, 12:14 PM
would doing something like your demo. be able to recreate the layout i have?

EDIT:

another question is when i hover over the bottom 2 images the bottom part of my border gets cut off. but if i use my scroll wheel to drop down a bit when hovered over that image i can see the rest of the border. what would i need to do to fix that?

Excavator
Mar 6th, 2010, 04:53 PM
EDIT:

another question is when i hover over the bottom 2 images the bottom part of my border gets cut off. but if i use my scroll wheel to drop down a bit when hovered over that image i can see the rest of the border. what would i need to do to fix that?

Maybe a little padding?

#wrapper
{
width:1300px;
margin:0 auto;
overflow:auto;
padding: 0 0 25px;
}

saunders1989
Mar 6th, 2010, 05:04 PM
unfortunatly the padding didnt fix that.

Excavator
Mar 6th, 2010, 06:10 PM
What browser are you seeing this in?

Your site appears to be down right now.

saunders1989
Mar 6th, 2010, 06:24 PM
im using mozilla but ive checked it in ie and it has the same issue. the bottom 2 images borders get cut off when you hover over them and another thing is you see the scroll bar for the width. any reason why thats there. i thought it fits into the screen and no need to be scrolling?

Excavator
Mar 6th, 2010, 07:58 PM
#menu_images has the same problem your #wrapper did - your box model is off there too.

Try changing it to this -

#menu_images {
width:1100px;
padding: 0 0 20px;
overflow: auto;
}
Did you understand what I meant about the content not being larger than it's container?

met
Mar 6th, 2010, 08:08 PM
im using mozilla but ive checked it in ie and it has the same issue. the bottom 2 images borders get cut off when you hover over them and another thing is you see the scroll bar for the width. any reason why thats there. i thought it fits into the screen and no need to be scrolling?


you really arent getting this..you're still using a very large, fixed width container. a vast percentage of web users are using 1024x768 as a resolution. anything wider than 1000px will generate horizontal scrollbars.

I use 1680x1050, and the site displays fine horizontally for me, but if i resize the viewport to <1300, i get scrollbars.


the bottom images get "cut off" when you hover because you are using a fixed height as well, so anything that goes over 700px causes vertical scrollbars.

break away from fixed height, and reduce the width to <1000px, which will allow the site to display "normally" for most web users. alternatively look at producing a fluid layout if you want a users screen to be filled, but specifying a width of 1300px is just a no-no for design.

saunders1989
Mar 6th, 2010, 09:02 PM
how would i get away from using fixed widths?