2.7k Aufrufe
Gefragt in Webseiten HTML von
Hallo Spezialisten,

ich habe eine Webseite mit den DIV´s unten, es passt auch alles soweit von der Anordnung, nur der DIV "footer" wird nicht ganz unten angezeigt. Je nach Inhaltsmenge im DIV "content" wird die Seite "länger", man muss also scrollen. Der Fuss soll dann natürlich ganz unten kommen. Ich hab schon jede Variante ausprobiert, er steht aber maximal unter dem DIV "callback". Und dann kommt drunter noch der weitere Inhalt, weil im DIV "content" viel Inhalt drin steht.

Hier das HTML:

<div id="main">

<div id="menue2">###NAV2###</div>
<div id="content">###CONTENT###</div>
<div id="homeprintmail"></div>
<div id="logo"></div>
<div id="menue1">###NAV1###</div>
<div id="callback">###CALLBACK###</div>
<div id="footer"></div>

</div> <!-- main -->


Und hier das CSS.

#main {
position: absolute;
width: 1000px;
top: 10px;
left: 50%;
margin-left: -500px;
background-color: red;
}

#menue2, #menue2 a {
width: 1000px;
height: 30px;
position: relative;
top: 0px;
left: 50%;
margin-left: -500px;
background-color: #FFFFFF;
background-color: yellow;
text-align: right;
color: #999999;
}

#logo {
width: 250px;
height: 100px;
position: relative;
left: 0px;
top: 0px;
background-color: green;
background-image: url(../images/logo/logo.jpg);
background-repeat:no-repeat;
}

#content {
position: relative;
width: 750px;
right: 0px;
top: 0px;
float:right;
background-color: #FFFFFF;
}

#homeprintmail {
position: relative;
width: 70px;
height: 20px;
top: -25px;
left: 750px;
background-color: #FFFFFF;
background-image: url(../images/icons.jpg);
background-repeat: no-repeat;
}

#menue1 {
position: relative;
width: 196px;
top: 0px;
}

#callback {
position: relative;
width: 196px;
height: 225px;
top: 10px;
background-color: #FFFFFF;
}

#footer {
position: relative;
width: 1000px;
height: 60px;
left: 50%;
margin-left: -500px;
top:0px;
background-color: orange;
}


Habt ihr eine Anregung/Idee/Lösung für mich?

Vielen Dank im Voraus!

10 Antworten

0 Punkte
Beantwortet von latrodectus Experte (1.1k Punkte)
Sorry, ich habe das jetzt nur wirklich ganz flink überlogen ...
aber versuch das mal:

<div id="main">

<div id="menue2">###NAV2###</div>
<div id="content">###CONTENT###</div>
<div id="homeprintmail"></div>
<div id="logo"></div>
<div id="menue1">###NAV1###</div>
<div id="callback">###CALLBACK###</div>

</div> <!-- main -->

<div id="footer"></div>

Bin zu müde das jetzt zu testen ;)

Gute Nacht ...

Liebe Grüsse:
Tammy
0 Punkte
Beantwortet von latrodectus Experte (1.1k Punkte)
ohmann .. hier brauchts wirklich einen bearbeiten Button ;)

ähm ... der Code ist doch soweit korrekt, wie Du auch sagst von der Anordnung ... und wennich das bei mir aufrufe, ist der Footer auch wirklich ganz unten. Gebe ich überlangen Text ein, so verl§ngert sich Content und Nav1 um den Inhalt - und der Footer ist bei mir immer noch darunter ...

Was ist nun das Problem? Habe ich es nicht verstanden?

Liebe Grüsse
Tammy
0 Punkte
Beantwortet von latrodectus Experte (1.1k Punkte)
so siehts bei mir aus.
http://www.woistwaslosindeutschland/pvt-bilder/temp/footer.jpg

Bild wird ende des Jahres von meinem Server wieder entfernt ...

Liebe Grüsse:
Tammy
0 Punkte
Beantwortet von latrodectus Experte (1.1k Punkte)
Grrr ... jetzt gehe ich wirklich ins Bett:

http://www.woistwaslosindeutschland.de/pvt-bilder/temp/footer.jpg

Liebe Grüsse:
Tammy
0 Punkte
Beantwortet von
Hallo Tammy,

danke für Deinen Einsatz trotz Müdigkeit!!!

Deine Antwort hat mir insofern geholfen, dass ich mir das Ganze mal im IE angeschaut habe. Und in der Tat, hier wird der Fuss korrekt ganz unten angezeigt (der Rest sieht dafür überhaupt nicht aus, wie er soll, aber da geh ich dann als nächstes ran).

Im Firefox, Chrome und Safari ist der Rest der Seite i. O., aber der Fuss steht - bei umfangreicherem Inhalt - "mittendrin", also direkt unter "callback".

Den div "footer" hab ich schon an sämtlichen Stellen im HTML-Template probiert. Ich dachte (auch), der muss unter den div "main", weil der ja letztlich die Höhe vorgibt (er wird ja so hoch, wie der "content"), also so, wie Du es auch in Deiner ersten Antwort geschrieben hast.

Hast Du evtl. noch eine Idee?

Danke und Gruß
Toli
0 Punkte
Beantwortet von latrodectus Experte (1.1k Punkte)
Schau doch mal hier:

www.taschen-party.de

Da arbeite ich allerdings mit festen grössen. Wäre das nicht eine alternative? Die CSS könnte ich Dir zukommen lassen. Den Quellcode erhälst Du eh per rechtsklick.

Wenn es denn unbedingt mit automatischen parametern gehen soll ...
nur mal so angefangen und vielleicht für Dich als KLEINE Hilfe ..
musst halt einiges umschreiben und ändern ... einiges hab ich weggelessen von Dir. Aber so würde ich es machen ...

CSS:

#main {
position: relative; top: 30px;
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: red;
}

#menue2, #menue2 a {
width: 1000px;
height: 30px;
position: relative; top: 0px;
background-color: yellow;
}

#menue1 {
position: relative; top: 0px; left: 0px;
width: 1000px;
background-color: #00FF00;
}
#content {
position: relative; top: -246px; left: 196px;
width: 784px;
min-height: 500px;
padding: 10px 10px 10px 10px;
background-color: #F00FFF;
}

#callback {
position: relative;
width: 196px;
height: 225px;
top: 10px;
background-color: #00FFFF;
}
#footer {
position: absolute; bottom:-60px;
width: 1000px;
height: 60px;
margin-left: -206px;
background-color: orange;
}


HTML:


<body>

<div id="main">

<div id="menue2">###NAV2###</div>
<div id="menue1">###NAV1###<div id="callback">###CALLBACK###</div><div id="content">###CONTENT###unter dem DIV "callback". Und dann kommt drunter noch der weitere Inhalt, weil im DIV "content" viel Inhalt drin steht.<div id="footer">Und hier ist der Footer</div></div>
</div>

<div id="homeprintmail"></div>
<div id="logo"></div>




</div>

</body>

Hier ist bis Jahresende zugriff drauf:

www.computer-stadl.de/eltolito/ot.html
mit wenig Text ....

www.computer-stadl.de/eltolito/t.html
mit viel Text

wie gesagt, bitte noch ein wenig optimieren .. hab aber eigentlicvh gerade keine Zeit für, weil ich im Umzug stecke ;)

Liebe Grüsse:
Tammy
0 Punkte
Beantwortet von latrodectus Experte (1.1k Punkte)
Und hier noch eine Alternative, wo nur wenig von Deinem Code verändert wurde:

Auch hier gilt ... bitte NACHARBEITEN ... wenn ich eine Seite erstelle dauert das wesentlich länger als in der Stunde wo ich jetzt hier rumgefummelt habe ;) Und JEDER macht das auch ein wenig anders ... wird also bestimmt wer hier noch was zu schreiben.


CSS:
#hauptkasten {
position: relative; top: 30px;
width: 1200px;
margin-left: auto;
margin-right: auto;
background-color: #F5555F;
}

#main {
position: relative;
width: 1000px;
top: 10px;
left: 50%;
margin-left: -500px;
background-color: red;
}

#menue2, #menue2 a {
width: 1000px;
height: 30px;
position: relative;
top: 0px;
left: 50%;
margin-left: -500px;
background-color: #FFFFFF;
background-color: yellow;
text-align: right;
color: #999999;
}

#logo {
width: 250px;
height: 100px;
position: relative;
left: 0px;
top: 0px;
background-color: green;
background-image: url(../images/logo/logo.jpg);
background-repeat:no-repeat;
}

#content {
position: relative;
width: 750px;
right: 0px;
min-height: 550px;
top: 0px;
float:right;
background-color: #FFFFFF;
}

#homeprintmail {
position: relative;
width: 70px;
height: 20px;
top: -25px;
left: 750px;
background-color: #FFFFFF;
background-image: url(../images/icons.jpg);
background-repeat: no-repeat;
}

#menue1 {
position: relative;
width: 196px;
min-height: 550px;
top: 0px;
}

#callback {
position: relative;
width: 196px;
height: 225px;
top: 10px;
background-color: #FFFFFF;
}

#footer {
position: relative;
width: 1000px;
height: 60px;
margin-right: auto;
margin-left: auto;
top:0px;
background-color: orange;
}


HTML Code:

<body>

<div id="hauptkasten">
<div id="main">

<div id="menue2">###NAV2###</div>
<div id="content">###CONTENT###</div>
<div id="homeprintmail"></div>
<div id="logo"></div>
<div id="menue1">###NAV1###<div id="callback">###CALLBACK###</div></div>


</div>
<div id="footer"></div>
</div>

</body>

anzuschauen auch bis zum Jahresende unter:
http://www.computer-stadl.de/eltolito/t2.html">
http://www.computer-stadl.de/eltolito/t2.html

Liebe Grüsse:
Tammy
0 Punkte
Beantwortet von
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
Um ehrlich sein, habe ich bei all diesen Beiträgen nicht mal genau verstanden, was eigentlich das Problem ist. Wie soll das ganze denn aussehen? Viele der CSS-Eigenschaften, die du verwendet hast, passen nicht wirklich zu deiner Beschreibung.

Sehr wahrscheinlich hilft dir bei deinem Problem die Site www.ohne-css.gehts-gar.net/. Versuch es am besten mal auf www.ohne-css.gehts-gar.net/suchen.php?q=footer.
0 Punkte
Beantwortet von
Das Problem ist sicherlich vom übrigen Code nicht losgelöst zu betrachten.

Bitte verlinke doch die defekte Website direkt, statt bruchstückhaften Code zu posten.

Mit ihren entsprechenden Tools (z.B. dragonfly) können die Leute hier dann deine Seite analysiern. So ist das nur ein wildes Rumgerate ohne Sinn.
...