Ich komme einfach nicht klar damit. Mit tables kann ich dass in 5 Sekunden, mit CSS scheint es ein Ding der Unmöglichkeit zu sein.
Ich möchte nur dass die drei Spalten immer gleich lang sind (min 600px), wenn aber die main spalte 900px lang ist, sollen die beiden äusseren auch 900px lang sein.
Uploaded with ImageShack.us
Ich habe es auch schon mit CSS Layout Generatoren versucht, aber die lösen das Problem irgendwie auch nicht. Ich kann mir nicht vorstellen dass es etwas grosse sein kann. Ich freue mich über eure Tipps!
Ich möchte nur dass die drei Spalten immer gleich lang sind (min 600px), wenn aber die main spalte 900px lang ist, sollen die beiden äusseren auch 900px lang sein.
Uploaded with ImageShack.us
Code:
<body>
<div id="body">
<div id="container">
<div id="header">
<jdoc:include type="modules" name="header" style="none" />
<!-- end #header --></div>
<div id="maincontainer">
<div id="leftbar">
<jdoc:include type="modules" name="left" style="none" />
<!-- end #leftbar --></div>
<div id="rightbar">
<jdoc:include type="modules" name="right" style="none" />
<!-- end #rightbar --></div>
<div id="maincontent">
<jdoc:include type="component" />
<!-- end #maincontent --></div>
<!-- end # maincontainer --></div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="none" />
<!-- end #footer --></div>
<!-- end #container --></div>
<!-- end #body --></div>
</body>
</html>
HTML:
body {
font-family: Helvetica, Verdana, Georgia, Arial, sans-serif;
font-size: 12px;
background-image:url(ia04_hp_bg_2.png);
margin: 0px;
padding: 0px;
color: #000000;
line-height: 120%;
}
h1 {
font-family: old English Text MT, Helvetica, Verdana, Arial;
font-size: 25px;
font-weight: 100;
}
#body {
text-align: center;
width: 100%;
height: 100%;
}
#container {
position:relative;
top: 30px;
min-width: 800px;
max-width: 1000px;
background: transparent;
margin: 0px auto;
border: 0px solid #000000;
text-align: left;
}
#header {
height: 100px;
background:url(../images/banner.gif);
padding: 0px 0px 0px 0px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#maincontainer {
min-height: 600px;
}
#leftbar {
position: absolute;
top: 100px;
left: 0px;
width: 170px;
background: #FFFFFF;
padding: 5px 5px 5px 5px;
text-align: center;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
}
#rightbar {
position: absolute;
top: 100px;
right: 0px;
width: 170px;
background: #CCCCCC;
padding: 5px 5px 5px 5px;
text-align: left;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
#maincontent {
background:#FFF;
top: 100px;
margin: 0px 180px;
padding: 5px 10px 5px 10px;
}
.text {
margin-bottom: -5px;
}
#footer {
padding: 0px 10px 0px 20px;
background: #DDDDDD;
line-height: 1.5;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}Ich habe es auch schon mit CSS Layout Generatoren versucht, aber die lösen das Problem irgendwie auch nicht. Ich kann mir nicht vorstellen dass es etwas grosse sein kann. Ich freue mich über eure Tipps!
