• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

wie kann man Copyright ganz unten auf der Seite unterbringen?

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>
Zum Vergrößern anklicken....
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
 
Werbung:
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. ;)
 
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>
Zum Vergrößern anklicken....

Danke für den <p> Tip.
Gruss
 
Werbung:
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>
 
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.
 
Werbung:
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.
 
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.
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Verstehe ich leider (noch) nicht

position:absolute;
bottom:0;

ist korrekt
Zum Vergrößern anklicken....
dadurch funktioniert das leider auch nicht.

Gruss Peer
 
Werbung:
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.
 
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
 
Werbung:
Tar schrieb:
Code: 
body {
height:100%;
}
Zum Vergrößern anklicken....

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>
Zum Vergrößern anklicken....
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
 
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.
 
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.
Zum Vergrößern anklicken....
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.
 
Werbung:
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.
 
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
 
Werbung:
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben