Hallo zusammen,
ich habe ein Problem mit CSS. Blicke noch nicht ganz durch die Technik durch(bin ja auch nur PHP Programmierer). Ich habe mir ein Layoutdesign überlegt, aber an der Umsetzung hapert es noch ein bisschen. Das Ergebnis sieht so aus Bild. Das Problem ist es, dass die boxen "right" und "left" sich der Größe des "container2" anpassen soll, der wiederum an der Größe des Inhaltes skalieren soll. Container als Übersicht hier.Habe zur Veranschaulichung in diesem Fall Statische Pixelangaben gemacht.
CSS Code
HTML Code
Ich hoffe jemand kann mir helfen. Über eine Alternative mit gleichem Aussehen aber anderer Aufteilung der Boxen Container würde ich mich auch freuen
Danke im Voraus
xkl
ich habe ein Problem mit CSS. Blicke noch nicht ganz durch die Technik durch(bin ja auch nur PHP Programmierer). Ich habe mir ein Layoutdesign überlegt, aber an der Umsetzung hapert es noch ein bisschen. Das Ergebnis sieht so aus Bild. Das Problem ist es, dass die boxen "right" und "left" sich der Größe des "container2" anpassen soll, der wiederum an der Größe des Inhaltes skalieren soll. Container als Übersicht hier.Habe zur Veranschaulichung in diesem Fall Statische Pixelangaben gemacht.
CSS Code
PHP:
html,body{
background:#999999;
font-family:Arial, sans-serif;
text-align:center;
font-size:10pt;
height:90%;
padding:0px;
margin:0px;
}
.container {
width:862px;
background:#999999;
margin:auto;
border:1px solid #000000;
}
.left {
border:1px solid #555555;
width:28px;
height:300px;
background-image:url(./bilder/sh_left.gif);
background-repeat:repeat-y;
float:left;
}
.container2 {
width:800px;
border-left:solid 1px black;
border-right:solid 1px black;
text-align:left;
float:left;
background:blue;
}
.right {
border:1px solid #555555;
background:#999999;
height:300px;
width:28px;
background-image:url(./bilder/sh_right.gif);
background-repeat:repeat-y;
float:right;
}
.header {
width:800px;
height:100px;
}
.navigation {
font-size:12pt;
width:800px;
height:20px;
border-top:1px solid #555555;
border-bottom:1px solid #555555;
}
.tableback {
background: url(./bilder/cutter3.gif) repeat-x;
}
.extra {
width:160px;
height:90px;
background:#FFFFFF;
border:1px solid #555555;
float:right;
margin:5px;
padding-top:20px;
background-image:url(./bilder/cutter3.gif);
background-repeat:repeat-x;
text-align:left;
}
.extra2 {
width:155px;
background:#FFFFFF;
border:1px solid #555555;
float:right;
margin:5px;
padding-top:0px;
padding-left:5px;
padding-bottom:10px;
background-image:url(./bilder/cutter3.gif);
background-repeat:repeat-x;
text-align:left;
}
.content {
width:600px;
border:1px solid #555555;
float:left;
margin:5px;
padding-top:25px;
padding-left:5px;
padding-right:5px;
padding-bottom:10px;
background:#FFFFFF;
background-image:url(./bilder/cutter3.gif);
background-repeat:repeat-x;
}
.footer {
width:790px;
height:20px;
clear:both;
padding:0px;
text-align:right;
}
.top {
border:1px solid #555555;
width:862px;
height:30px;
padding:0px;
background:#999999;
background-image:url(./bilder/sh_top.gif);
background-repeat:repeat-x;
}
.bot {
border:1px solid #555555;
width:862px;
height:30px;
clear:both;
padding:0px;
background:#999999;
background-image:url(./bilder/sh_bot.gif);
background-repeat:repeat-x;
}HTML Code
PHP:
<div class="container">
<div class="top">top</div>
<div class="left">left</div>
<div class="container2">
<div class="header">Header</div>
<div class="navigation">Navigation</div>
<div class="content">Content<br><br><br><br><br></div>
<div class="extra">Extra</div>
<div class="extra2">Extra2</div>
<div class="footer">Footer</div>
</div>
<div class="right">right</div>
<div class="bot">bot</div>
</div>Ich hoffe jemand kann mir helfen. Über eine Alternative mit gleichem Aussehen aber anderer Aufteilung der Boxen Container würde ich mich auch freuen
Danke im Voraus
xkl
