Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Text im Kopfbereich positionieren

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Kombination von absoluter und relativer Positionierung dient in diesem praktischen Beispiel dazu, einen Text optimal innerhalb des Kopfbereichs einer Website zu platzieren.

Transkript

In diesem Film möchte ich Ihnen zeigen, wie Sie die absolute Positionierung in der Praxis einsetzen können, und zwar steht hier im Kopfbereich, im "header" der Slogan hier, "Webseiten gestalten mit HTML und CSS. Grundlagen". Der steht hier unter dem Logo. Der soll jetzt mit Hilfe von absoluter Positionierung verschoben werden und hier rechts neben dem Logo stehen. Das wird besonders in Zusammenarbeit mit relativer Positionierung eine sehr stabile Form der Positionierung. Los geht es hier im Editor. Hier ist die "index.html" aus dem Ordner "anfang". Dort liegen die Dokumente, so wie sie für den Anfang dieses Abschnitts ideal sind. Ich habe hier die "index.html" geöffnet und hier ist der "header id=kopfbereich" und "p class slogan Webseiten gestalten" und so weiter. Das ist das HTML, das jetzt gestaltet wird, und zwar von diesem CSS hier. Sie haben "p class slogan", da "p.slogan padding 5" und "margin 5", ansonsten überall Nullen hier. Dieses Element soll jetzt positioniert werden. Dazu gebe ich hier eine leere Zeile an und schreibe mal rein "position" - da ist er schon - "position: absolute;". Speichern. Rüber, neu laden. Und Sie sehen, der sitzt hier noch an derselben Stelle, aber für die anderen Elemente ist dieses "p" hier schon nicht mehr sichtbar, deswegen ist das alles etwas nach oben gerutscht. Jetzt wird hier im Editor noch angegeben, wo das hin soll. Und zwar "top:" "25 Pixel", Semikolon und dann lassen wir es erst mal so. "left" kommt gleich auch noch, aber erst einmal hier zeigen: "top", und dann sehen Sie, der sitzt schon oben, gemessen vom Stammelement HTML, also vom Rand des Browserfensters, 25 Pixel hier. Jetzt müsste es noch ein Stück weiter rüber. Und dazu sage ich jetzt nicht rechts irgendwas reinschieben, sondern ich sage einfach mal "left" und ziehen das ungefähr zur Hälfte, also bis "45 Prozent". Kann auch "50", können Sie einfach mal ausprobieren. Und neu laden und Sie sehen, das sieht schon gar nicht so schlecht aus. 45 Prozent, das scheint an der richtigen Stelle zu stehen. Nun ist das aber mit Webseiten so eine Sache, denn wir haben keine Kontrolle darüber, wie und wo und wann die dargestellt werden. Das heißt, wenn ich jetzt hier ein bisschen teste... Ich gehe zum Beispiel hier mal in die Entwicklertools und markiere den "wrapper" und nehme mal die Zentrierung für die Webseite weg. Das ist ja gemacht durch "margin: auto" für den "wrapper". Und wenn ich das jetzt deaktiviere, achten Sie oben auf den Slogan. Sie sehen, die ganzen Elemente rutschen jetzt alle nach links, weil sie in dem "wrapper" enthalten sind. Dadurch, dass dieser Absatz hier aber absolut positioniert ist, weiß der nichts mehr von den anderen, der hat mit dem Fluss nichts mehr zu tun. Mit dem Flow. Wenn ich das wieder rausnehme, dann sitzt er wieder da, wo er ist, wenn er nicht absolut positioniert ist. Hier kann man das wunderbar sehen. Und jetzt sehen Sie auch, warum "left: 45 Prozent" keine gute Idee ist, denn das wird gemessen vom Stammelement HTML aus. Das heißt, es scheint hier nur scheinbar zu funktionieren. Besser und vor allem zuverlässiger wäre es, wenn wir die absolute Positionierung hier zum Beispiel vom umgebenden Kopfbereich aus berechnen könnten und das geht. Relativ simpel sogar. Ich nehme also hier wieder das Stylesheet "bildschirm.css", gehe in den "header", den umgebenden Kopfbereich, und sage da "position: relative". So. Und da ist der soweit vorhanden. "position: relative", dadurch ändert sich optisch hier überhaupt gar nichts, aber die Werte für "p.slogan" werden gleich dann vom Kopfbereich aus gemessen, deswegen sage ich hier jetzt mal "right:" Ich probiere es mal mit "20 Pixel". So, jetzt wird rechts vom Kopfbereich aus das Ganze gemessen. Ich gehe wieder rüber, lade einmal neu und Sie sehen, jetzt ist hier "top" von oben und rechts von rechts. Sie sehen, von oben da müssen wir ein bisschen nachbessern, das ist ein bisschen sehr viel. Dann nehmen wir mal "10 Pixel". Speichern und wieder rüber. Und so haut das schon ungefähr hin, da können wir gleich noch ein bisschen nachbessern. Aber das Wichtige jetzt ist, das wird nicht mehr vom Stammelement HTML aus gemessen, sondern vom Kopfbereich, der hier das Ganze umgibt. Der hat "position: relative". Wenn ich das wegnehme, dann sehen Sie, der fluppst wieder rüber, dann werden "top" und "right" vom Stammelement aus gemessen. Wenn ich das aktiviere, dann sitzt der hier genau drin. Auch wenn ich für den "wrapper" hier jetzt die Zentrierung rausnehme, dann wandert jetzt hier der Slogan mit und ist relativ zum Kopfbereich. Sie sehen also die Kombination von relativer Positionierung zusammen mit absoluter Positionierung. Das ist, was die ganze Sache richtig praxistauglich macht. Ich würde ihn noch ein ganz kleines bisschen nach oben bringen. Dazu könnten wir entweder "top" auf 5 Pixel setzen oder hier den "margin" einfach entfernen und den auf null setzen. Das kommt auf dasselbe Ergebnis heraus. Und hier sehen Sie jetzt, passt er einigermaßen hier oben mit der Ausrichtung. Noch einmal ganz kurz im Entwicklertool, hier "class slogan" absolut positioniert - wenn der weg ist, sitzt der wieder unten - und ausgerichtet am relativ positionierten "header". Wenn ich das hier deaktiviere, da wird die Position für slogan vom Stammelement HTML aus gemessen. Kombination von absolut ausgerichtet an einem relativ positionierten Element. das ist eine absolut kennenswerte Basistechnik im Webdesign.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!