wie kann man Copyright ganz unten auf der Seite unterbringen?

Peerli · 15 August 2010

Hallo!
Ich bin gerade dabei, mich mit HTML auseinander zu setzen und probiere gerade einiges aus. Folgenden Code habe ich bis jetzt ausprobiert und möchte jetzt, das die Fusszeile immer unten ist, egal welcher Monitor (17, 19, 22, 24 Zoll) und welcher Browser benutzt wird.
Hier mein Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>meine zweite HTML-Seite</title>
<style type="text/css">
.ueberschrift {
position:relative;
font-family:"Times New Roman", Times, serif;
color:#009966;
font-size:36px;
font-style:italic;
font-weight:900;
text-align:center;
height:10%;
}

.thema {
position:relative;
font-family:"Courier New", Courier, mono;
color:#0000FF;
font-size:16px;
font-style:inherit;
font-weight:bolder;
text-align:center;
height:auto;
}

.fusszeile {
position: relative;
line-height:1.5em;
background-color:#9900CC;
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bolder;
border:inherit;
text-align:right;
border-style:double;
border-color:#6633FF;
border-width:5px;
left: 1px;
top: 620px;
height:5%;
}
</style>
</head>

<body>
<h1 class="ueberschrift">So viel zu HTML</h1>
<h2 class="thema">hier kommt der normale Text...<br>...und noch mehr Text</h2>
<div class="fusszeile">hier ist die Fusszeile</div>

</body>
</html>

Die HTML-Editior-Vorschau zeigt es zwar richtig an, aber der Browser nicht. Bitte nicht lachen, wie mein Code aussieht. Wenn jemand etwas anders machen will, bitte ich um Tips, denn ich bin erst am Anfang. Aber ich möchte jetzt verstehen, warum die Fusszeile nicht ganz unten ist. Danke im Voraus.
Peer

vitus37 · 15 August 2010

Hallo,
du gibst deiner Fußzeile eine feste Position, das hat zur Folge, dass deine Seite keine Flexibilität mehr aufweist und sich, wie du schon festgestellt hast, bei unterschiedlichen Viewports verzieht.

Lasse bei allen Elementen am Besten die relative Positionierung heraus und arbeite mit static.

Code:

position: static;

Danach dürfte sich der Footer auch direkt unter die anderen elemente schmieden.

P.S. Dort wo dein "normaler Text" reinkommt, solltest du kein h2-Tag nehmen, sondern das p-Tag. h[1-6] zeichnen Überschriften, p Absätze aus.

Gruß

edit:
Mache doch das nächste mal bitte einen neuen Thread für deine Frage auf. ;)

Peerli · 15 August 2010

Hi!
Wenn ich alle Elemente auf static setzte, geht die Fusszeile noch weiter höher.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>meine zweite HTML-Seite</title>
<style type="text/css">
.ueberschrift {
position:static;
font-family:"Times New Roman", Times, serif;
color:#009966;
font-size:36px;
font-style:italic;
font-weight:900;
text-align:center;
height:10%;
}

.thema {
position:static;
font-family:"Courier New", Courier, mono;
color:#0000FF;
font-size:16px;
font-style:inherit;
font-weight:bolder;
text-align:center;
height:85%;
}

.fusszeile {
position:static;
line-height:1.5em;
background-color:#9900CC;
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bolder;
border:inherit;
text-align:right;
border-style:double;
border-color:#6633FF;
border-width:5px;
left: 1px;
top: 720px;
height:5%;
}
</style>
</head>

<body>
<h1 class="ueberschrift">So viel zu HTML</h1>
<p class="thema">hier kommt der normale Text...<br>...und noch mehr Text</p>
<div class="fusszeile">hier ist die Fusszeile</div>

</body>
</html>

Danke für den <p> Tip.
Gruss

vitus37 · 15 August 2010

Du möchtest die Fußzeile also immer am unteren Bildschrimrand haben? Nicht unter dem restlichen Inhalt?

Dann versuche mal dem footer ein

Code:

position: fixed;

zu geben und positioniere es mit

Code:

bottom: 0;

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>meine zweite HTML-Seite</title>
<style type="text/css">
.ueberschrift {
position:static;
font-family:"Times New Roman", Times, serif;
color:#009966;
font-size:36px;
font-style:italic;
font-weight:900;
text-align:center;
height:10%;
}

.thema {
position:static;
font-family:"Courier New", Courier, mono;
color:#0000FF;
font-size:16px;
font-style:inherit;
font-weight:bolder;
text-align:center;
height:85%;
}

.fusszeile {
position:fixed;
line-height:1.5em;
background-color:#9900CC;
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bolder;
border:inherit;
text-align:right;
border-style:double;
border-color:#6633FF;
border-width:5px;
bottom: 0;
}
</style>
</head>

<body>
<h1 class="ueberschrift">So viel zu HTML</h1>
<p class="thema">hier kommt der normale Text...<br>...und noch mehr Text</p>
<div class="fusszeile">hier ist die Fusszeile</div>

</body>
</html>

Peerli · 15 August 2010

ohne Erfolg :-(

threadi · 15 August 2010

Ohne Erfolg wäre dieser Vorschlag nur, wenn Du einen sehr alten Browser wie den IE6 nutzt oder irgendetwas in deinem Code vergessen hast, was hier aber genannt wurde.

majo · 15 August 2010

google mal "Footer stick alt". Ist eine Methode, den Footer immer ganz unten am Viewport zu haben, ist der Inhalt jedoch länger, geht der Footer mit runter.

Publisher · 15 August 2010

position:absolute;
bottom:0;

ist korrekt

Peerli · 15 August 2010

Ohne Erfolg wäre dieser Vorschlag nur, wenn Du einen sehr alten Browser wie den IE6 nutzt oder irgendetwas in deinem Code vergessen hast, was hier aber genannt wurde.

Ich habe nichts weiter verändert als deinen Tip (siehe Code)

google mal "Footer stick alt". Ist eine Methode, den Footer immer ganz unten am Viewport zu haben, ist der Inhalt jedoch länger, geht der Footer mit runter.

Verstehe ich leider (noch) nicht

position:absolute;
bottom:0;

ist korrekt

dadurch funktioniert das leider auch nicht.

Gruss Peer

Tar · 15 August 2010

Hat der Body denn auch height:100%? Denn sonst geht der Body nur bis zum Ende aller Elemente, und nicht bis an das untere Ende des Viewports.

Peerli · 15 August 2010

Ok, Tar, das habe ich schon gelesen, aber ich weiss nicht, wo und wie ich das hier in meinem Code einfügen soll?
Gruss Peer

Tar · 15 August 2010

Code:

body {
height:100%;
}

Peerli · 15 August 2010

Tar schrieb:
Code:

body { height:100%; }

Ich habe es so gemacht, wie du es mir geraten hast oder ich es verstanden habe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>meine zweite HTML-Seite</title>
<style type="text/css">

html {
height:100%;

}
Body {
height:100%
}

.ueberschrift {
position:static;
font-family:"Times New Roman", Times, serif;
color:#009966;
font-size:36px;
font-style:italic;
font-weight:900;
text-align:center;
height:10%;
}

.thema {
position:static;
font-family:"Courier New", Courier, mono;
color:#0000FF;
font-size:16px;
font-style:inherit;
font-weight:bolder;
text-align:center;
height:85%;
}

.fusszeile {
position:absolute;
line-height:1.5em;
background-color:#9900CC;
font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bolder;
border:inherit;
text-align:right;
border-style:double;
border-color:#6633FF;
border-width:5px;
bottom:0;
}

.logo {
border-color:#FFFF00
border-width:10px
border: medium solid #FFFF00;
}

</style>
</head>

<body>
<h1 class="ueberschrift">So viel zu HTML</h1>
<div align="center" class="logo">
<img src="Bilder/logo_FCF.png"></img>
</div>
<p class="thema">hier kommt der normale Text...<br>...und noch mehr Text</p>
<div class="fusszeile">hier ist die Fusszeile</div>

</body>
</html>

Aber die Fusszeile ist jetzt zusammengeschrumpt und es wird trotz des leeren content-Bereiches Scrollbalken angezeigt und die Fusszeile geht dabei mit nach oben. Muss ich an meinen Einstellungen noch was ändern?
Gruss

devilseye · 15 August 2010

HTML:

* {
    margin:0px;
    padding:0px;
}

Füg das mal noch ein damit verhinderst du einen abstand den ein Browser unter Umständen hervorrufen kann, denn nicht alle Browser haben den gleichen Standart vorallem IEs haben da so ihre eigenen Standarts.

Peerli · 16 August 2010

devilseye schrieb:
HTML:

* { margin:0px; padding:0px; }

Füg das mal noch ein damit verhinderst du einen abstand den ein Browser unter Umständen hervorrufen kann, denn nicht alle Browser haben den gleichen Standart vorallem IEs haben da so ihre eigenen Standarts.

Das wird vom Editor als Fehler im Stil-Parsing (IE5) bemängelt.

Aber die Fussleiste ist immer noch nicht so, wie ich am Anfang wollte.

threadi · 16 August 2010

Welcher Editor?
Und wieso spielt der IE5 noch eine Rolle?

devilseye · 16 August 2010

dir ist schon klar das IE5 beinahe Steinzeit ist und wenn du noch damit Arbeitest dann würde ich dir Dringend anraten das so schnell wie möglich zu ändern.

Peerli · 17 August 2010

Ich arbeite mit DW 2004 MX und da zeigt er halt die Fehlermeldung. Das muss ich erstmal akzeptieren. Ich selber habe Win 7 und damit nicht mehr den IE5, aber vielleicht andere, die die Site noch mit dem IE5 anschauen.
Peer

Körnerbrötchen · 17 August 2010

Egal. Der IE 5 ist und bleibt Steinzeit. Selbst große Seiten wie Google und Co unterstützen einen solch alten Browser nicht mehr, da man durch die Unterstützung solcher Antiquitäten den Fortschritt hemmt.

devilseye · 18 August 2010

das ist so etwa dass was ich zu vermitteln versucht habe.

wie kann man Copyright ganz unten auf der Seite unterbringen?

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Moderator

Neues Mitglied

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Moderator

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied