Simple, I'm Sure, but annoying nonetheless layout issue
newbie
Location: Spain
Posted: Mon, 2008-09-08 14:10
Hi all,
May I just apologise in advance if this has been answer preivously. I have scoured the forums yet I have not seen anything that answers my problem exactly, some came close, but no cigar!
I am designing a simple portal, "Male"/"Female", doorway into two main sites.
The design consists of 3 divs.
Div 1 - z-index above the other 2 holding multiple divs making up the body of the page, plus a background fade left to right of blue to pink
Div 2 & 3 - z-index set to lower than Div 1 and floated left and right respectively. Background color to suit blue & pink to follow fade background of Div 1.
I was aiming to have a front that no matter what size resolution you go up to, Div 1 will always be centered and Div 2 & 3 will sit behind it scrolling the corresponding color to the left and right when expanded.
I have it working in all browsers except Safari. Div 2 & Div 3 sit below Div one on the screen. As if pushed down. They will not move up behind Div 1 as in IE 7, FF Opera, Netscape.
HTML is as follows;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="robots" content="index, follow"> <link href="_include/styles_portal2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="outerInner"> <div style="padding-top:100px; _padding-top:100px;"><img src="_images/portal001.jpg" alt=""></div> <div><img src="_images/portal002.jpg" alt=""></div> <div> <div class="floatLeft"><img src="_images/portalGuys.jpg" border="0" alt=""></div> <div class="floatLeft"><img src="_images/portal003.jpg" alt=""></div> <div class="floatLeft"><img src="_images/portalGirls.jpg" border="0" alt=""></div> <div id="clear"></div> </div> <div><img src="_images/portal004.jpg" alt=""></div> </div> <div id="leftScrollBG"></div> <div id="rightScrollBG"></div> </body> </html>
CSS is as follows;
/* mac hide\*/
html, body { padding:0; margin:0; height:100%; text-align:center; }
/* end hide */
body { padding:0; margin:0; min-width:100%; text-align:center; /* for mozilla*/ }
#outerInner { position:relative; top:0; left:0; z-index:2; width:718px; margin-left:auto; margin-right:auto; height:100%; min-height:100%; background:url(../_images/portalBackground.jpg) repeat-y; padding:-100px 0px 0px 0px; }
.floatLeft { float:left; }
#clear { clear:both; }
#leftScrollBG { position:relative; top:-100%; left:0; z-index:1; float:left; width:50%; _margin-bottom:-100%; height:100%; min-height:100%; background-color:#2C303B; }
#rightScrollBG { position:relative; top:-100%; left:0; z-index:1; float:right; width:50%; _margin-bottom:-100%; height:100%; min-height:100%; background-color:#B551B5; }
I understand there maybe parts of the CSS that do not apply to the design but I have been too busy sorting this problem out to clean up my code as yet.
Any ideas would be appreciated.
Thanks in advance.
Elder
Posts: 1672
Joined: 2005-11-20
Location: STL
Can you maybe show an image
Posted: Mon, 2008-09-08 16:30
Can you maybe show an image of what you are trying to accomplish?
all. <Dictionary.com http://dictionary.reference.com/browse/all>
newbie
Posts: 2
Joined: 2008-09-08
Location: Spain
Hi Thanks, I hope this
Posted: Tue, 2008-09-09 07:47
Hi Thanks,
I hope this makes it clearer for you.
Basically if the browser is stretched to 15miles wide the two divs "2" will stretch indefeinately.
This works in all browers but Safari looks like
the float or z-index doesn't seem to have any effect.
Cheers