Lektion 6 - Positionieren

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 6 - Positionieren

Beitrag von Admin » Di 19. Aug 2014, 11:22

Positionieren mit den Boxeigenschaften

Deine Webseite sieht jetzt schon ein bissel bunt aus. Das Zeilenlayout ist schon ganz schick, jedoch ist man dabei mit der Navigation sehr eingeschränkt. Es gibt noch mehr Möglichkeiten sein Weblayout zu gestalten: Navigation links, Navigation rechts oder den Kopf rechts oder mit 2 Menüleisten ...

Nur wie bekommt man die Bereiche nun nebeneinander? DIV sind sogenannte Block-Elemente und nehmen eine ganze Zeile für sich ein, wenn man sie nicht in Höhe und Breite formatiert.

[col]Okay, das üben wir jetzt erst einmal.
  1. Öffne eine neue Datei. Speichere sie als beispiel.html.
  2. Drücke die Enter-Taste 2-mal und füge in jede Zeile einen Div ein, so wie in der letzten Lektion. Schreibe Div 1 und Div 2 in die Divs.
  3. Lege zwei IDs an.
  4. #rot - Stelle als Hintergrundfarbe rot ein. Stelle die Höhe auf 100px und die Breite auf 250px ein.
  5. #gruen - Stelle als Hintergrundfarbe grün ein und stelle die Größe auf 150px mal 150px ein.
  6. Weise nun Div 1 die ID gruen zu und Div 2 die ID rot.
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Puffer

[col]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
[/col]


[col]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
[/col]

[col]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
[/col]



Größe

[col]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
[/col]

[col]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
[/col]

[anmerk]Bild|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.[/anmerk]


Abstände

[col]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
[/col]

[col]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 ein.
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
[/col]

Übung

Jetzt hast du das Verhalten der Boxen im Textfluss kennengelernt. Die Ausrichtung der Vorlage für die verschiedenen Layouts sollte jetzt kein Problem mehr sein. Versuchen wir es doch mal ...

Öffne deine index.html aus Lektion 5.
Speichere deine nun folgenden Übungen im Lektionsordner lektion6 auf deinem Rechner.

Beginnen wir mit dem

Navigation-Links Layout

Den Kopf brauchst du nicht verändern.
Beginne mit der Navigation:
  • Stelle die Breite auf 150px und setze einen Puffer links.
  • Damit der Footer sich jetzt nicht auch noch neben die Navigation setzt, musst du den Links-Puffer aufheben.
  • Aktiviere die ID footer und setze die Einstellung "Aufheben" auf beide. Damit stellst du den normalen Zeilenfluss wieder her.
Speichere die Vorlage als navigation-links.html.
Versuche es nun mit dem Layout:

vorlage-links.html

Hier die Lösung für die Quellcodepuristen:

Code: Alles auswählen

#kopf {
  height: 100px;
  background-color: #333300;
  color: #cccccc;
  text-align: center;
}
#navi {
  background-color: #ffff33;
  width: 200px;
  float: left;
}
#inhalt {
  height: 200px;
  margin-left: 200px;
  background-color: #ffff99;
}
#footer {
  height: 30px;
  background-color: #666600;
  color: #ffff66;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
}
Navigation-rechts

Bild

Hat es geklappt? Dann sollte dein Ergebniss so aussehen: navigation-rechts.html

Code: Alles auswählen

#kopf {
  height: 100px;
  background-color: #333300;
  color: #cccccc;
  text-align: center;
}
#navi {
  background-color: #ffff33;
  width: 200px;
  float: right;
}
#inhalt {
  height: 200px;
  background-color: #ffff99;
  margin-right: 200px;
}
#footer {
  height: 30px;
  background-color: #666600;
  color: #ffff66;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
  clear: both;
}
Ein Layout habe ich noch, an dem du dich versuchen kannst:

Navigation-oben, Kopf-links

Die Lösung habe ich hier: navigation-oben.html

Code: Alles auswählen

#kopf {
  background-color: #333300;
  color: #cccccc;
  text-align: center;
  float: left;
  width: 200px;
  height: 230px;
}
#navi {
  background-color: #ffff33;
  margin-left: 200px;
  height: 30px;
}
#inhalt {
  height: 200px;
  background-color: #ffff99;
  margin-left: 200px;
}
#footer {
  height: 30px;
  background-color: #666600;
  color: #ffff66;
  font-size: 12px;
  line-height: 30px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
  clear: both;
}

Lade deine 3 Übungen auf deinen Server. Um sie hier zu zeigen, musst du jede Seite hier im Beitrag verlinken.

Viel Spaß beim Nachbasteln!

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 6 - Positionieren

Beitrag von eibauoma » Fr 5. Sep 2014, 14:04

jetzt kommt die Navigation-links, habe dafür die Index-Datei überschrieben.
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 243
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 6 - Positionieren

Beitrag von camouflage1984 » Fr 5. Sep 2014, 14:11

Hallo eibauoma

Das passt!
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 6 - Positionieren

Beitrag von eibauoma » Fr 5. Sep 2014, 17:46

meine Navigation-rechts:

beim Abspeichern und Aktualisieren der Indexdatei hat es ein paar Versuche gebraucht. Als Uhrzeit wurde mir wiederholt 15 Uhr angezeigt, damit die Speicherzeit der vorherigen Variante.
Jetzt wird endlich die Navigation rechts angezeigt :roll:
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 6 - Positionieren

Beitrag von anke » Fr 5. Sep 2014, 19:06

Hallo eibauoma

da in dieser Lektion mehrere Übungen gebastelt werden, ist das nicht so praktisch, wenn du sie immer überschreibst. Dann hast du später keine Referenz zu dem, was du gemacht hast.

Das Übungsergebnis sieht aber gut aus ;)

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 6 - Positionieren

Beitrag von eibauoma » Fr 5. Sep 2014, 19:24

Mit ist keine bessere Lösung eingefallen, die Übungsergebnisse zu zeigen. Ich hatte Hoffnung, dass Du mir einen besseren Weg nennst. Bin doch ziemlicher Laie was Webseiten betrifft.

Die letzten Übungen hab ich natürlich auch unter anderem Namen in einem anderen Ordner gespeichert.

Viele Grüße
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 6 - Positionieren

Beitrag von eibauoma » Fr 5. Sep 2014, 21:50

Navi oben und Kopf links sind ebenfalls positioniert.
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 243
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 6 - Positionieren

Beitrag von camouflage1984 » Sa 6. Sep 2014, 05:49

Hallo eibauoma

Du kannst jeder neuen seitec einen anderen Namen geben zum Beispiel
navigation-links.html oder navigation-oben.html :-)

Sieht gut aus.
Weiter gehts
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

rudirednose
Beiträge: 23
Registriert: So 10. Mai 2015, 10:01

Re: Lektion 6 - Positionieren

Beitrag von rudirednose » Mo 1. Jun 2015, 19:59

ok, ich bin jetzt mit den Lektionen bis 6 soweit durch.
Kann aber momentan keine Seite(n) einstellen, weil ich auf meinen beiden web-Adressen bereits jeweils was stehen habe.
Aber die Aufgaben sind sehr klar und vor allem der Quelltext macht mir absolut Spaß! ;-)
Vor allem sind mir jetzt die CSS und ihre verschiedenen Typen schon etwas geläufiger! Und das Editieren darin!
Aber da werde ich noch heftig üben müssen!
Jetzt schon mal Vielen Dank für diesen Kurs! Ich bin der festen Überzeugung, hier bin ich richtig!

rudirednose

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 6 - Positionieren

Beitrag von Hellriders » Fr 21. Aug 2015, 01:43

Vorlage.html
navi.oben
navi.rechts

Wie kann ich etwas verlinken ohne die komplette URL hier reinzustellen?
ansonsten ein großes Lob für diesen Kurs

gruß micha
Zuletzt geändert von Hellriders am Fr 21. Aug 2015, 15:44, insgesamt 2-mal geändert.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast