ranga227
06-30-2009, 02:06 PM
Hello peoples,
I've made this design (image below). Like you see here, I didn't succeed with centering area B + C (navig. + other content). What you see at that url is the image of the margin-left. It doesn't move out of the screen (like in my design-image it moves out of the purple dazed line). And the margin-right isn't visible. So, what do I have to change?
Note: The purple dazed line is what you'll see at resolution 1280x960. Everything outside that purple dazed line, is for the even higher resolutions.
The backgroundimages won't repeat. Each one is one big background-image.
The website will be my portfolio-site. It'll show my graphic print-designs.
Allready thanks for the answers.
<body>
<div id="margin_left">
<div id="wrapper">
<div id="nav">nav</div>
<div id="content"></div>
</div>
<div id="margin_left"></div>
</div>
</body>
body {
width: 1920px;
height: 1200px;
padding: 0;
}
#wrapper {
width: 1000px;
margin-top: 0px;
}
#margin_left {
background-image: url('images/margin_left.gif');
width: 460px;
height: 1200px;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
margin: 0px;
float: left;
}
#margin_right {
background-image: url('images/margin_right.gif');
width: 460px;
height: 1200px;
margin: 0;
position: absolute;
left: 1460px;
float: right;
}
I've made this design (image below). Like you see here, I didn't succeed with centering area B + C (navig. + other content). What you see at that url is the image of the margin-left. It doesn't move out of the screen (like in my design-image it moves out of the purple dazed line). And the margin-right isn't visible. So, what do I have to change?
Note: The purple dazed line is what you'll see at resolution 1280x960. Everything outside that purple dazed line, is for the even higher resolutions.
The backgroundimages won't repeat. Each one is one big background-image.
The website will be my portfolio-site. It'll show my graphic print-designs.
Allready thanks for the answers.
<body>
<div id="margin_left">
<div id="wrapper">
<div id="nav">nav</div>
<div id="content"></div>
</div>
<div id="margin_left"></div>
</div>
</body>
body {
width: 1920px;
height: 1200px;
padding: 0;
}
#wrapper {
width: 1000px;
margin-top: 0px;
}
#margin_left {
background-image: url('images/margin_left.gif');
width: 460px;
height: 1200px;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
margin: 0px;
float: left;
}
#margin_right {
background-image: url('images/margin_right.gif');
width: 460px;
height: 1200px;
margin: 0;
position: absolute;
left: 1460px;
float: right;
}