raybrackho
Mitglied
Hallo alle zusammen,
ich weiß dass das schon hundert mal durchgekaut wurde in diesem Forum, aber keine der Antworten hat in meinem speziellen Fall zu einer Lösung geführt.
Ich habe ein Seiten-Layout, dieses wurde mit Photoshop gesliced und nun mit CSS zusammengebaut. Eigentlich funktioniert auch alles soweit ganz gut. Nun habe ich mir aber überlegt, wäre es schön, wenn sich die Seite je nach Länge des Inhalts vergrößert (in der Höhe) oder verkleinert.
Dazu habe ich den Text in einem DIV mit der id="bg-mitte_" geladen. Dieses vergrößert sich auch wie gewünscht und sogar mein "footer" klebt perfekt am unteren Rand.
Das einzige Problem was mich nun quält sind die Grafiken an der Seite, die den Inhalt "umrahmen". Diese sollen je nach Länge des Inhalts (bzw. des "bg-mitte_" divs) skaliert werden und ich habe keine ahnung wie ich das anstellen soll.
Meine Seite ist aufgeteilt in header.php, footer.php und den jeweiligen "inhalt.php", in dem alles per include zusammengefügt wird. CSS ist ausgelagert in die Datei "style.css" mit folgendem Inhalt:
body {
font-size:11px;
margin: 0 auto;
padding:0;
height: 100%;
}
#Layout {
top:0px;
position:relative;
margin-left:auto;
margin-right:auto;
width:800px;
height:900px;
margin:0 auto;
text-align:left;
margin-top: 0px;
padding-top: 0px;
min-height: 100%;
height:auto !important;
height:100%;
}
#oben-links_ {
position:absolute;
left:0px;
top:0px;
width:84px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#oben-mitte_ {
position:absolute;
left:84px;
top:0px;
width:179px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#oben-mitte2_ {
position:absolute;
left:553px;
top:0px;
width:95px;
height:170px;
margin-top: 0px;
}
#logo_ {
position:absolute;
left:263px;
top:0px;
width:293px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#oben-rechts_ {
position:absolute;
left:648px;
top:0px;
width:170px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#menu-links_ {
position:absolute;
left:0px;
top:172px;
width:65px;
height:41px;
}
#menu-mitte_ {
background-color:#FAFAFA;
position:absolute;
left:65px;
top:172px;
width:687px;
height:40px;
text-align:center;
padding-top: 1px;
}
#menu-rechts_ {
position:absolute;
left:752px;
top:172px;
width:66px;
height:41px;
}
#menu-links-streifen-oben_ {
position:absolute;
left:0px;
top:170px;
width:65px;
height:100%;
}
#menu-mitte-streifen-oben_ {
position:absolute;
left:65px;
top:170px;
width:687px;
height:100%;
}
#menu-rechts-streifen-oben_ {
position:absolute;
left:752px;
top:170px;
width:66px;
height:100%;
}
#menu-links-streifen-unten_ {
position:absolute;
left:0px;
top:213px;
width:65px;
height:100%;
}
#menu-mitte-streifen-unten_ {
position:absolute;
left:65px;
top:213px;
width:687px;
height:100%;
}
#menu-rechts-streifen-unten_ {
position:absolute;
left:752px;
top:213px;
width:66px;
height:100%;
}
#BACKGROUND_{
background-color:#FF0000;
position:absolute;
left:0px;
top:215px;
width: 818px;
text-align: left;
}
#bg-links_ {
position:relative;
left:0px;
top:-42px;
width:65px;
float: left;
height: auto;
}
#bg-mitte_ {
position:absolute;
background-color:#00FF00;
left:65px;
width:687px;
}
#bg-rechts_ {
position:relative;
left:0px;
top:-42px;
width:66px;
float: right;
height: auto;
}
#footer_{
background-color:#0000FF;
position:relative;
left:-65px;
width: 818px;
text-align: left;
top: -11px;
margin-left: 0px;
padding-left: 0px;
}
#unten-links_ {
position:absolute;
left:0px;
top:0px;
width:84px;
height:70px;
}
#unten-mitte_ {
position:absolute;
left:84px;
top:0px;
width:673px;
height:70px;
}
#unten-rechts_ {
position:absolute;
left:752px;
top:0px;
width:66px;
height:70px;
}
meine header.php und footer.php sieht dann in etwa wie folgt aus:
----header.php----------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml4/loose.dtd">
<head>
<title>Beispiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Layout">
<div id="oben-links_">
<img id="oben_links" src="Bilder/oben_links.png" width="84" height="170" alt=""/></div>
<div id="oben-mitte_">
<img id="oben_mitte" src="Bilder/oben_mitte.png" width="179" height="170" alt=""/></div>
<div id="oben-mitte2_">
<img id="oben_mitte2" src="Bilder/oben_mitte.png" width="95" height="170" alt=""/></div>
<div id="logo_">
<img id="logo" src="Bilder/logo.png" width="293" height="170" alt=""/> </div>
<div id="oben-rechts_">
<img id="oben_rechts" src="Bilder/oben_rechts.png" width="170" height="170" alt=""/></div>
<div id="menu-links-streifen-oben_" style="height:2px">
<img id="menu_links_streifen_oben" src="Bilder/menu_links_streifen_oben.png" width="65" height="2px" alt=""/></div>
<div id="menu-mitte-streifen-oben_" style="height:2px">
<img id="menu_mitte_streifen_oben" src="Bilder/menu_mitte_streifen_oben.png" width="687" height="2px" alt=""/></div>
<div id="menu-rechts-streifen-oben_" style="height:2px">
<img id="menu_rechts_streifen_oben" src="Bilder/menu_rechts_streifen_oben.png" width="66" height="2px" alt=""/></div>
<div id="menu-links-streifen-unten_"style="height:2px">
<img id="menu_links_streifen_unten" src="Bilder/menu_links_streifen_oben.png" width="65" height="2px" alt=""/></div>
<div id="menu-mitte-streifen-unten_" style="height:2px">
<img id="menu_mitte_streifen_unten" src="Bilder/menu_mitte_streifen_oben.png" width="687" height="2px" alt=""/></div>
<div id="menu-rechts-streifen-unten_" style="height:2px">
<img id="menu_rechts_streifen_unten" src="Bilder/menu_rechts_streifen_oben.png" width="66" height="2px" alt=""/></div>
<div id="menu-links_">
<img id="menu_links" src="Bilder/menu_links.png" width="65" height="41" alt=""/></div>
<div id="menu-mitte_">
</div>
<div id="menu-rechts_">
<img id="menu_rechts" src="Bilder/menu_rechts.png" width="66" height="41" alt=""/></div>
<div id="BACKGROUND_">
<div id="bg-mitte_">
------------------------
----footer.php----------
<div id="footer_">
<div id="unten-links_">
<img id="unten_links" src="Bilder/unten_links.png" width="84" height="70" alt=""/></div>
<div id="unten-mitte_">
<img id="unten_mitte" src="Bilder/unten_mitte.png" width="668" height="70" alt=""/></div>
<div id="unten-rechts_">
<img id="unten_rechts" src="Bilder/unten_rechts.png" width="66" height="70" alt=""/></div>
<div id="bg-links_">
<img id="bg_links" src="Bilder/bg_links.png" width="65" height="100%" alt=""/></div>
<div id="bg-rechts_">
<img id="bg_rechts" src="Bilder/bg_rechts.png" width="66" height="100%" alt=""/></div>
</div>
</div>
</div>
</div>
</body>
</html>
-------------------------
und zusammengefügt wird das ganze in einer inhalt.php:
<?php
include "./header.php";?>
<div id="diverses">
<h1> Hauptinhalt </h1>
</div>
<?php include "./footer.php";
?>
Also nochmal die Frage, wie kann ich die Seitengrafiken (siehe angehängtes Bild) automatisch so skalieren, dass sie nahtlos oben an das Menu und unten an den footer anschliessen?
Vielen Dank schonmal
Moritz
ich weiß dass das schon hundert mal durchgekaut wurde in diesem Forum, aber keine der Antworten hat in meinem speziellen Fall zu einer Lösung geführt.
Ich habe ein Seiten-Layout, dieses wurde mit Photoshop gesliced und nun mit CSS zusammengebaut. Eigentlich funktioniert auch alles soweit ganz gut. Nun habe ich mir aber überlegt, wäre es schön, wenn sich die Seite je nach Länge des Inhalts vergrößert (in der Höhe) oder verkleinert.
Dazu habe ich den Text in einem DIV mit der id="bg-mitte_" geladen. Dieses vergrößert sich auch wie gewünscht und sogar mein "footer" klebt perfekt am unteren Rand.
Das einzige Problem was mich nun quält sind die Grafiken an der Seite, die den Inhalt "umrahmen". Diese sollen je nach Länge des Inhalts (bzw. des "bg-mitte_" divs) skaliert werden und ich habe keine ahnung wie ich das anstellen soll.
Meine Seite ist aufgeteilt in header.php, footer.php und den jeweiligen "inhalt.php", in dem alles per include zusammengefügt wird. CSS ist ausgelagert in die Datei "style.css" mit folgendem Inhalt:
body {
font-size:11px;
margin: 0 auto;
padding:0;
height: 100%;
}
#Layout {
top:0px;
position:relative;
margin-left:auto;
margin-right:auto;
width:800px;
height:900px;
margin:0 auto;
text-align:left;
margin-top: 0px;
padding-top: 0px;
min-height: 100%;
height:auto !important;
height:100%;
}
#oben-links_ {
position:absolute;
left:0px;
top:0px;
width:84px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#oben-mitte_ {
position:absolute;
left:84px;
top:0px;
width:179px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#oben-mitte2_ {
position:absolute;
left:553px;
top:0px;
width:95px;
height:170px;
margin-top: 0px;
}
#logo_ {
position:absolute;
left:263px;
top:0px;
width:293px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#oben-rechts_ {
position:absolute;
left:648px;
top:0px;
width:170px;
height:170px;
margin-top: 0px;
padding-top: 0px;
}
#menu-links_ {
position:absolute;
left:0px;
top:172px;
width:65px;
height:41px;
}
#menu-mitte_ {
background-color:#FAFAFA;
position:absolute;
left:65px;
top:172px;
width:687px;
height:40px;
text-align:center;
padding-top: 1px;
}
#menu-rechts_ {
position:absolute;
left:752px;
top:172px;
width:66px;
height:41px;
}
#menu-links-streifen-oben_ {
position:absolute;
left:0px;
top:170px;
width:65px;
height:100%;
}
#menu-mitte-streifen-oben_ {
position:absolute;
left:65px;
top:170px;
width:687px;
height:100%;
}
#menu-rechts-streifen-oben_ {
position:absolute;
left:752px;
top:170px;
width:66px;
height:100%;
}
#menu-links-streifen-unten_ {
position:absolute;
left:0px;
top:213px;
width:65px;
height:100%;
}
#menu-mitte-streifen-unten_ {
position:absolute;
left:65px;
top:213px;
width:687px;
height:100%;
}
#menu-rechts-streifen-unten_ {
position:absolute;
left:752px;
top:213px;
width:66px;
height:100%;
}
#BACKGROUND_{
background-color:#FF0000;
position:absolute;
left:0px;
top:215px;
width: 818px;
text-align: left;
}
#bg-links_ {
position:relative;
left:0px;
top:-42px;
width:65px;
float: left;
height: auto;
}
#bg-mitte_ {
position:absolute;
background-color:#00FF00;
left:65px;
width:687px;
}
#bg-rechts_ {
position:relative;
left:0px;
top:-42px;
width:66px;
float: right;
height: auto;
}
#footer_{
background-color:#0000FF;
position:relative;
left:-65px;
width: 818px;
text-align: left;
top: -11px;
margin-left: 0px;
padding-left: 0px;
}
#unten-links_ {
position:absolute;
left:0px;
top:0px;
width:84px;
height:70px;
}
#unten-mitte_ {
position:absolute;
left:84px;
top:0px;
width:673px;
height:70px;
}
#unten-rechts_ {
position:absolute;
left:752px;
top:0px;
width:66px;
height:70px;
}
meine header.php und footer.php sieht dann in etwa wie folgt aus:
----header.php----------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml4/loose.dtd">
<head>
<title>Beispiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Layout">
<div id="oben-links_">
<img id="oben_links" src="Bilder/oben_links.png" width="84" height="170" alt=""/></div>
<div id="oben-mitte_">
<img id="oben_mitte" src="Bilder/oben_mitte.png" width="179" height="170" alt=""/></div>
<div id="oben-mitte2_">
<img id="oben_mitte2" src="Bilder/oben_mitte.png" width="95" height="170" alt=""/></div>
<div id="logo_">
<img id="logo" src="Bilder/logo.png" width="293" height="170" alt=""/> </div>
<div id="oben-rechts_">
<img id="oben_rechts" src="Bilder/oben_rechts.png" width="170" height="170" alt=""/></div>
<div id="menu-links-streifen-oben_" style="height:2px">
<img id="menu_links_streifen_oben" src="Bilder/menu_links_streifen_oben.png" width="65" height="2px" alt=""/></div>
<div id="menu-mitte-streifen-oben_" style="height:2px">
<img id="menu_mitte_streifen_oben" src="Bilder/menu_mitte_streifen_oben.png" width="687" height="2px" alt=""/></div>
<div id="menu-rechts-streifen-oben_" style="height:2px">
<img id="menu_rechts_streifen_oben" src="Bilder/menu_rechts_streifen_oben.png" width="66" height="2px" alt=""/></div>
<div id="menu-links-streifen-unten_"style="height:2px">
<img id="menu_links_streifen_unten" src="Bilder/menu_links_streifen_oben.png" width="65" height="2px" alt=""/></div>
<div id="menu-mitte-streifen-unten_" style="height:2px">
<img id="menu_mitte_streifen_unten" src="Bilder/menu_mitte_streifen_oben.png" width="687" height="2px" alt=""/></div>
<div id="menu-rechts-streifen-unten_" style="height:2px">
<img id="menu_rechts_streifen_unten" src="Bilder/menu_rechts_streifen_oben.png" width="66" height="2px" alt=""/></div>
<div id="menu-links_">
<img id="menu_links" src="Bilder/menu_links.png" width="65" height="41" alt=""/></div>
<div id="menu-mitte_">
</div>
<div id="menu-rechts_">
<img id="menu_rechts" src="Bilder/menu_rechts.png" width="66" height="41" alt=""/></div>
<div id="BACKGROUND_">
<div id="bg-mitte_">
------------------------
----footer.php----------
<div id="footer_">
<div id="unten-links_">
<img id="unten_links" src="Bilder/unten_links.png" width="84" height="70" alt=""/></div>
<div id="unten-mitte_">
<img id="unten_mitte" src="Bilder/unten_mitte.png" width="668" height="70" alt=""/></div>
<div id="unten-rechts_">
<img id="unten_rechts" src="Bilder/unten_rechts.png" width="66" height="70" alt=""/></div>
<div id="bg-links_">
<img id="bg_links" src="Bilder/bg_links.png" width="65" height="100%" alt=""/></div>
<div id="bg-rechts_">
<img id="bg_rechts" src="Bilder/bg_rechts.png" width="66" height="100%" alt=""/></div>
</div>
</div>
</div>
</div>
</body>
</html>
-------------------------
und zusammengefügt wird das ganze in einer inhalt.php:
<?php
include "./header.php";?>
<div id="diverses">
<h1> Hauptinhalt </h1>
</div>
<?php include "./footer.php";
?>
Also nochmal die Frage, wie kann ich die Seitengrafiken (siehe angehängtes Bild) automatisch so skalieren, dass sie nahtlos oben an das Menu und unten an den footer anschliessen?
Vielen Dank schonmal
Moritz
