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

Frage Elemente nebeneinander Footer

M

Moritz347

Neues Mitglied
Hallo,
ich würde gerne einen Footer erstellen und weiß nicht wie ich das Impressum genau mittig bekomme.
HTML:
<footer>


<p id="copyright">Copyright &copy 2016 Max Mustermann </p>
<a id="impressum" href="impressum.html" target="_blank"<p>Impressum </p></a>

</footer>



CSS:

#impressum {
text-align: center;
float: right;
margin-right: 50%;
}

#copyright {
float:right;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
padding: 0px;
margin: 0px;
}



Wie kann ich eigentlich im Forum Code besser darstellen?

LG
Moritz
 
Werbung:
Hallo

Wie kann ich eigentlich im Forum Code besser darstellen?
Zum Vergrößern anklicken....

Zunächst muss JavaScript erlaubt sein. Dann klickst du auf das Symbol links von der Diskette und wählst im Menü "Code". Es öffnet sich ein Fenster, in das du den Quelltext kopieren oder schreiben kannst. Du kannst du Code-Tags auch direkt eingeben.

Dein CSS ist zwar kreativ, aber ziemlich sinnfrei. Deshalb habe ich mal ein Beispiel mit aktuellem HTML / CSS erstellt:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>footer zentriert 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      footer {
         padding: 0.5rem;
         display: flex;
         justify-content: center;
      }
      footer>* {
         padding: 0;
         margin: 0;
      }
      #impressum {
         margin-left: auto;
         margin-left: 40%;
      }
      #copyright {
         margin-left: auto;
      }
   }

   </style>
</head>
<body>
   <footer>
      <a id="impressum" href="impressum.html" target="_blank">Impressum</a>
      <p id="copyright">Copyright &copy 2016 Max Mustermann </p>
   </footer>
</body>
</html>

Die 40% bei

Code: 
      #impressum {
         margin-left: auto;
         margin-left: 40%;
      }

kannst du natürlich noch etwas anpassen. Ich habe die einfach grob nach Augenmaß gewählt.

Falls du die margin-left: auto unter die 40% verschiebst, wird der Leerraum korrekt angepasst. Der Footer ist dann insgesamt flexibler und vom Layout sogar besser, obwohl das Impressum nicht zentriert ist. Aber da Anfänger gerne alles zentrieren möchten habe ich von den beiden Möglichkeiten zunächst die 40% nach unten gestellt.

Gruss

MrMurphy
 
Habe jetzt nur grob drüber geschaut: aber wozu margin? Die Elemente ließen sich auch mit justify-content: space-around oder space-between positionieren.
 
Werbung:
Hallo

Ich habe das Problem so verstanden, dass der Impressum-Link zentriert im Footer stehen soll und das copyright rechtsbünding. Das geht mit justify-content meiner Ansicht nach nicht.

Ich habe aber noch mal eine Lösung mit drei Containern erstellt, die in Hinblick auf die Zukunft wahrscheinlich besser ist. Es kann schließlich sein, dass später noch weitere Infos in den footer eingefügt werden sollen.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>footer zentriert 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      footer {
         padding: 0.5rem;
         display: flex;
      }
      footer>* {
         padding: 0;
         margin: 0;
      }
      footer>:nth-child(1),
      footer>:nth-child(3) {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
      }
      footer>:nth-child(2) {
         text-align: center;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 6rem;
      }
      footer>:nth-child(3) {
         text-align: right;
      }
   }

   </style>
</head>
<body>
   <footer>
      <section>
      </section>
      <section>
         <p><a href="impressum.html" target="_blank">Impressum</a></p>
      </section>
      <section>
         <p>Copyright &copy 2016 Max Mustermann</p>
      </section>
   </footer>
</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben