Forum Moderators: not2easy
I have a site that currently uses a 4 box layout (header, sides, middle etc).
I wish to convert this so that all these elements are inside a container box.
HOWEVER, i have literally hundres of files to modify so I'm trying to do it with a "find and replace" kind of approach in dreaweaver.
When I add a div box to constrain my current code, it behaves badly in IE, I think I'm having probs with releative / absolute positions.
Can anyone help?
my layout styles:
body {
margin: 0px;
padding: 0px;
background : #ffffff;
font-family : Verdana, Lucida, sans-serif;
text-align: left;
font-size: 10px;
}
/*LAYOUT CONTROL*/
#top {
margin: 20px 20px 0px 20px;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
z-index: 4;
}
html>body #top {
height: 70px; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 160px;
left: 0px;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
z-index: 1;
}
html>body #left {
width: 150px; /* ie5win fudge ends */
}
#middle {
/* comment position while editing in DW 8 */
/*position: relative; */
padding: 10px;
margin-top: 20px;
margin-right: 190px;
margin-bottom: 20px;
margin-left: 190px;
z-index: 2;
}
* html #middle{
\width: 510px; /* for IE 5.x */
w\idth: 100%; /* for IE 6 */
}
#right {
/*position: absolute;*/
top: 135px;
right: 0px;
width: 155px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
z-index: 3;
}
html>body #right {
width: 155px; /* ie5win fudge ends */
}
html order:
top, the left, middle and right in that order in the page's html.
thanks for your advice in advance! :-)
HOWEVER, i have literally hundres of files to modify so I'm trying to do it with a "find and replace"
If I get you right you should be able to put a wrapper div into all your HTML files without adding any CSS as a first move. Search for <body> and replace with <body><div id="wrapper">
then search for </body> and replace with </div></body>
without adding any CSS to that wrapper it should not affect anything according the code you have above.
next the CSS above is a bit confusing I can't work out what you are trying to achieve as the IE/Win fudge is not always being used and the time it is (for the #top) div I can't see why..
anyway once the positioning is right the only thing you should have to add to the wrapper is a width, a method of centering if required and position:relative; (this should make the existing positioning relative to the wrapper instead of the body (constrain the layout).
Can you not remove remove the width off the middle div, the margins should take care of it's width even in IE5?
I could've picked your intentions wrongly so please feel free to ask more questions.
Suzy
