|
Subject:
|
Float causing background-color not to show
|
|
Posted By:
|
wheelie
|
Post Date:
|
1/10/2006 2:37:03 PM
|
I'm trying to create a box with curved corners, but without using tables.
here's the code:
<div style="width:769px;background-color:#000000;padding-top:20px; color:#000000;"><img src="images/ad_banner.gif" width="558" height="69" alt="" class="centeredAd" /><img src="images/ele_btmLeftCorn_black.gif" width="6" height="8" alt="" style="float:left" /><img src="images/ele_btmRightCorn_black.gif" width="6" height="8" alt="" style="float:right" /></div>
the code is working except that between the 2 corner images (ele_btmLeftCorn_black.gif & ele_btmRightCorn_black.gif) the background-color is not being used: instead of black it's white. I know i could either use a table or just make one image that has both corners on it, but i'd rather use my 2 small images and no tables.
thanks,
Josh
|
|
Reply By:
|
meow
|
Reply Date:
|
1/10/2006 2:45:00 PM
|
Got a URL to a working example?
--
http://yupapa.com
|
|
Reply By:
|
wheelie
|
Reply Date:
|
1/10/2006 3:44:06 PM
|
quote:
Originally posted by meow
Got a URL to a working example?
unfortunately it's in a protected workspace. i think i'm just going to use one image instead of 2. thanks!
|
|
Reply By:
|
joaan
|
Reply Date:
|
1/24/2006 6:29:33 AM
|
I would suggest using 2 images. Otherwise you will not be able to assign the block dynamic width (%).
Rather than using float to make the images stick to the left or to the right, use position. By positioning the block itself relatively (left:0px; top:0px;) you create the possibility of positioning the corners with absolute positioning. You will need to put the images inside the div block for this to work. The top left corner should be positioned left: -1px and top: -1px, asuming that the block has a border of one pixel. The right corner should be positioned right: -1px and top: -1px. This should work for you.
Happy programming!
/J Andersson
|
