...

View Full Version : Div outside container centering problem



PeaTearGriffin
10-22-2007, 09:45 PM
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. http://img530.imageshack.us/my.php?image=centeryu3.png

dcostalis
10-22-2007, 09:57 PM
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
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.

PeaTearGriffin
10-22-2007, 10:53 PM
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.

trigger_tre
10-22-2007, 11:56 PM
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

dcostalis
10-23-2007, 01:32 AM
Much better explanation than I gave.

PeaTearGriffin
10-23-2007, 01:40 AM
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?

dcostalis
10-23-2007, 02:19 PM
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.

PeaTearGriffin
10-23-2007, 07:19 PM
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.

PeaTearGriffin
10-25-2007, 03:23 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum