CSS-Divs variable Höhe, find keine Lösung
0 0 1 
Peter Müller
CSS-Divs variable Höhe, find keine Lösung
Hallo,
ich mach zum ersten mal ein Layout rein auf basis von DIVs und CSS. Eigentlich ne wunderbare Sache, nur hab ich ein Problem: Die Seite passt sich nicht der Textlänge an. Das ganze ist in einem DIV-Container und die Seite soll sich nach dem DIV-"Content" nach unten verlängern und natürlich auch nicht über den Footer laufen. Hat da jemand nen Tip, bin echt am verzweifeln und hab dazu nix hilfreiches gefunden!
Hier mein Code, zuerst die HTML:
<html>
<head>
<title>
Template für TYPO3
</title>
<link rel="stylesheet" type="text/css" href="css/ik-t3style.css" />
</head>
<body>
<div id="container">
<div id="headPicLinks">
<img src="b/head_links_neu.jpg" alt="">
</div>
<div id="headPicRechts">
<img src="b/head_rechts_neu.jpg" alt="">
</div>
<div id="logoBalken">
<div id="logoLink">
<a href="../../../index.php?id=2"><img src="b/trans_platzh.gif" border="0" height="42" width="120" alt=""></a>
</div>
<div id="topMenuL1">
</div>
</div>
<div id="leftMenuL2">
</div>
<div id="languageSwitch">
<span class="tx_01_menu"><img src="b/pfeil_grau.gif"> <a href="../../../index.php?id=2">English</a></span>
</div>
<div id="leftMenuBasisinfo">
</div>
<div id="content">
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
<p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
</div>
<div id="imageMenuNext">
</div>
<div id="imageMenuPrev">
</div>
<div id="rechterSchatten">
</div>
<div id="weCare">FOOTERTEXT
</div>
<div id="footerSchatten">
</div>
</div>
</body>
</html>
Und hier die CSS:
html, body {
padding: 0;
margin:0px auto;
border: 0;
background: #E0DCD1;
font-family: Helvetica, Arial, SunSans-Regular, sans-serif;
font-size: 10px;
height: 100%;
width: 100%;
}
p {
margin: 10px 0px 0px 0px;
}
#container {
position: absolute;
height: 97%;
width: 600px;
top: 15px;
left: 50%;
margin-left: -300px;
text-align: left;
background-color: #B4CDF2;
background-image: url(../b/bg_container.jpg);
background-repeat: repeat-x;
}
* html #container {
height: 97%;
width: 600px;
border-top: 0px solid #FFFFFF;
border-bottom: 0px solid #FFFFFF;
}
#rechterSchatten {
position: absolute;
height: 100%;
width: 10px;
top: 0px;
left: 600px;
background-color: #E0DCD1;
background-image: url(../b/bg_schatten.jpg);
background-repeat: repeat-y;
}
#headPicLinks {
position: absolute;
left: 0px;
height: 164px;
width: 305px;
padding: 0;
}
#headPicRechts {
position: absolute;
right: 0px;
height: 164px;
width: 295px;
}
#logoBalken {
position: absolute;
top: 164px;
height: 100px;
width: 600px;
background-image: url(../b/logobalken.jpg);
}
#logoLink {
position: absolute;
left: 25px;
height: 35px;
width: 120px;
}
#topMenuL1 {
position: absolute;
left: 200px;
top: 28px;
height: 25px;
width: 350px;
text-align: left;
}
#leftMenuL2 {
position: absolute;
left: 35px;
top: 255px;
height: 250px;
width: 150px;
text-align: left;
}
#languageSwitch {
position: absolute;
left: 35px;
top: 535px;
height: 30px;
width: 150px;
text-align: left;
}
#leftMenuBasisinfo {
position: absolute;
left: 35px;
top: 580px;
height: 100px;
width: 150px;
text-align: left;
}
#content {
position: absolute;
left: 200px;
top: 255px;
width: 335px;
text-align: left;
color: black;
font-size: 8pt;
font-family: Helvetica, Arial, SunSans-Regular, sans-serif;
line-height: 10pt;
text-decoration: none;
}
#content h1 {
font-size: 10pt;
font-weight: bold;
}
#content a:link {
color: #0569b6;
}
#content a:hover {
color: #5a5a5a;
}
#content a:visited {
color: #0569b6;
}
#content a:active {
color: #0569b6;
}
#imageMenuNext {
position: absolute;
right: 10px;
top: 535px;
height: 37px;
width: 34px;
}
#imageMenuPrev {
position: absolute;
right: 10px;
top: 572px;
height: 36px;
width: 34px;
}
#weCare {
position: absolute;
bottom: 30px;
width: 610px;
font-family: "Times New Roman", Times, serif;
font-size: 43px;
text-align: center;
color: #ffffff;
}
#footerSchatten {
position: absolute;
bottom: -1px;
height: 10px;
width: 610px;
background-color: #E0DCD1;
background-image: url(../b/footer_neu.jpg);
background-repeat: no-repeat;
}
-
Hi,
ich mach zum ersten mal ein Layout rein auf basis von DIVs und CSS.
das sieht man leider.
Lasse die absoluten Positionierungen sowie Höhenangaben (wo sie nicht gebraucht werden) weg und alles kann flexibel bleiben.freundliche Grüße
Ingo -
Hallo harp,
wenn Du Block-Elemente mit position: absolute positionierst nimmst Du sie aus den Textfluss.
Wie sollen sich dann noch die anderen Elemente daran anpassen können?
Habe jetzt Dein Code nicht wirklich gelesen, beschäftige Dich doch mal mit float, und wie Du das an geeigneter Stelle wieder aufhebst.
Liebe Grüße,
Bernd
PS: Außerdem muss nicht jedes Element auf das Du einfluss nimmst von einem DIV umgeben sein
-
Hat da jemand nen Tip, bin echt am verzweifeln und
hab dazu nix hilfreiches gefunden!Um ein bisschen Grundlagen-Lektüre kommst du nicht herum. Versuche doch mal den folgenden Artikel. Danach wirst du absolute Positionierung nicht mehr so benutzen wie du es bis jetzt gemacht hast, was Ingo und berdn ja auch schon angesprochen hatten:
CSS: Der Flow und die Positionierung (bei akademie.de)
Falls dir der Artikel nicht weiterhilft, fange bei den Grundlagen an. und surfe zu folgender Seite:
CHIP Sonderheft Homepage: Die perfekte Website (bei infotekten.de)
Downloade die ersten drei PDFs in dem Beitrag:
1. Grundlagen: So funktioniert HTML (2 Seiten)
2. Know-how: Die wichtigsten HTML-Elemente (4 Seiten)
3. Seiten bauen mit Cascading Style Sheets (5 Seiten)Fange mit dem ersten Artikel an, auch wenn du schon HTML kannst. Die Artikel bauen aufeinander auf. Das kannst du an einem Tag schaffen und danach sollten dir die Prinzipien von HTML und CSS klar sein. Auch schon ein bisschen Float ...
-
Hallo an alle Drei,
vielen Dank für die Hilfe. Habs jetzt kapiert :)
Im nachhinein gesehn war das totaler Schmarrn was ich da gemacht hab und ich bin mit einem position:absolute ausgekommen.
VIELEN DANK!!
Schöne Grüße
Harp
-