mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 20.05.2018 21:49 Benutzername: Passwort: Auto-Login

Thema: CSS: mittleren Container vertikal strecken vom 09.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: mittleren Container vertikal strecken
Seite: 1, 2  Weiter
Autor Nachricht
createc-media
Threadersteller

Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 32
Geschlecht: Männlich
Verfasst Di 09.10.2007 13:16
Titel

CSS: mittleren Container vertikal strecken

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 09.10.2007 13:58
Titel

Antworten mit Zitat Zum Seitenanfang

Benutz mal die Suche: "Footer" sollte einige brauchbare Beispiele liefern.

Ansonsten vielleicht auch mal den ganzen Quelltext posten.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
createc-media
Threadersteller

Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 32
Geschlecht: Männlich
Verfasst Di 09.10.2007 14:06
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
createc-media
Threadersteller

Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 32
Geschlecht: Männlich
Verfasst Di 09.10.2007 14:17
Titel

Antworten mit Zitat Zum Seitenanfang

Hier ein Link zum Beispiel: http://www.createc-media.de/index3.html
  View user's profile Private Nachricht senden
Anti78

Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 40
Geschlecht: Männlich
Verfasst Di 09.10.2007 14:28
Titel

Antworten mit Zitat Zum Seitenanfang

Schau mal hier.
  View user's profile Private Nachricht senden
createc-media
Threadersteller

Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 32
Geschlecht: Männlich
Verfasst Di 09.10.2007 18:46
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 09.10.2007 21:55
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
createc-media
Threadersteller

Dabei seit: 09.10.2007
Ort: Castrop-Rauxel
Alter: 32
Geschlecht: Männlich
Verfasst Di 09.10.2007 22:00
Titel

Antworten mit Zitat Zum Seitenanfang

Nicht wirklich, auch wenn ich es entferne bleibt das scrollen erhalten.
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS: Container im Container Vertikal zentrieren
CSS Container 100% Vertikal ausrichten
CSS Container vertikal unten bündig ausrichten
container horizontal und vertikal ausrichten.
Seite strecken (html/css)
Schrift mit CSS/JAVA/IRGENDWIE strecken bzw. stauchen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.