Problem centering on widescreen monitors with CSS - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Problem centering on widescreen monitors with CSS

Web page/s show properly on average screens, but align left on widescreens

«
1
2

perthpc

5:00 am on Oct 2, 2010 (gmt 0)

10+ Year Member

Hi,

I'm a newcomer to this forum (and website), and have encountered a problem centering the site on widescreen monitors. Made more difficult as I do not have one (mine is a 16" CRT).
I have tried to usual CSS of putting a wrapper or container in place and auto margins etc., but all it did was align the page to the right in a widescreen.
I was told (on a different site's forum) that this was because I had quite a bit of <position="absolute"> layers in the site so the actual <div class="wrapper"> etc in the body CSS code made it align right.
Starngely enough, the entire contents remain centered with the page as they would normally (?) appear.

No one made any mention of how to address the problem, eg, whether to change the positioning of the layer/s form absolute to something else. I should add the nav bar text links are in their own layers as well. When I was doing Web Site design here at TAFE ( I have my Cert.IV), it was 2007, but CSS coding and widescreens were not mentioned. In fact I don't think widescreens even existed (in Australia) then.

This particular site has 7 pages in it, the nav bar (text links only) is at the bottom of each page. Apologies for the lengthy post, but better to explain fully rather than piecemeal I believe. Any suggestions, I would liketo get this site sitting properly in widescreen as well as average size CRT's.

Many thanks,

Paul

perthpc

1:40 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

I just previewed it and can see the white border at the top. It's about an inch (pixels...?) to the left of the page contents.

At the moment, the CSS now looks like this:

body {
background-color: #000000;
text-align: center;
padding: 0;
}
#container {
position: relative;
background:#fff;
width:80%;
margin:0 auto;
border: 1px solid #fff
}

and the html for the container looks like this:
<body>
<div id="container" width="950px"> for which I just got an error message saying it was not supported by half a dozen different browsers.

perthpc

1:50 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Maybe I should make both the CSS and the div for the container width either 80% or 950px rather than the two different values.

milosevic

2:06 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Hi Perthpc - you are misunderstanding how to set the width.

Delete the line "width:80%;" from #container in the css and replace it with "width:950px;".

(or just replace 80% with 950px)

Because everything inside it is absolutely positioned, the #container div effectively takes up no space on the page (you dont need to fully understand why, though it's because absolute positioned elements are removed from the 'flow' of the page), since it does not contain any static elements.

In this application it's only used to create a new zero point for everything that's inside it (in the source code).

BTW, this method of absolutely positioning stuff is much easier to understand than floats etc on the surface (ie you just set a top and left value to position things), but once start working with it you realise it's crazily complicated and a massive pain in the arse. That's why very few sites are laid out like this.

perthpc

2:17 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Ok, I've done that, but still get the underlined 'error' in the html part of the container saying the width="950px" is not supported etc.

I'm beginning to realise just what a pain in the arse it is.. :-)
many thanks for the help and time on this.
Is there a (final) way around the problem with the container width in the html div?

perthpc

2:22 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Just previewed it, it works! I guess all I need to do is remove the border tag from the CSS now, and apply the new stuff to all the other pages. I'll upload the index page first, then do the rest. It centres really well now, and stays centre when I scroll in and out.

Many, many thanks for your patience. If you ever need any info or help with sound systems (club to concert level), I'll gladly assist.

PC

milosevic

2:28 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

No worries at all! Yep you don't need that HTML attribute, it's redundant because that is controlled with the CSS (and a width attribute would only work on a table element anyway).

Really glad that you got sorted with this one :D

If I ever visit Perth you can buy me a pint :)

perthpc

2:38 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

No problem, we do have a few pubs here that serve good Guinness... :-)

Is the error message going to cause problems?
When I highlight the underscored section (width="950px") in <div id="container" width="950px"> it says "Not supported in IE5.0 , IE5.5 , IE6 , Mozilla1.0 , and Netscape 7.0".

milosevic

2:49 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Yes I say you don't need that width="950px" - the width is set in the CSS, that does nothing.

perthpc

2:56 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

So do I just drop the width attribute from it, and leave the
<div id="container"> as it is?

perthpc

2:58 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Just checked after dropping the width=" " tag, no ill effect.

Thanks again, this has resolved many angst ridden moments for me.

milosevic

3:03 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Glad to help!

Must be pretty late at night over there! I'm more of a Castlemaine or Toohey's man :)

perthpc

3:06 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

For some reason, it's dropped all the text content out of one of the pages, yet it hasn't affected the first page.

perthpc

3:15 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

I got the text content back, but it's still refusing to center one page for some reason. I checked all the tags etc, and nothing out of place that I cans see. Bizarre!

perthpc

3:17 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

It's now 23:16 hrs (11:16pm). I would have thought maybe Newcastle Brown.. :-)

milosevic

3:34 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Ah I guess you're not so far ahead/behind on the West coast! Yeah Newcy brown is OK - I always like to drink the local beer though wherever I am in the world. I guess Castlemaine is a fair haul from WA though :)

Not sure what the issue could be with that particular page - I can only think that there's an error somewhere on that page. Usually the quickest thing is to copy the content into a working page and save it with a new name than trying to find an error.

perthpc

3:44 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

The container border that's visible in the design stage is about 30px to the left of the logo image, yet the CSS and html fr the container is identical to the index page, and another page I just put it into and previewed (with no problems centering).

I think I might call it a day, and look at it again tomorrow with a (slightly) fresher brain and soem Malaysian coffee... :-)
Interesting, you're posts have come in time stamped 7 hrs behind here. I assumed you were in England, or somewhere nearby there.

perthpc

3:48 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Solved it! It was simply a missing ; at the end of the background: #fff

Doh! Ok, I'm halfway cured doctor...you can take off the straps now :-)

This 47 message thread spans 2 pages: 47

«
1
2