Footer fixieren

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute, ich bin noch etwas neu in Sachen CSS und habe eine Frage. Also wenn Ihr jetzt auf meine Webseite http://der-zauberer.tk geht, seht ihr unten das „© xkev320x All Rights Reserved.“ Soweit, so gut. Nun habe ich es auch schon geschafft, dass es dort unten in der Ecke steht aber wie fixiere ich es so wie bspw. das Hintergrundbild? Wenn man rausscrollt wird es ja kleiner/größer, was allerdings nicht so schlimm ist. Ich meine jetzt eher wenn man z.B. die Browergröße ändert, sieht es ab einem Punkt so http://puu.sh/g554j/64f6c9600c.png aus. Der Text befindet sich nicht mehr ganz unten (und der Hintergrund skaliert mit :D) und außerdem hatte ich noch nicht die Möglichkeit an größeren Bildschirmen zu testen wie es aussieht… Wie behebe ich das? Weiß einer eine Lösung? Wäre sehr dankbar ;D
Hier erstmal der Code von der Seite:

<!DOCTYPE html>
<html lang="de">
<head>
  <link rel="icon" href="http://puu.sh/blrEu/d5ce3ade32.png" type="image/x-icon">
  <meta charset="UTF-8" />
  <meta name="description" content="Willst du Zaubern lernen oder dich über Zauberer schlau machen?
  Dann bist du hier genau richtig!"/>
  <meta name="author" content="xkev320x/Der Zauberer"/>
  <meta name="keywords" content="Zauberer, Wizard, Zaubern lernen, Feenstaub, xkev320x, Magier"/>
  <meta name="robots" content="all" />
   <title>DIE Website für Zauberer</title>
   <style>
     html {
        background: url(bg.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    footer p {
      text-align: right;
      padding-top: 49%;
      padding-bottom: 0;
      color: white;
      font-size: 85%;
      font-family: Verdana, sans-serif;
    }
   </style>
</head>
<body>
  <footer>
    <p>&copy xkev320x <em>All Rights Reserved.</em></p>
  </footer>
</body>
</html>

Nicht über den Inhalt wundern :smiley:

2

Versuchs mal mit:

footer p { position: absolute; bottom: 0px; right: 0px; color: white; font-size: 85%; font-family: Verdana, sans-serif; }

Edit: Achja, ich bin mir nicht sicher, ob ein Avatar-Name als Copyright rechtskräftig ist. Normalerweise schreibt man in den Copyright den Vor- und Nachnamen, oder den Namen der Firma, auf die sich der Cop. bezieht, aber ich bin kein Rechtsanwalt.

3

Also ich würde ganz auf das position: absolute verzichten. Es gibt einige Möglichkeiten um dein Vorhaben zu realisieren. Das Stichwort heißt hier „Sticky footer“. Anbei mal ein Beispiel.

http://www.cssstickyfooter.com/de/

4

Ok ich werd beides mal ausprobieren, wobei mir der Sticky Footer 'n bissl aufwendiger scheint :smiley: (klingt lernfaul aber najaaa xD). Und das mit den Copyright ist mehr oder weniger nur Spaß :wink: Wollte testen ob ich so 'n „Pro“ bin und das alleine mit mein schon erlernten Zeugs hinbekomme ;D

5

Ok das mit position:absolute funktioniert auf jeden Fall, evtl. werde ich mich später mit den Sticky Footern beschäftigen. Nur sagt mir halt das Internet zwar was mit absolute gemeint ist aber ich verstehe es nicht ganz. Es ist irgendwie absolut zum… da hörts schon auf. Kann mir das jemand genauer erklären was mit absolute gemeint ist. Evtl auch als Beispiel anhand meiner Website?

6

Ich zitiere hier mal einen Beitrag von @Tronjer

Für Menüs eher position:fixed, sofern sie am oberen Seitenrand bleiben sollen.

position:absolute ist bsw. dann sinnvoll, wenn man etwas vom rechten unteren Rand her positionieren will und es keinen besseren Ansatz gibt. Ähnliches gilt für position:relative in Verbindung mit top und left, die auch nicht als Ersatz für margin oder float verwendet werden sollten.

Zu Zeiten, als Webseiten noch mit statischen Layouts erstellt und ausschließlich im Browser betrachtet wurden, war es weniger dramatisch, Elemente aus dem Textfluss zu heben, und deshalb hatte man das Attribut damals noch häufiger eingesetzt. Bei modernen, responsiven und fluiden Seiten, die vom Smartphone bis 27" Monitor skalieren sollen, läuft man dagegen schnell in Probleme.

Du kannst position:relative natürlich verwenden, und für einen z-index ist es sogar notwendig. Aber in deinem CSS sollten nach Möglichkeit nie die Attribute left, top, bottom oder right ohne ein vorgestelltes margin- vorkommen.

7

Ich habe wahrscheinlich eher vor mit PHP dann auf die mobile Version weiterzuleiten, die dann logischerweise dementsprechend angepasst ist anstatt meine Website so aufzubauen, dass sie auf beiden gleich funktioniert. Das ist am Ende doch besser meiner Meinung nach aber danke für die Erklärung ;D

8

So mir ist grad noch ein Problem aufgefallen, welches jetzt nicht zum Titel passt aber ich wollte deswegen jetzt nicht unbedingt ein neues Thema anfangen ;D Unter http://beta.der-zauberer.tk oder auch http://der-zauberer.tk/beta , was meine Seite zum Lernen ist ;D, kann man NUR unter Chrome einen kleinen Fehler entdecken und zwar beim Markieren des Textes. Hier mal ein Vergleich - Firefox/Internet Explorer: http://puu.sh/g9i4h/fbc9aa1d20.png | Google Chrome: http://puu.sh/g9i61/2ebb955095.png - Ich denke ihr seht den Fehler (das graue ist das markierte). Wäre toll, wenn jemand wüsste wie man das beheben kann oder ob das ein Fehler von Chrome ist :slight_smile: Hab das so noch nie gesehen :smiley:

9

push, kann mir niemand helfen?