Okay, das üben wir jetzt erst einmal.
|
![]() Klicke auf das Bild für die Darstellung in Originalgröße |
Super, jetzt hocken die beiden immer noch übereinander und nicht nebeneinander. Öffne den Styleeditor erneut. Wähle in der Styleliste die ID rot. Wechsele in die Boxeigenschaften. Über den Eintrag Puffer kannst du Elemente ausrichten. Wähle Puffer rechts. Ups ... die rote Box richtet sich am rechten Rand aus. |
![]() Klicke auf das Bild für die Darstellung in Originalgröße |
Okay, versuche nun die rote Box in die gleiche Zeile wie die grüne Box zu bekommen. Hierzu musst du die grüne Box aus dem Zeilenfluss nehmen. Dazu stellst du in der ID #gruen den Puffer auf links. |
![]() Klicke auf das Bild für die Darstellung in Originalgröße |
Jetzt sind beide Boxen in einer Zeile, aber nebeneinander ist noch anders ... Aktiviere die Id #rot und entferne den Puffer rechts daraus. Schwups klebt die rote Box neben der grünen. |
![]() Klicke auf das Bild für die Darstellung in Originalgröße |
Jetzt versuche noch die rote Box so breit zu bekommen, dass sie die gesamte Zeile neben der grünen Box ausfüllt. Wie du weißt, ein Div ist ein Blockelement und nimmt die ganze Zeile ein, wenn ihm nichts im Wege steht und er auch nicht in eine Breite gezwungen wird. Aktiviere die ID rot und lösche die Breitenangaben. |
![]() Klicke auf das Bild für die Darstellung in Originalgröße |
Super, das hat ja geklappt. Aber was passiert, wenn du auch die Breite bei der grünen Box raus nimmst? |
![]() Klicke auf das Bild für die Darstellung in Originalgröße |
![]() | Achtung! Auch die grüne Box ist ein Div. Jedoch hat er einen Puffer: links. Mit dem Puffer hebst du die Eigenschaft von Blockelementen auf und der DIV versucht nicht mehr die Zeile auszufüllen. Er besitzt nur noch die Breite seines Inhaltes. |
Möchtest du eine Box mit einem Abstand vom Rand positionieren, musst du einen Außenabstand angeben. Probiere es einmal aus: Aktiviere die ID #rot Lege einen Außenabstand links von 100px an. Die Box schrumpft nach rechts und lässt eine Lücke links von 100px. Im Lineal siehst du die Abmessungen. Links vor der roten Box ist eine Lücke entstanden. |
![]() Klicke auf das Bild für die Darstellung in Originalgröße |
Möchtest du das z.B. dein Text nicht so links am Rand klebt, stellst du einen Abstand über den Innenabstand ein. Stelle einen Innenabstand links von 100px an. Schon hast du deinen Text in der Box ausgerichtet. Speichere die Datei erneut ab. |
![]() Klicke auf das Bild für die Darstellung in Originalgröße |