...

View Full Version : Help w/ this css layout!



clem_c_rock
02-18-2008, 10:58 PM
Hello,
I have a css layout that I'm very close to being happy about. I have it working perfectly in all platforms and browsers except IE (imagine that).

Here's an example of what I'm trying to do:

https://encounterprogram.com/lisa_site/css_test.html

Everything looks great in all browsers except the bottom right and left flowery <div> layers.

If you view the page in Firefox you can see how the page should look. In IE the two layers are pushed to the top instead of laying at the bottom of the footer.

Here's the css code for just those layers:



#div5
{
position:relative;
width:116px;
height:177px;
z-index: 1;
margin-top: 220px;
background:url(BASE_IMAGES/left_footer_img.jpg);
no-repeat;
}

#div6
{
position:relative;
width:116px;
height:177px;
z-index: 2;
left: 642px;
margin-top: -177px;
background:url(BASE_IMAGES/right_footer_img.jpg);
no-repeat;
}


Thanks for any help anyone can provide.

Clem C

jcdevelopment
02-18-2008, 11:15 PM
does this help any??




#div5
{
width:116px;
height:177px;
z-index: 1;
margin-top: 220px;
background:url(BASE_IMAGES/left_footer_img.jpg);
no-repeat;
float:left;
clear:left;
}

#div6
{

width:116px;
height:177px;
z-index: 2;

margin-top:220px;
background:url(BASE_IMAGES/right_footer_img.jpg);
no-repeat;
float:right;
clear:right;
}



let me know, it seemed to help a lot!!

clem_c_rock
02-19-2008, 03:24 PM
I tried that and it works perfectly on the left side but the right side completely disapears as you can see on this link:

https://encounterprogram.com/lisa_site/css_test.html

Definitely closer!

Thanks for your time.

jcdevelopment
02-19-2008, 03:27 PM
im sorry, try taking off the clear:right; see if that works

clem_c_rock
02-19-2008, 05:22 PM
hmmm - tried that and the div still doesn't appear.

so dern close!

jcdevelopment
02-19-2008, 05:28 PM
try this now



#div5
{

width:116px;
height:177px;
z-index: 1;
margin-top: 220px;
background:url(BASE_IMAGES/left_footer_img.jpg);
no-repeat;
float:left;
clear:left;/**/
}

#div6
{

width:116px;
height:177px;
z-index: 2;
left: 642px;
margin-top: 177px;
background:url(BASE_IMAGES/right_footer_img.jpg);
no-repeat;
float:right;
border: 1px solid #ccc;*/
/*clear:right;*/
}

clem_c_rock
02-19-2008, 06:55 PM
Awesome!

Here's the actual design I'm working on and that seems to work w/ every browser I have access to:

https://encounterprogram.com/lisa_site/lisa_main_template2.html

Do you know of any tricks to make those footer images float in their relative positions according to the amount of content in the page that would cause it to grow and shrink?

Looks great - thanks!

jcdevelopment
02-19-2008, 07:09 PM
well, lets try this for an example..

lets say(and this might be over kill but we will just use it anyway)that you have a main container, and then you have a 3 column set.



#mainContainer {
width:700px;
height:600px;/*or whatever you need*/
background-color:#fff;
margin:10px auto;
border:1px solid #000;
}

#columnLeft {
float:left;
clear:left;
height:600px;
width:/*whatever*/
background-image:url(filepath/image1.gif)bottom center;
background-color:/*whatever*/
}
#columnRight{
float:right;
clear:right;
height:600px;
width:/*whatever*/
background-image:url(filepath/image1.gif)bottom center;
background-color:/*whatever*/
}
#middleContent{
width:inherit;/*or just make a width, it doesnt matter*/
height:600px;
background-color:.........
}



then you would take that and place it in the html, you can also on the container, make the width inherit to make it expand i believe!!




<div id="mainContainer">
<div id="columnLeft"></div>
<div id="columnRight"></div>
<div id="middleContent"></div>
</div>



thats just a basic example hoep it works, also check out this web site here (http://blog.html.it/layoutgala/)

good luck man!!!

clem_c_rock
02-19-2008, 08:17 PM
I'm going to try that layout test when I get home tonight.

I did speak out a little too soon. I checked out this page in IE6 and it kinda blows up:

https://encounterprogram.com/lisa_site/lisa_main_template2.html

jcdevelopment
02-19-2008, 08:26 PM
looks like possibly the middle content div is over flowing for some reason, try and mess with the height and see what happens

clem_c_rock
02-19-2008, 10:12 PM
I'm going to try that layout test when I get home tonight.

I did speak out a little too soon. I checked out this page in IE6 and it kinda blows up:

https://encounterprogram.com/lisa_site/lisa_main_template2.html

clem_c_rock
02-20-2008, 11:47 PM
It's looking like the the footer div is getting pushed below the 2 footer image divs. I added borders around the divs for development purpose.

Heres the footer div code:



#footer
{
width: 800px;
clear: both;
height:14px;
border: 1px solid blue;
background:url(BASE_IMAGES/footer.jpg)
repeat;
}


ONLY - in IE6 does the footer div not position itself behind the other image divs and gets pushed down below them.

grrrrrrrr == IE6!!

jcdevelopment
02-21-2008, 02:41 AM
ok, i will take a look at it and see why. I actually really despise IE6, i know its bad but i try not to even look or edit for IE6.

clem_c_rock
02-21-2008, 04:37 PM
oops - double post



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum