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

tangor

7:23 am on Oct 2, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Best we can do it take a look at your PARSED TO ESSENTIALS CSS and HTML. Usually "center" works with all resolutions so something is not quite right.

Major_Payne

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

"center" tag is outdated, but centering an element requires that element to have a width less than 100%.

Example:

body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Change parameters as you need. Set "#fff" to background color you want.

Centering text can be done with the CSS property: text-align: center;

perthpc

3:52 am on Oct 3, 2010 (gmt 0)

10+ Year Member

Hi,
Thanks for the replies, apologies for the delay in responding. I was away doing a show most of yesterday afternoon and evening. Here's the html and CSS, I've cut the meta tags (description of site including name of site) as required by the forum.
each page has approximately the same width in px (the logo at top is 830px, and the nav bar at bottom would be approx. 860px), however, some pages are deeper than others.

Many thanks, I guess the time difference between us will also account for responses.

Paul

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index</title><meta name="keywords" content= snip />
<style type="text/css">

</style>
<script language="JavaScript" type="text/JavaScript">

perthpc

3:56 am on Oct 3, 2010 (gmt 0)

10+ Year Member

I should add that I took out the <div class="center"/> etc the other day after it decided to align to the right. If you need any other sections of the html etc, let me know.

Thanks again,

Paul

tangor

4:42 am on Oct 3, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Minor correction in CSS fonts with spaces in names should be in quotes "Times New Roman" etc.

This works for me... perhaps there are better ways...

body {
margin-left : 0;
margin-right : 0;
color : black;
background : white;
text-align : center;
padding : 0;
}

perthpc

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

10+ Year Member

Ok, I'll see how it goes. The fonts are auto written by Dreamweaver (MX2004 v7.0.1) when doing the Page Properties at the beginning.
DW always asks for the four margins (usually in px), ie, Left, Top, Right, Bottom. I've seen margin-left: 0 auto; etc also used, can I drop the Top and bottom margins without causing havoc in some browsers?
The background-repeat: no repeat; was put in purely to stop it from tiling in some browsers.
Not having a wisescreen monitor here, means I'll wait until the friend/client gets home from a show today before he can see it and let me know the result. If I can apply the same code to all the pages, great!
I'll let you know the end result, many thanks.

Paul

milosevic

4:09 pm on Oct 4, 2010 (gmt 0)

10+ Year Member

Hi PerthPC, welcome! I wouldn't have known what TAFE was if I hadn't couch-surfed with some guys in Parramatta for a while when I was travelling aus, gave me a laugh :)

If you add a "width" rule to your body declaration, it should hopefully clear things up. Things can't be positioned with auto margins unless they have a width.

You can use either pixels (fixed width) or percentage (fluid width).

To give a rough idea of what your page will render like on a bigger screen, you can zoom out the page and resize your browser window.

To do this, (presuming you are using something like Firefox/chrome/safari/recent IE), hold down the ctrl key and spin your mousewheel (or press the + and - keys if you dont have a mousewheel). Zoom the page right out, and then you can resize the window and you're effectively looking at your site as it would appear on a widescreen.

To get back to the original size rendering, press ctrl-0 (if you forget to do this it can lead to massive headaches)

Not exactly, but enough to get an idea on issues like this one you are experiencing.

Ok, I'll see how it goes. The fonts are auto written by Dreamweaver (MX2004 v7.0.1) when doing the Page Properties at the beginning.
DW always asks for the four margins (usually in px), ie, Left, Top, Right, Bottom. I've seen margin-left: 0 auto; etc also used, can I drop the Top and bottom margins without causing havoc in some browsers?

You're using Dreamweaver MX2004 in 2010?! You are going to have a lot of troubles if you are building sites with this piece of kit. I'm not saying you need the latest dreamweaver, but when you try and use DW older than CS3/CS4 with CSS layouts, in my experience it is a WYSIWT F! (what you see is WT F?") editor.

Visual layout programs don't have so much relevance with modern CSS design either. I'm sure they would have taught you to design this way at TAFE, but you note they didn't teach you anything about doing CSS, and no wonder if they were teaching you with that!

Dreamweaver etc are good for table layouts, with CSS you are better off using something like the edit CSS pane of the web developer toolbar for Firefox, where you can enter code and see it's effect live in a standards compliant browser instead of Adobe's crock of s**te.

perthpc

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

10+ Year Member

Hi Milosevic,

I've just d'loaded the web developer toolbar for Firefox, so will have a look see at what I can do.
It gets a bit curly, other developers suggestions re centering have aligned the page to the right, and changed the link text colors at the same time without me changing anything in that part of the code! Whne the person I'm doing the site for checked on his widescreen, he said it had aligned further to the right than center, and the link text color on his browser (also latest Firefox) was white! It's red on mine and other people's browsers.
When I made some changes the other day, on my browser (not a w'sreeen) it seemed to have aligned mor eto the right, and had also changed the link text color to blue. Again, without me changing anything in that area of the code. Maybe it's just a bug in my DW, but it's certainly starting to drive me nuts!

Cheers.

milosevic

8:18 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Did you try what I suggested with zooming out your browser window?

Adding a width to your body is the simplest (and most obvious) way to fix this aligning centre/right issue too, I don't know what those other guys have suggested.

perthpc

9:32 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Yes, just did the zoom in and out. It altered only the text on the page, not the logo image and it's text (obviously).
I've just added width and height to the CSS, also added auto after the margin left and right code. It now reads like this:

body {
width: 950px;
height: 650px;
margin-left: 0 auto;
margin-right: 0 auto;
background-color: #000000;
text-align: center;
padding: 0;

I'll upload it as it still appears centered in my monitor, problem is verifying it with my friend as he's not in front of his widescreen at the moment. We'll see what happens.

Thanks.

milosevic

9:43 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Hey hope it works OK! Good luck :)

What browser are you using with zooming out? Zooming out in recent firefox or Google Chrome (at least) should also zoom all images etc on the page.

Zooming out and only affecting the text on the page is the way that older versions of Internet Explorer worked.

perthpc

9:43 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Just uploaded it with new add-ons in CSS and had a look after refreshing the view. So far so good. It still appears centre (our English :-) ) so will wait until he's able to check it on his browser.
Still can't figure out why his Firefox shows the text links in white, when others show them in red as they're supposed to be.
I appreciate the security issue withe not being able to post the URL here, but it would make things a tad easier if someone with a widesceen was able to see the site (or rather the index page), that way, if thi s fix works, then I can apply it to the other seven pages and know it will be ok.

PC

perthpc

9:49 am on Oct 5, 2010 (gmt 0)

10+ Year Member

I have v3.6 of Firefox, (latest downloaded update) and v8.0 of IE.
The zoom in and out does not affect the logo image or the three images in the flash player in Firefox, but it does work in IE.

PC

milosevic

10:04 am on Oct 5, 2010 (gmt 0)

10+ Year Member

That's strange, does zooming in and out work on other sites (eg the images in the header of webmaster world)?

Perhaps you have an option set, I think there's an option somewhere that says "only resize text on zoom" or something like that, a quick check I couldn't find it though.

perthpc

10:35 am on Oct 5, 2010 (gmt 0)

10+ Year Member

I found it, it's under the View menu, on the drop down (to right) 'zoom text only'. It was ticked, I've unticked it and evrything zooms in and out now. My res is set at 800 x 600 to (hopefully ) give me an idea of how it will look in that size.
Still doesn't alleviate my lack of widescreen though... :-)
When zooming this page (webmaster forum), the more I zoom in, thr further to the right it goes, but not by much. When zooming out, it stay pretty much centre.

PC

perthpc

10:40 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Just did the zoom out on the index page in question, it moved more to the left and up somewhat on zoom out. Zooming back in brings it back to normal, zooming right in takes it to the right a bit.

PC

milosevic

10:53 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Nice one finding that option, I was looking in the advanced options dialogue and about:config lol

That must be pretty tough designing at 800x600! The web developer toolbar thing might take up too much space on the screen to be useful at that res.

If you are using it to test how the site looks at 800x600, there's a much easier way with the web developer toolbar (Firefox at least) - go to "resize" in the toolbar menu, then "edit resize dimensions" and add 800x600, 1024x768 etc and save them. Then when you go to "resize" and click on that size, it resizes the browser window to the exact size it would be if you were looking at it full screen in that res. Very useful for testing - I usually don't bother with 800x600 though nowadays and only optimise for 1024x768 - if your site will have a lot of mobile or netbook users though this may not be the best option.

Not having a widescreen shouldn't be an issue - if you make your browser window less tall, you're emulating a widescreen display of the same resolution.

For example, at work I use a 1280x1024 screen which is normal aspect ratio. If I dragged the top edge of the browser window down by 224 pixels to make the browser window less tall it would be exactly the same as a 1280x800 widescreen monitor (the same horizontal res but not as tall).

It sounds like your page is now properly centred - if you zoom out and it stays in the centre that's a very good sign, zooming in you are likely to see much more inconsistencies in how it is positioned.

perthpc

11:12 am on Oct 5, 2010 (gmt 0)

10+ Year Member

No, it's not staying in the centre. It moves more to the left and upwards a bit when zooming out as I said. On zooming back in, it comes back to the centre, and then moves to the right a bit if I zoom right in.
I'm thinking that there are still people who use the 800 x 600 resolution, a friend of mine has a Mac laptop with widescreen, he uses a 1024z x768 res. The page appeared centred on his. I don't know that you can design with only a wider resolution in mind, without it adversely affecting people who may still have smaller screens and resolutions.
Oops, just checked my res, it is also 1024 x 768! Don't know where the 800 x 600 came from.
It must be that time of day, "Oh, nurse....!" :-)

milosevic

11:34 am on Oct 5, 2010 (gmt 0)

10+ Year Member

That's disappointing it's not working - getting back to the code, I've tested some stuff.

Add this to your CSS:

#container {
background:#fff;
width:80%;
margin:0 auto;
}

then add to your HTML <div id="container"> Test blablabla </div>

The cont div should be properly centred in the browser window in all cases. You can remove the width/margin rules on the body as this will now just serve as the background of the page.

Put all the content on your site inside the "container" div and you should be good to go!

perthpc

11:43 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Any particular place to put the additions in the CSS, and why the background:#fff; ?
The background colour in this site is black (#000000)

PC

perthpc

11:53 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Sorry, just scrolled back up and read a previous post, the #fff is I assume just an example.

I'm assuming the <div id="container"> etc goes between the </head> and <body> in the html?

milosevic

11:54 am on Oct 5, 2010 (gmt 0)

10+ Year Member

Because if the background colour of that div is black, it will be invisible on the page because the body also has a black background :P

If you are currently working on a black div on a black background and judging things by where the disembodied text appears on the page you are going to make things a major pain in the arse for yourself. At least give the elements you are working on a white border or something so you can see what you are doing. Removing the border/changing background colour is a 5 second job at the end of development.

It's an easy trap to fall into when you're starting out to worry about color, style etc far too early in building a layout/template. Get things right in terms of position of all your elements, and then style the appearance (in a separate CSS file for extra points).

The CSS can go wherever - organising CSS is a matter of personal preference mostly.

Edit - Just saw your last post - no, the container div as with all HTML content goes between the <body> tags - think of this container div as like an 'extra level' of the body tag - the <body> is your outer background, and the container is like an 'inner background' that holds where all your content will go in the right area of the screen.

perthpc

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

10+ Year Member

Just did all that, no difference whatsoever to the page, and no visible container either when previewing in Firefox or IE. The page still moves to the left and upwards when zooming out.

milosevic

12:26 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Hi, that shouldn't be the case - can you paste the full HTML and CSS you are using? (like what you pasted before, but with the html content too)

perthpc

12:31 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

Can do...
Quite a lot more on th eother 7 pages.. it's pasted below.

PC

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index</title><meta name="keywords" content="snip/>
<style type="text/css">

</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>
<div id="container">
<div id="Layer6" style="position:absolute; width:242px; height:21px; z-index:4; left: 374px; top: 857px;">
<div align="center"><em><span class="style1">Copyright © Brenton Fosdike 2009 / 2010</span></em></div>
</div>
<div id="Layer1" style="position:absolute; width:102px; height:22px; z-index:26; left: 70px; top: 778px;">
<div align="center" class="style2">HOME</div>
</div>
<div id="Layer3" style="position:absolute; width:840px; height:260px; z-index:24; left: 67px; top: 7px;">
<div align="center"><img src="diamond-logo_A.jpg" width="840" height="260" /></div>
</div>
<div id="Layer3" style="position:absolute; width:31px; height:28px; z-index:13; left: 459px; top: 15px;">
<div align="center"><a name="Top" id="Top"></a></div>
</div>
<div id="Layer4" style="position:absolute; width:400px; height:440px; z-index:25; left: 292px; top: 294px;">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" name="Flash player" width="400" height="440" id="Flash player">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:false,frameShow:false,slideDelay:4,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" />
<embed src="slideshow.swf" width="400" height="440" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:false,frameShow:false,slideDelay:4,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPlay:true,imageURLs:['img2.jpg','img1.jpg','img3.jpg'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#000000,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="Flash player"></embed>
</object>
</div>
</div>
<div id="Layer2" style="position:absolute; width:102px; height:22px; z-index:36; left: 180px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/biography.htm">BIOGRAPHY</a></div>
</div>
<div id="Layer5" style="position:absolute; width:102px; height:22px; z-index:35; left: 289px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/bandmembers.htm">BAND</a></div>
</div>
<div id="Layer7" style="position:absolute; width:102px; height:22px; z-index:29; left: 398px; top: 777px;">
<div align="center"><strong></strong><span class="style2"><a href="http://neildiamondtribute.com.au/techinfo.htm">TECH INFO</a></span></div>
</div>
<div id="Layer8" style="position:absolute; width:102px; height:22px; z-index:30; left: 505px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/contactus.htm">CONTACT</a> </div>
</div>
<div id="Layer9" style="position:absolute; width:102px; height:22px; z-index:31; left: 616px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/ask-us.htm">Q & A</a> </div>
</div>
<div id="Layer10" style="position:absolute; width:102px; height:22px; z-index:32; left: 725px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/pics-page.htm">PICS PAGE</a> </div>
</div>
<div id="Layer11" style="position:absolute; width:60px; height:22px; z-index:33; left: 468px; top: 826px;">
<div align="center" class="style2"><a href="#Top">TOP</a></div>
</div>

<div id="Layer12" class="style3" style="position:absolute; width:541px; height:20px; z-index:34; left: 215px; top: 243px;">If you can't see the flash slides below, download the flash player here: <a href="http://get.adobe.com/flashplayer/">Flash Player</a></div>
<div id="Layer23" style="position:absolute; width:883px; height:30px; z-index:28; left: 58px; top: 773px;"></div>
<div id="Layer13" style="position:absolute; width:102px; height:22px; z-index:37; left: 833px; top: 778px;">
<div align="center" class="style2"><a href="http://www.neildiamondtribute.com.au/links.htm">LINKS</a></div>
</div>
</div>
</div>
</container>
</body>
</html>

perthpc

12:32 pm on Oct 5, 2010 (gmt 0)

10+ Year Member

OOps, just realised the hrefs are there with the url in them at the end.. :-/ Mea Culpa!

milosevic

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

10+ Year Member

Whoops!

Now we're getting somewhere though - the problem is that your CSS rules aren't being applied to the page at all, because of a syntax error!

<title>Index</title><meta name="keywords" content="snip/>
<style type="text/css">
 enclosing your CSS either.

If you use the below CSS rule, suddenly you will see how all your divs are laid out on the page.

div {
border:1px solid #fff;
}

The reason that the #container div isn't working to centre the page is indeed because all your divs are positioned with absolute positioning. This means that the parent container is ignored - in this instance, the top left of the browser window is the 'zero point' for absolute positioning.

The solution is to set a rule on the #container div

position:relative;

Relatively positioned elements will establish a new zero point for absolute positioning, making the top left corner of the container div the zero point, and hence centering the layout.

Also, remove the width/height/margin rules from body as these are likely to cause headaches. Set the width of the layout in the rule for the container div.

Edit: I would lose the meta keywords tag altogether, it used to be worth having but search engines haven't paid any attention to it for years now

perthpc

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

10+ Year Member

The missing double quote was because I snipped it with all the keywords when doing the copy and paste. It is in the code I can assure you.
The  wasn't put there by me. It must have been an auto thing by DW, it puts a few strange in automatically.

I need to remove the entire width/height and margin-left/margin-right: 0 auto; rules altogether?
Do I put the layout width in % or pixels, or will either work?

milosevic

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

10+ Year Member

Yes, the only rule you really still need on the body is

background-color: #000000;

You shouldn't need to specify top or bottom margin or a height.

You can use either % or px at your discretion, depending if you want a static or fluid layout - since you have laid everything out with absolute positioning, the layout is static so a static width (in pixels) would be most sensible. The 950px you were using before should work fine.

Has the position:relative on #container fixed your problem?

This 47 message thread spans 2 pages: 47

1
2
»