Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts

    Div outside container centering problem

    I'm not that good with CSS so I'm not sure if this is the proper way to do this, feel free to tell me another way. The situation is I have a container div that wraps around all my divs and I have a 3px border around it. Instead of making it square I wanted to make it a round at the bottom. The size of my container is 760px, so with the border it is 766px. So I created a rounded image that was 766px in width and put it in a 766px width div outside the container.

    The problem I have is with centering it. The beginning of the image starts at the left of the container, but it doesn't count the border so it is 3px to the right of where I want it. I tried playing around with text align center, margin left and right auto, but doesn't seem to help. The main thing that worked was setting position to absolute and setting about 20.1% for the left position. And it worked perfectly in firefox, but it wouldn't look right in IE because it always has the scrollbar by default. But also, people with different screen resolutions would see the bottom image not matching. Anyone know how I can make it centered perfectly?

    Incase you don't know what I mean, I drew something quick. So I want to make it look like the top pic, but it is looking like the bottom pic right now.

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    First of all, sexy drawing.

    Second of all, I have two sites with a simliar concept as far as images at the top and bottom of the div, and i always seem to run into the same problem you are each time.

    First of all, try to make sure you set a doctype, so that your browser isn't haphazardly rendering everything however it wants. I think there is more about that in the FAQ if you aren't familar.

    Second, if you're going to use an image on one part, you're better off using an image on both parts. make a GIF image that has your background and the 3 px border, set the CSS to
    Code:
    background-image:URL('image.gif'); background-repeat:repeat-y;
    and do the same for another div you have just below that one. You'll probably have to make an image for the top, too, but that will keep the feel of it consistant by doing that. Yes, it adds 3 images overall to your site... but the GIFs are usually 1K or so.

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts
    The doc type I am using is W3/DTD XHTML 1.0 Transitional.

    I'm not sure if I understood correctly what you suggested, but I tried doing it, and the problem still exists.

  • #4
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    If you could give us a link to your site I think we could help better.

    Best solution is to use matching images

    ********wrapper********
    **********************
    *********Header********
    **********************
    **********************
    **********************
    **********************
    ******Container*********
    **********************
    **********************
    **********************
    **********************
    **********************
    ******Footer***********
    **********************
    **********************

    Make a Header image. Make a Footer image (both none repeating)

    Make a Container image that repeats on the y-axis.

    For instance on one of my websites I have a bg_header, bg_body, bg_footer. All are 965 pixels wide. The header is 965x130 pixels and it is 45.4kb. But the bg_body is only 965x1 pixel image and its only 0.24kb and the footer is 965x25 and its only 1.25kb.

    For the example site look here http://harvestwhitecounty.com/. Scroll down the the bottom of the page to view how I did the rounded edges.

    -trigger

  • Users who have thanked trigger_tre for this post:

    dcostalis (10-23-2007)

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Much better explanation than I gave.

  • #6
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts
    Yea, I don't get how you do it with that example. Say your total width with the borders would be 965, meaning header, container and footer divs are 959 in width? How do those divs stay in the middle? Wouldn't the divs go to the left and have a 6px border on the right?

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Well, you wouldn't need to have the borders with that method. Time for my own sexy drawing

    ***************** <-image1.gif
    ***************** <-image1.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image2.gif
    ***************** <-image3.gif
    ***************** <-image3.gif

    image2.gif would be the background-image for the middle div, and would have the background-repeat:repeat-y; property. There wouldn't need to be a border on the divs, because the images would have the border.

  • #8
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts
    Oh I knew there wasn't a border, but I thought the divs inside the wrapper were 6px's less and were centered within the wrapper...

    I don't think I can do it that way because I also have more backgrounds in the content. Unless I make 3 transparent pixels to the left and right? But I also have flash elements that wouldn't be transparent. I'll test it out.

  • #9
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts
    After many attempts I finally got it working, but I have one small problem for IE. My middle div that I use to repeat y of my background image stretches onto my footer div. So you can see straight borders coming down the side. I have a background image for my whole body, so my footer image needs to be transparent. Anyone know what I need to set to make the background stop repeating at the end of the middle div?

    Edit: Not sure if its the right way, but I fixed it by putting another div just before my footer of 1px height with my same bg image from the middle div. At least it works now.
    Last edited by PeaTearGriffin; 10-25-2007 at 05:20 AM.


  •  

    Posting Permissions

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