problems with a css layout. fixed positionOkay i designed a new layout in photoshp, and sliced and exported it with imageready cs (yes i had to go back and use this older program ) and i did the hacking and my own coding on the css and xhtml, but i came to a pickle. it's been a while since i tried to slice up a layout and export it in this way. The way imageread exported the css is as div's. So each Div has a location set to it. So far i havent been able to think of any way to use other type of positioning or whatever, so i assume this is the only way of doing it. The design is too complex to just use the 3 coloumn trick or whatever. Also all the positions are set to obsolute. I've tried to set them to other statuses, but it ruined the layout. Im wondering if there is a way to have static or whatever css dev (with positioning like top: right: etc) before and after a part that i need to be fluid? I am wanting the header and footer to stay the same, but wanting the middle to stretch for the content. Im not sure if this is possible. i cant even really explain it properly ha. But i may have to go back to using oldschool tables for this design, which is something that im really not wanting to do. I think i did get a design to work like this back in 2005, but it was such a long time ago that i have forgotten. here is the coding: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>i like biscuits</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body,td,th { color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 12px; background:#000000 url(images/bg2.jpg) repeat !important; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } img{ border:0px; } a:link { color: #ffd700; text-decoration: none; } a:visited { text-decoration: none; color: #ffd700; } a:hover { color: #FFFFFF; text-decoration: underline overline; } a:active { text-decoration: none; color: #ffd700; } #wrap{ position: relative; margin: 0 auto; width: 1100px; } #content { position:absolute; left:0px; top:0px; width:1100px; height:700px; } #top1 { position:absolute; left:0px; top:0px; width:412px; height:273px; background:url(images/top1.jpg) no-repeat !important; } #top2 { position:absolute; left:412px; top:0px; width:371px; height:273px; background:url(images/top2.jpg) no-repeat !important; } #top3 { position:absolute; left:783px; top:0px; width:317px; height:273px; background:url(images/top3.jpg) no-repeat !important; } #leftside1 { position:absolute; left:0px; top:273px; width:35px; height:240px; background:url(images/leftside1.jpg) no-repeat !important; } #menu { position:absolute; left:35px; top:273px; width:1028px; height:40px; background:url(images/menu.jpg) no-repeat !important; } #rightside1 { position:absolute; left:1063px; top:273px; width:37px; height:240px; background:url(images/rightside1.jpg) no-repeat !important; } #middiv { position:absolute; left:35px; top:313px; width:1028px; height:42px; background:url(images/middiv.jpg) no-repeat !important; } #midbox1 { position:absolute; left:35px; top:355px; width:501px; height:103px; background:#000 !important; } #midboxdiv { position:absolute; left:536px; top:355px; width:23px; height:103px; background:url(images/midboxdiv.jpg) no-repeat !important; } #midbox2 { position:absolute; left:559px; top:355px; width:504px; height:103px; background:#000 !important; } #middiv2 { position:absolute; left:35px; top:458px; width:1028px; height:55px; background:url(images/middiv2.jpg) no-repeat !important; } #bigbox { position:absolute; left:0px; top:513px; width:1100px; height:105px; background:url(images/bigbox.jpg) no-repeat !important; } #bottomleft { position:absolute; left:0px; top:618px; width:27px; height:53px; background:url(images/bottomleft.jpg) no-repeat !important; } #buttomdiv { position:absolute; left:27px; top:618px; width:1036px; height:33px; background:url(images/buttomdiv.jpg) no-repeat !important; } #bottomright { position:absolute; left:1063px; top:618px; width:37px; height:53px; background:url(images/bottomright.jpg) no-repeat !important; } #bottominfo { position:absolute; left:27px; top:651px; width:1036px; height:20px; background:url(images/bottominfo.jpg) no-repeat !important; } #bottom { position:absolute; left:0px; top:671px; width:1100px; height:29px; background:url(images/bottom.jpg) no-repeat !important; } --> </style> </head> <div id="wrap"> <div id="content"> <div id="top1"></div> <div id="top2"></div> <div id="top3"></div> <div id="leftside1"></div> <div id="menu"></div> <div id="rightside1"></div> <div id="middiv"></div> <div id="midbox1"></div> <div id="midboxdiv"></div> <div id="midbox2"></div> <div id="middiv2"></div> <div id="bigbox"></div> <div id="bottomleft"></div> <div id="buttomdiv"></div> <div id="bottomright"></div> <div id="bottominfo"></div> <div id="bottom"></div> </div> </div> </body> </html> Code (markup): I am wanting "bigbox" to stretch for the content thats inside of it. most of the boxes besides "menu" "bottom info", "midbox1" and "midbox2" ar ejus tbackground images in the divs. Does anyone know of a way to get this to work? or am i being way too complicated about it?s and fluid parts
You cant have stretching absolute containers, well you can but they wont be clearing anything outside of em so they will only overlap ousite its parents and what ever else is under. Start from scratch without absolutes .
how would i go about that? I tried with all other types of positioning, but they never made the boxes appear in the right locations.
If you want the column 'fixed', use the unit px or em. If you want the column elastic (fluid), use % unit.