Hi,
ich hoffe ich bin hier richtig....
Ich zerschlag mir seit 2 Wochen den Kopf an folgendem Problem:
Ich erstelle eine Homepage mit Divs und CSS. Weiterhin benutze ich Typo3 um die Inhalte einzubinden.
Hier ist der Grundaufbau der Seite:
http://www.pferdefreunde-grenderich.de/for/01.jpg
Die Platzhalter werden durch Typo3 mit Inhalt gefüllt. Das Ganze sieht dann so z.B. so aus:
Pferdefreunde Grenderich e.V.: Vereinsphilosophie
Un jetzt zu dem Problem. Ich möchte, dass nur der Inhalt der jeweils in die Seite bei dem Platzhalter Content_normal eingesetzt wird, scrollbar ist.
Das heißt, das sich das Content-Div variabel sein muss, der Rest (Logo oben, Menü oben, Menü unten sowie der Footer) müssten fest sein. Das feste ist auch nicht mein Problem, sondern der Content. Im Moment habe ich die Höhe des Contents mit 70% angegeben. Dies ist aber nur eine Notlösung, da je nach Bildschrimauflösung nicht alles zu sehn ist (trotz Scrollbar an der Seite). Ich habe dann versucht, dass der Content durch Angaben von "Top" und "Bottom", sowie Höhe auf "auto" sich automatisch an die Höhe des Browserfensters anpasst. Dies funktioniert auch wunderbar im Firefox, jedoch nicht im Internet Explorer. Dort wird bei "Height:auto;" kein Inhalt mehr angezeigt.
Ich habe schon jegliches ausprobiert und bin mit meinem Latein am Ende.... Auch Google konnte mir nicht weiterhelfen.
Hier der CSS-Code von dem Grundaufbau:
Code:
#komplett {
width:900px;
height:100%;
overflow: hidden;
text-align:left;
position: relative;
background-color: #fbf3e6;
margin: auto;
left: 0px;
}
#header {
position:absolute;
top:0px;
left:0px;
width:900px;
height:139px;
overflow: hidden;
right: 0px;
}
#logo1 {
position:absolute;
left:0px;
width:900px;
height:113px;
background-image: url(fileadmin/images/backgrounds/back1.jpg);
}
#menu_top {
position:absolute;
bottom:0px;
height:26px;
left: 0px;
width: 900px;
top: 113px;
overflow: hidden;
}
#menu_left {
position:absolute;
top:139px;
left:0px;
width:140px;
height:auto;
overflow: hidden;
bottom: 47px;
}
#content_normal {
position:absolute;
left:140px;
width:760px;
height: 70%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-align: justify;
bottom: 47px;
top: 139px;
overflow: auto;
padding: 0px;
}
Hier der CSS-Code von dem Inhalt (Platzhalter: content_normal)
Code:
#rahmen {
width:759px;
height:100%;
overflow: auto;
left: 1px;
top: 0px;
position: absolute;
}
#left {
width:85px;
height:500px;
overflow: hidden;
left: 0px;
top: 0px;
position: absolute;
vertical-align: top;
}
#main {
width:590px;
height:inherit;
overflow: hidden;
left: 85px;
top: 0px;
position: absolute;
padding-top: 45px;
text-align: justify;
}
#right {
width:119px;
height:500px;
overflow: hidden;
left: 675px;
top: 0px;
position: absolute;
vertical-align: top;
}
#ueberschrift {
width:20px;
height:20px;
overflow: hidden;
left: 140px;
top: 30px;
position: absolute;
vertical-align: top;
line-height: 1px;
}
.Textgross {
font-size: 18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Textnorm {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
white-space: normal;
}
.Textklein {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Hier die beiden HTML-Dateien dazu.
Grundseite:
http://www.pferdefreunde-grenderich.de/for/index.htm
Inhalt:
Content
Ich hoffe jemand von euch kann mir helfen. Da ich mich in Java nicht auskenne, wäre mir eine CSS-basierende-Lösung am liebsten.
Ich möchte allerings auf keine Fall wieder auf Frames zurückgreifen müssen......
thx
fish-emci
