Positionierung mit CSS -wie jetzt?!

[Gunnar Bittersmann]

@@MrMurphy1

Ich habe mal eine Beispielseite nach den Informationen aus deinen bisherigen Beiträgen erstellt.

Vollständige Beispiele halte ich oft zur Problemlösung nicht dienlich und dem Geist dieses Forums widersprechend. Der Fragende kopiert den Code, ohne ihn zu kapieren.

   <meta name="description" content="HTML5, CSS3">

Was hat das in einem Beispielcode zu suchen? Der Fragende kopiert den Code und hat dann Unsinn drin zu stehen.

      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>

Dass man das so nicht mehr machen sollte, hatten wir doch erst kürzlich. Du schlägst aber auch alles in den Wind, oder?

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }

Und dass das völlig überflüssig ist, weil das der Shiv schon macht, hatten wir im selben Thread auch geklärt. Du schlägst aber auch alles in den Wind, oder?

Und was soll das @media all? Du willst alte Browser unterstützen, aber alte Browser nicht unterstützen?

   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);

Das ist keine Grundeinstellung.

Was hat das in einem Beispielcode zu suchen? Der Fragende kopiert den Code und lädt dann eine Schrift runter, die er überhaupt nicht braucht.

Zumal Iconfonts keine wirklich brauchbare Methode für Icons sind. Verwende SVG.

      html {
         font-size: 120%;
      }

Das ist auch nichts, was in einem allgemeinen Beispielcode was zu suchen hätte. Im allgemeinen ist man mit der Standardschriftgröße 1em gut bedient.

      a {
         color: black;
         text-decoration: none;
         outline: none;
      }

Es wird immer abenteuerlicher. Alle Links schwarz und nicht unterstrichen ist Blödsinn; dann sind Links im Fließtext überhaupt nicht mehr als solche zu erkennen.

outline: none ist Blödsinn; dann ist der aktuell angewählte Link bei Navigation per Tastatur nicht zu erkennen. Das kann man nur dann setzen, wenn man eine andere Kennzeichnung für a:focus vorsieht.

      body {
         width: 1000px;
         height: 1000px;
         padding: 0 auto;
         padding-bottom: auto;
         border: 1px solid white;
         margin: 0 auto;
      }

Zu width hatte ich schon was gesagt; height auf einen festen Wert zu setzen dürfte auch kaum sinnvoll sein.

Erst setzt du padding-bottom auf 0, um es gleich danach auf auto zu setzen? Dein Code sieht so aus, als würdest du immer mal was dazufügen ohne zu kucken, ob das in der Gesamtheit Sinn ergibt.

Und was soll border: 1px solid white bezwecken?

      body > div:nth-child(2)

Dass derartige Selektoren nicht robust gegenüber Änderungen im Markup sind, hatten wir auch letztens erst.

      body > div:nth-child(2) a:nth-child(1) {
         background-image: url(../pics/cn.jpg);
         margin-left: 0;
      }

Und der hat gleich doppelte Chancen, sich nicht auf das gewünschte Element zu beziehen.

      body > div:nth-child(2) a:nth-child(2) {
         background-image: url(../pics/en.jpg);
      }
      body > div:nth-child(2) a:nth-child(3) {
         background-image: url(../pics/de.jpg);
      }
      body > div:nth-child(2) a:nth-child(4) {
         background-image: url(../pics/hk.jpg);
      }
      body > div:nth-child(2) a:nth-child(5) {
         background-image: url(../pics/tw.jpg);
      }

Was soll das Ganze überhaupt werden? Flaggen für Sprachen? cn, hk, tw sind keine Sprachkürzel.

LLAP 🖖