1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Centering page for different resolutions

Discussion in 'CSS' started by Dmwc, Feb 24, 2010.

0
  1. #1
    Hey all,
    I am pretty much totally new to CSS and have been learning it on the fly as I attempt to put together a new website for my video production business. I have managed to assemble my first page after a day and a half, but there's something I can't get to work right.

    I've uploaded an image of what the page looks like to this address:
    http://webpages.charter.net/dmwc/index-temp.jpg

    I designed the page in Photoshop first, sliced it into smaller images, and then used CSS to arrange those in an HTML document. I designed it so that the center area, with the text area and navigation menu is 1024 pixels wide. I want that area to be centered on the page for any screen resolution from 1024x768 and up, and I intended for the banner at the top to fill the entire width of the page for any resolutions above 1024x768.

    I've tried a couple of different methods for centering the page, but I simply cannot get it to work right in lower resolutions. It looks fine on my widescreen monitor at 1680x1050, but if I try to view it at 1024x768, the content area is shifted to the right and you have to scroll to the right to see it all. What I need is some way to "cut off" the left and right sides of the page when it's viewed at lower resolutions, but keep the banner image on top so that it will fill the width of the screen on widescreen monitors. Is there any way to do that or am I out of luck?
     
    Last edited: Feb 24, 2010
    Dmwc, Feb 24, 2010 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Besides the image showing us how you want it to look, please make public the actual page, so we can see your markup and styles.

    I can imagine what you've done, but without the actual code, I can only guess at the steps you need to fix things.

    cheers,

    gary
     
    kk5st, Feb 24, 2010 IP
  3. Dmwc

    Dmwc Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ok, here's the page:

    http://webpages.charter.net/dmwc/temp/index2.html

    I had the index page totally put together, but the code was a mess by the time I got it done, so I actually started rebuilding it from scratch today, and this is as far as I've gotten. I've got the areas for the menu and the title bar laid out, but no images positioned in them yet. Right now the background image is a little bit off, but that's something I'll fix in Photoshop (if I need to) once the page elements are correctly laid out.

    As it is, the primary content area centers itself correctly on my widescreen monitor at 1680x1050 and looks right when I set the resolution to 1024x768 as well, but only in Internet Explorer 8. Firefox 3.5 has everything shifted to the left at resolutions above 1024x768. The other issue is that I can't figure out how to position the two other images that make up the top banner. It's currently divided into four images: banner_left.jpg, banner_still001.jpg, logo.jpg, and banner_right.jpg. The middle two images are the only ones on the page right now. I need to position the left and right side parts of the banner so that they appear on widescreen monitors, but will not be seen otherwise. And they can't disrupt the position of the central content area.

    I am thinking very seriously about making the banner part of the background image to get around this problem, but I want to see if there are other ways of doing it first, because I want the background to tile vertically if at all possible.

    Please be kind when looking at the page and code. I have been working with CSS for all of three days now, so it more than likely is terrible.

    Thanks!
     
    Dmwc, Feb 24, 2010 IP
  4. Dmwc

    Dmwc Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Well, I've now fixed the centering issue in Firefox by adding margin-left:auto and margin-right:auto to the "content-wrapper" div. And I'm getting closer to figuring out what to do with the "side" images for the banner and title bar. But every time I get close, something else stumps me. I've changed this section of the code:

    <body>

<div id="banner_left" ></div>

<div id="banner_right"></div>

<div id="titlebar_left"></div>

<div id="titlebar_right"></div>

<div id="content_wrapper">
    Code (markup):
    And I've added this to the style sheet:

    #banner_left {
	position: absolute;
	width: 328px;
	height: 192px;
	top: 0px;
	left: 0px;
	background: url(../images/banner_left.jpg)
	}

#banner_right {
	position: absolute;
	width: 328px;
	height: 192px;
	top: 0px;
	right: 0px;
	background: url(../images/banner_right.jpg)
}

#titlebar_left {
	position: absolute;
	width: 328px;
	height: 49px;
	top: 192px;
	left: 0px;
	background: url(../images/titlebar_left.gif)	
}

#titlebar_right {
	position: absolute;
	width: 328px;
	height: 49px;
	top: 192px;
	right: 0px;
	background: url(../images/titlebar_right.gif)
}
    Code (markup):
    Now, when I resize the window, the "banner_left" and "banner_right" images actually move "under" the central banner image, which is fine. But the "titlebar_left" and "titlebar_right" images do the opposite. They move on top of the central title bar section, obscuring the page title. I can't figure out why these elements behave in opposite ways. I'm sure there's a better way to lay this out than what I'm doing anyway...

    One more thing: I'd like to be able to get the background image to stay with the main content area so that the darker blue "window" is always lined up with the content in the center. Is there a way to do that?
     
    Last edited: Feb 25, 2010
    Dmwc, Feb 25, 2010 IP
  5. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #5
    put the entire site inside a container div, so add:

    <div id = "container"> at the top under <body>

    </div> at the bottom before </body>

    Then css:

    #container {
    width: ???px; (put required width here)
    margin-left: auto;
    margin-right: auto;
    }
     
    typingmums, Feb 26, 2010 IP
    agilius likes this.
  6. Hecky

    Hecky Like a Dungeon Dragon!

    Messages:
    5,656
    Likes Received:
    284
    Best Answers:
    1
    Trophy Points:
    0
    #6
    I remember when I was learning CSS, one of the biggest problems I faced was that I didn't ever come across that margin-left/right:auto; attribute. I always assumed there'd be some standard 'non-hacky' way to centre a div, but no ;).
     
    Hecky, Feb 27, 2010 IP
  7. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #7
    margin: 0 auto; with more width to the #contentwrap would also work.

    like:

    #contentwrap {
    width: 100%; /* assuming you want full width */
    height: 100%; /* assuming you want full height */
    margin: 0;
    }

    #content {
    width: 95%; /* or 640px or 800px ... */
    height: 100%;
    margin: 0 auto;
    }

    ... and so on

    ---
    Michael

    1click.at - URL shortener with FREE API access
     
    CSM, Mar 1, 2010 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    width: 100% is default on static blocks... only necessary if you want/need to trigger Haslayout in IE6/7 (which isn't a bad idea, but now you cannot add sidepadding/sidemargins).
    height: 100% in this case will not be full height. It will be converted to height: auto;
     
    Stomme poes, Mar 2, 2010 IP
  9. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #9
    was only an example to show how to center a content container or whatever.
    that's why i wrote "assuming" ;)

    anyway thanks for the mentioning
     
    CSM, Mar 2, 2010 IP
  10. agilius

    agilius Well-Known Member

    Messages:
    1,021
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    100
    #10
    Go with this implementation. It's the standard now-days, and it works. ;) I second this!
     
    agilius, Mar 2, 2010 IP
  11. redlightshooter

    redlightshooter Greenhorn

    Messages:
    94
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    18
    #11
    do not use absolute position, and agreed with typingmums and agilius
     
    redlightshooter, Mar 2, 2010 IP
  12. Hecky

    Hecky Like a Dungeon Dragon!

    Messages:
    5,656
    Likes Received:
    284
    Best Answers:
    1
    Trophy Points:
    0
    #12
    Any attempts to do some kind of a non-dynamic pseudo centred website are easily spotted when you have 2560 pixels across ;)
     
    Hecky, Mar 2, 2010 IP
  13. agilius

    agilius Well-Known Member

    Messages:
    1,021
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    100
    #13
    The basic method of centering the content of a parent holder (let's say body) is to make the parent(let's say body) have the propriety of text-align center for MSIE and to make the content holder (let's say the main div) have left and right margins auto. In other words, there is another line of code that is needed:

    

body { text-align:center; } /* for MSIE (a.k.a Internet Explorer) */
#content_div { width:YOUR_SITE_WIDTHpx; margin:0px auto; } /* Margin : top-bottom, left-right */
    Code (markup):
     
    agilius, Mar 2, 2010 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I'm surprised you are writing a hack for IE5 and below. Text-align center is only needed for those browsers. I dunno about you, but I do not support them.

    Text-align still (erroneously) works in IE but so long as you have a proper doctype, the automargins technique will center a width'd static block in all browsers.

    By all browsers I do mean ones actual human beings use in any notable number. : )
     
    Stomme poes, Mar 3, 2010 IP
  15. agilius

    agilius Well-Known Member

    Messages:
    1,021
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    100
    #15
    Without text-align center, a div of 600px width with margin 0px auto was not centered. The doctype was the one for XHTML Strict. I am talking about IE7.
     
    agilius, Mar 5, 2010 IP
  16. jimmy4feb

    jimmy4feb Peon

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    You are trying to making a 1024px wide page on 1024px screen, this is your problem

    if the width of your page is 1024px then reduce it to 1002px & only make changes in your css code so you can make your page 1002px wide.... You will see results for sure.

    here is an simple example:

    make an HTML page & use the following div tag in it & test it on different resolutions, it will give you same results as your website is giving you right now
    #1024div
    {
    margin:auto;
    width:1024px;
    height:10px;
    background:color:#000FFF;
    }

    make another HTML page & use the following div tag in it & test it on different resolutions, it will give you results which you want from your website
    #1002div
    {
    margin:auto;
    width:1002px;
    height:10px;
    background:color:#000FFF;
    }

    Answer of your question:

    Your page remains on center in 1024x768 resolution but it seems to shifted towards left & you see a horizontal bar.....

    Reason: becoz you are trying to make a page of 1024px wide on a resolution of 1024x768px screen resolution. you have to take care of the horizontal bar of the browser beocz it also taking space on the moniter.... some other borders of the browser also taking space....

    According to my experience 1002px wide website working on every browser & donot show any horizontal bar.....

    I know now you need to make alot of changes in your design, but you have to do this & take care of this next time when you will work on this type of stuff.

    Thanks,

    Jimmy
     
    jimmy4feb, Mar 5, 2010 IP
  17. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #17
    Why would you expect a zero margin to center anything? Only IE applies text-align incorrectly. Modern browsers will not be centered with the text-align property.

    cheers,

    gary
     
    kk5st, Mar 6, 2010 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I can assure you that IE6 and IE7 will center a div of 600px, so long as he's in a container who is wider with margin: 0 auto; as the CSS.

    If IE7 is not centering that without text-align, there is an error somewhere else in the code. As jimmy4feb mentions, you cannot center anyone who's 100% width of the container (so a 600px-wide box cannot center if it's inside a 600px-wide containter). If the div is set to display: inline, it will not center: inlines cannot have automargins (but text-align: center on the parent WILL center it, as an inline... also inline-block elements can be centered with text-align). If the div is floated, it will not center with automargins (never checked to see if IE would center one of those with text-align, but I thought not).

    If the doctype is incomplete (doesn't have the referral url) IE may go into Quirks Mode, meaning automargins would not work. The solution is a complete doctype (I haven't seen your doctype so I don't know, just mentioning this).
     
    Stomme poes, Mar 8, 2010 IP