Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

DerSnipe · 09.07.2013

Hallo,

ich möchte gerne in einer Basic CSS Datei, dass Grunddesign meiner Seite erstellen.
Nun habe ich eine Frage:
Ist es möglich, dass die Fusszeile immer unterhalb des längstens Div's ist?
Also, wenn jetzt im Div mit dem Hauptteil viel steht, dass die Fusszeile sich dann daran orientiert und drunter bleibt.
Wenn jetzt jedch der Div mit dem Hauptteil kürzer ist, als z.B. die Werbung, sollte die Fusszeile unterhalb der Werbung sein.

Gibt es da eine Möglichkeit, das in einem CSS Dokument zu regeln?
Die Fusszeile an sich soll auch ein Div sein, da dies mehr Bearbeitungsmöglichkeiten gibt.

Ich bin über jede Hilfe dankbar

Myhar · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Zuerst: Die Fußzeile ist hoffentlich kein <div> sondern ein <footer>

Des Weiteren: Meinst du mit "unterhalb" die Z- oder Y-Achse deiner Website? Soll es einfach nur "unten dran" sein, dann passiert das automatisch. Soll es fixiert am Browserfenster unten kleben, oder soll es sich über die Elemente legen? Das sind drei verschiedene Interpretationsmöglichkeiten deiner Frage, hier musst du genauer spezifizieren was du überhaupt willst.

DerSnipe · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Noch steht die Fusszeile als Div, ich werde es gleich ändern.
Die Fusszeile soll den selben z-Indexhaben, wie die anderen Inhalte.
Die Fusszeile soll auf der Y Achse unterhalb des längsten Inhaltes stehen, jedoch nicht an die Fenstergröße gebunden sein und auch keinen anderen Inhalt überdecken.
Ist das möglich?

Myhar · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Das was du beschreibst ist das Standardverhalten von HTML-Elementen.

HTML:

<p> Hier ist ein Absatz</p>
<p> Ob hier ein zweiter oder dritter Absatz steht ist egal </p>
<footer>
<p>Dieser Footer wird immer unter dem restlichen Inhalt stehen</p>
</footer>

DerSnipe · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Also bleibt der footer auch bei mehreren Spalten unten?

cythux · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Code:

<footer class="clearfix">
     <!-- Hier dein Content rein -->
</footer>

Code:

.clearfix:before,
        .clearfix:after {
          content: ".";
          display: block;
          height: 0;
          overflow: hidden;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1; /* IE < 8 */
        }

Myhar · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Das kommt darauf an, wie du deine mehreren Spalten aufgebaut hast. Floatest du und clearst nicht, dann richtet sich der Footer unter Umständen nach dem zuletzt gefloateten Element. Ohne Details zu kennen kann man hier also schwer weiterhelfen.

HTML:

<div class="col1"> test </div>
<div class="col2"> test2 </div>
<div class="col3"> test3 </div>
<footer> Bliblablub</footer>

.col1,.col3{width:10%;float:left}
.col2{width:80%;float:left;
footer{clear:both}

So würde es zB funktionieren.

DerSnipe · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Ich arbeite ohne floats.
Nur mit mehreren Divboxen mit heigth: auto;

Ich kann nahher wenn ich am Computer sitze, die relevanten code stücke hier hin schreiben.

DerSnipe · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Hier ist einmal das HTML Dokument

Code:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="CSS/Neu Textdokument.css" type="text/css">
</head>
<body>
<div id="header">
<p align="center"><font id="headline" color="#FFFFFF">Free-Pc-Configurator</font></p>
<p align="right"><font color="#FFFFFF">Sprachen:&emsp;</font></p>
</div>

<div id="mainnavigation">
    <ul>
    <li><a href="Index.html">Zur Startseite</a></li>
    <hr>
    <li><a href="Impressum.html">Zum Impressum</a></li>
    <hr>
    <li id="menu"><a href="Hilfe.html">Hilfe</a></li>
    <ul>
    <hr>
    </ul>
    <hr>
    <li></li>
     </ul>
</div>

<div id="navigation">
        navigation
</div>

<div id="info">
        info
</div>

<div id="werbung">
         werbung
</div>

<div id="main">
         main
</div>

<footer>
      bottom
</footer>
</body>
</html>

Und hier einmal das CSS:

Code:

body {
font-size: 100.00%
font-family: Verdana;
margin: 0px;
background-color: #CCC;
min-width: 1280px;
z-index: 1;
}

font#headline {
font-size: 40px;
}

div#header {
position: absolute;
top: 0px;
left: 0px;
width: 1280px;
high: 100px;
background-color: #00F;
border-style: solid;
border-width: 0px;
z-index: 2;
}

div#mainnavigation {
position: absolute;
top: 150px;
left: 0px;
width: 250px;
high: 375px;
background-color: #FFF;
border-style: solid;
border-width: 0px;
border-radius: 10px 10px 10px 10px;
z-index: 2;
}

div#navigation {
position: relative;
top: 350px;
left: 0px;
width: 250px;
high: 750px;
background-color: #AFA;
border-style: solid;
border-width: 0px;
border-radius: 10px 10px 10px 10px;
z-index: 2;
}


div#info {
position: absolute;
top: 150px;
left: 1030px;
width: 250px;
high: 150px;
background-color: #F00;
border-style: solid;
border-width: 0px;
border-radius: 10px 10px 10px 10px;
z-index: 2;
}

div#werbung {
position: relative;
top: 400px;
left: 1030px;
width: 250px;
high: 650px;
background-color: #FAA;
border-style: solid;
border-width: 0px;
border-radius: 10px 10px 10px 10px;
z-index: 2;
}

div#main {
position: absolute;
top: 150px;
left: 250px;
width: 780px;
high: auto;
background-color: #DDF;
border-style: solid;
border-width: 0px;
border-radius: 10px 10px 10px 10px;
z-index: 2;
}

footer {
width: 1280px;
high: 150px;
background-color: #F0F;
border-style: solid;
border-width: 0px;
z-index: 2;
}

ul {
list-style: none;
}

li#menu {
background-color: #FDD;
}

Ich hoffe das hilft weiter :uhm: . Ich habe selbst nur wenig Erfahrung, daher bitte ich darum, wenn es im Code einen Fehler gibt in mir bitte mit zu teilen.

afr0kalypse · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Hi. Ja in deinem Code finden sich ein paar Fehler.
Bei deinem css im body-Teil fehlt bei font-size:100.00% das Semikolon.
Dann heißt es nicht high sondern height für Höhe.
So Sachen wie align kannst du auch mit css abbilden.
Ich empfehle dir dein html Gerüst noch mal zu korrigieren und dann mit dem css noch mal von vorn anzufangen.
Derweil versuche ich dir mal ein Beispiel fertig zu machen und werde es dann hier posten

DerSnipe · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Danke, ich hoffe es ist trozdem ersichtlich, wie ich mir die Seite ungefähr vorstelle, die Farben werden noch geändert, ich habe die jetzt nur zur einwandfreien Unterscheidung so gefärbt

cythux · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

für mich sind da schon zuviele div's drin

es gibt Tags in HTML5 wie main, section, aside, nav, header

DerSnipe · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Ok, mit HTML5 habe ich mich nocht nicht so beschäftigt.

Ich werde da mal nachschauen.

afr0kalypse · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Hier mal ein Beispiel, was dem entsprechen müsste, was du machen wolltest.
Angaben ohne Gewähr ^^
http://jsfiddle.net/je2mM/66/

cythux · 09.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Bis auf die Meta und doctype Angaben sieht es ja gut aus

DerSnipe · 10.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

Die erste Nav ist auf allen Seiten gleich und Seitenübergreifend.
Die zweite Nav ist nur Seiten intern und soll sich von der Seitenübergreifenden Navigation absetzen.

cythux · 10.07.2013

AW: Wie kann ich die Fusszeile unterhalb der anderen Div Fenster halten?

afr0kalypse schrieb:
Hier mal ein Beispiel, was dem entsprechen müsste, was du machen wolltest.
Angaben ohne Gewähr ^^
http://jsfiddle.net/je2mM/66/

hast du diesen Code hier genutzt ?
Welcher Browser?