SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS alignment question

    I'm currently designing a CSS site for someone:

    http://home.comcast.net/~janick1/ming/index.html

    css file: http://home.comcast.net/~janick1/ming/css/csmith.css

    At first, I designed it with a fixed width of 760px and top left alignment. Now, I'd like to keep the fixed width, but have all of the content centered. To do so, I've adjusted the body element as follows:

    body {margin: 0; background: #D7E5ED url(../images/shadow.gif) top center repeat-y; font-family: trebuchet ms, Verdana, Arial, Helvetica, sans-serif; font-size: 90%; color: #333; min-width: 760px;}

    My question is this: how can I get the rest of the content (in the "container" div) to center, or move with, with the white background, yet stay absolutely positioned against the white background? (This should make sense when you view the page.) Currently:

    #container {position: absolute; left: 3px; top: 2px; width: 760px; background-color: #fff;}

    thanks...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You just need to set margin auto on your container and change it to position:relative. The position:relative will give a stacking context for any positioned elements that are on the page. This will centre it in most browers but you will also need to add text-align:center to the body definition for ie5 and ie5.5. as they don't understand margin:auto.

    Code:
    body {margin: 0;padding:0; background: #D7E5ED  url(http://home.comcast.net/~janick1/ming/images/shadow.gif) top center repeat-y; font-family: trebuchet ms, Verdana, Arial, Helvetica, sans-serif; 
    	  font-size: 90%; color: #333;min-width:760px; text-align:center;}
    #container {position:relative;margin: 2px auto 0 auto; width: 760px; background-color: #fff;text-align:left;}
    This will centre the whole thing, however your background shadow is out by about 14 pixels so you will need to alter it to fit.

    Otherwise you will need to surround your content in another outer so that you can pull the display back by 14px.
    Code:
    body {margin: 0;padding:0; background: #D7E5ED  url(http://home.comcast.net/~janick1/ming/images/shadow.gif) top center repeat-y; font-family: trebuchet ms, Verdana, Arial, Helvetica, sans-serif; 
    	  font-size: 90%; color: #333;min-width:760px; text-align:center;}
    #outer {position:relative;width:760px;margin:auto}
    #container {position:relative;margin:2px 0 0 -14px; width: 760px; background-color: #fff;text-align:left;}
    html:
    Code:
    <div id="outer">
    <div id="container"> 
    all your page........
    </div>
    </div>
    However this will mean that you loose 14px when the screen is resized to 760px. (I just showed you this option so that you could see how to do it).

    So go with the first option and adjust your background shadow to fit.

    Paul

  3. #3
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for the help. I went with your first option using the same exact code but I'm still running into a problem with the background shadow image when I tried to shorten it by 14px. Let me try to explain:

    The original image you saw had a width of 180px (from the left edge, 165px of white, and then 5px of shadow gradient, and then 10px of the light blue background color). I figured I could crop 14px from the left (white) and it would work, but when I tried this, the image didn't extend the full width of the container. I played around with it some more and if you check the page again, you can see its current state.

    Now the image is 771px - this is the only width that allowed the container to line up perfectly with the shadow. I don't know why that is, since I thought subtracting 14 would do the trick. The 3px of red you see on the left side - I put that there as a marker because that's the 3px I can't get rid of. Cropping it just displays white space to the left of the container, and cropping from the right just pulls the shadow in to the left, messing up the alignment.

    I know the easy fix would be to change the red to the light blue background - problem solved - but I'm really trying to understand the logic here. I'm sure it's just common sense that I'm missing and if this is too confusing, I'll just go with the quick fix. Thanks again!

    John

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your content is 760px wide and centred and you want a 5px shadow on the right side.

    Your background image is centred also so therefore it needs to be 760px wide(to cover content) + 5px shadow right + 5px of nothing on the left otherwise it wont be central. This equals 770px. You have found that 771px is correct which is more or less right.

    You have solved it correctly. The background image is centred and your content is centred therefore your content must be centred within the background otherwise it will cut the shadow out.

    So just change the red to the background colour and you're finished. You may want to leave a 1 pixel border on the left of the bg image which may frame it better than nothing at all.

    Hope that makes sense.

    Paul

  5. #5
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A-ha! I forgot about adjusting for the 5px shadow with the background color on the other side. Now it makes sense to me.

    Thanks again!!!

  6. #6
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question one more question...

    say you are viewing my page at 1280 x 1024 and all the content is centered in the middle of the screen... how can I make, for example, a 100px square image appear on top of the light blue background color in the top left corner of the screen, yet it wouldn't appear if viewing at 800 x 600?

    Would this url(imagename.gif) go in the body element? or would it go in a div within the body, yet outside the container div???

    Thanks!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can place an absolutely placed element anywhere you want on your page as long as it isn't nested within another positioned object.

    You can then set the z-index so that the main content flows over the top of the image as the page is resized. However this may look a little odd when the window is only resized a bit.

    To place an element absolutely use this code.
    Code:
     
    #container {position:relative;z-index:2}
    #image {position:absolute;top:0;left:0;width:100px;height:100px;z:index:1;background:red}
    Make it the correct dimension for your image and place your image inside the div (or set the image itself to the above style).

    You can place the html right at the end of your html just before the closing body tag to make sure its not nested in any other elements.
    Code:
    <div id="image"><img src="etc......</div>
    </body>
    I'm not sure if that's what you meant.

    Paul

  8. #8
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    z-index. That's exactly what I meant. A thousand thank you's, Paul!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •