| Autor |
Nachricht |
createc-media
Threadersteller
Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 38
Geschlecht: 
|
Verfasst Di 09.10.2007 13:16
Titel CSS: mittleren Container vertikal strecken |
  |
|
Hallo zusammen,
ich beschäftige mich zum ersten Mal damit, ein Layout mit CSS anstatt Tabellen zu verwirklichen. Trotz suchen bin ich wohl zu doof dazu, den CSS-Code entsprechend meiner Vorstellungen zu verfassen, deshalb poste ich ihn hier und bitte um Hilfe:
| Code: |
<style type="text/css">
<!--
body {
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColFixCtrHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColFixCtrHdr #header {
background: #FFFFFF;
height: 300px;
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
.oneColFixCtrHdr #footer {
height: 80px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-image:url(images/footer.jpg);
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
-->
</style>
|
Der Bereich #mainContent soll sich seitenfüllend vertikal strecken. Also oben ist der #header, dann der variable #mainContent und darunter der #footer, der dann unten am Browserrand endet.
Versteht ihr was ich meine und kann mir jemand helfen? Vielen Dank im Voraus.
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 09.10.2007 13:58
Titel
|
|
|
Benutz mal die Suche: "Footer" sollte einige brauchbare Beispiele liefern.
Ansonsten vielleicht auch mal den ganzen Quelltext posten.
|
|
| |
 |
|
|
Anzeige
|
|
|
createc-media
Threadersteller
Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 38
Geschlecht:
|
Verfasst Di 09.10.2007 14:06
Titel
|
|
|
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body {
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColFixCtrHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColFixCtrHdr #header {
background: #FFFFFF;
height: 300px;
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
.oneColFixCtrHdr #footer {
height: 80px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">HEADER</div>
<div id="mainContent">
<p>Dieser Bereich soll sich immer strecken, sodass der Footer unten am Browserrand abschließt.</p>
</div>
<div id="footer"><br />
<p><strong>FOOTER</strong></p>
</div>
<!-- end #container --></div>
</body>
</html> |
So, dass ist der komplette Code. Parallel zu neuen Antworten suche ich nach dem vorgeschlagenen Begriff.
|
|
| |
|
|
createc-media
Threadersteller
Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 38
Geschlecht:
|
|
| |
|
|
Anti78
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht:
|
|
| |
|
|
createc-media
Threadersteller
Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 38
Geschlecht:
|
Verfasst Di 09.10.2007 18:46
Titel
|
|
|
Das hat mir schon etwas weiter geholfen. Nun sieht das ganze so aus:
http://www.createc-media.de/index3.html
Der Code dazu:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
html {
height: 100%;
}
body {
height: 100%;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColFixCtrHdr #container {
width: 780px;
height: 100%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColFixCtrHdr #header {
background: #FFFFFF;
height: 300px;
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
.oneColFixCtrHdr #footer {
height: 80px;
width: 780px;
bottom: -1px;
position: absolute;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-image:url(images/footer.jpg);
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">HEADER</div>
<div id="mainContent">
<p>Dieser Bereich soll sich immer strecken, sodass der Footer unten am Browserrand abschließt.</p>
<p>Text</p>
<p>Bla Bla</p>
<p>Noch mehr Text.</p>
</div>
<div id="footer">FOOTER</div>
<!-- end #container --></div>
</body>
</html>
|
Die einzige Frage die ich nun noch habe lautet: Wieso ist das ganze 1px zu hoch, sodass immer rechts der Scrollbalken zu sehen ist?
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 09.10.2007 21:55
Titel
|
|
|
Genaugenommen müsstens wohl zwei Pixel sein,
die werden durch das border: 1px dazu addiert:
.oneColFixCtrHdr #container {
width: 780px;
height: 100%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
imho.
|
|
| |
|
|
createc-media
Threadersteller
Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 38
Geschlecht:
|
Verfasst Di 09.10.2007 22:00
Titel
|
|
|
|
Nicht wirklich, auch wenn ich es entferne bleibt das scrollen erhalten.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS: Container im Container Vertikal zentrieren
CSS Container 100% Vertikal ausrichten
container horizontal und vertikal ausrichten.
CSS Container vertikal unten bündig ausrichten
DIV-Container soll anderen DIV-Container verdrängen
DIV Container bei Mouseover über DIV Container anzeigen
|
|
Willkommen auf dem Portal für Mediengestalter
