...

View Full Version : how expand sides automatically



OGGordon
11-04-2009, 09:02 AM
Hey guys and gals,

I've created a new layout and I'd like the sides of the layout to expand automatically. The with of the content should cover 80% of the browser area and the sides then expand automatically (20%). How can I do that? Do I create three separate divs, 2 for the sides, 1 for the content?

Excavator
11-04-2009, 09:05 AM
Hello OGGordon,
A centered 80% wide container with an appropriate background image applied to the body should work fine. You could even nest divs for different background images if you want the left/right sides to be different.

abduraooft
11-04-2009, 09:09 AM
You could modify http://bonrouge.com/3c-hf-fluid.php to set a % based width on the sidebars

OGGordon
11-04-2009, 09:42 AM
You could modify http://bonrouge.com/3c-hf-fluid.php to set a % based width on the sidebars

As far as I understand, this part is part of the CSS file or?


html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background:#ffffff url(bg.gif) top right repeat-y;
font-family:arial, serif;
}
#wrap {
position:relative;
background:url(bg.gif) top left repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

So I could create another file, name it style.css and in the other file, i.e. index.php I add "<link rel="stylesheet" type="text/css" href="style.css">" ?

abduraooft
11-04-2009, 09:49 AM
So I could create another file, name it style.css and in the other file, i.e. index.php I add "<link rel="stylesheet" type="text/css" href="style.css">" ?Yes, of course.

OGGordon
11-04-2009, 10:09 AM
Okay so I have done all steps that were shown on the posted website and I still don't get it right. I know it must be something easy but I just can't figure it out:

THis is how it looks:

http://derderder.cwsurf.de/

here is the index.php file:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="left">Left</div>
<div id="main">
<div id="right">Right</div>
<div id="content">Main Content</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</head>
</html>


And here is the style.css file:


html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background:#ffffff url(bg.gif) top right repeat-y;
font-family:arial, serif;
}
#wrap {
position:relative;
background:url(bg.gif) top left repeat-y;
min-height:100%;
}
#inner-wrap {
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
position:absolute;
bottom:0;
height:80px;
background-color: #333333;
width:100%;
color:#FF00FF;
text-align:center;
}
#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
}
#right {
float:right;
width:200px;
text-align:center;
}
#content {
padding:5px;
margin-right:200px;
text-align:left;
}
* html #wrap {height:100%}

I'm such a noob. I have no idea what I did wrong...

abduraooft
11-04-2009, 10:24 AM
Save http://bonrouge.com/bg.gif into your root folder.

OGGordon
11-04-2009, 12:11 PM
Save http://bonrouge.com/bg.gif into your root folder.

OKay, so I uploaded that, however the header is missing?

OGGordon
11-04-2009, 02:23 PM
after experimenting i realized the header part in the css file was missing. I added it

#header {
height:80px;
background-color: #333333;
width:100%;color:#FF00FF;
text-align:center;
}

works :D

thank you for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum