Lektion 4 - Mehrspaltiges Template

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

Lektion 4 - Mehrspaltiges Template

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

Bislang haben wir nur Templates bearbeitet, die nur ein Menü besitzen, einen Header, einen Inhalt und einen Footer.

Gut, bei jeder Seite gibt es nur einen header, footer und inhalt, aber häufig werden Menüs auf zwei aufgeteilt. Das heißt du brauchst einen div mehr.

Mit 3 Spalten unter dem Kopf

Um ein mehrspaltiges Layout anzulegen, musst du entsprechend einen Div mehr anlegen:

Seite - Kopf- Menü1 - Menü2- inhalt - Footer

Ja, die Menüs direkt nacheinander angelegt werden.

Anschließend legst du wie gewohnt das Stylesheet an. Achte darauf für jedes Menü eine ID anzulegen.

Kopf
bekommt wie immer die Höhe.

Menü1
feste Breite und Puffer links.

Menü2
feste Breite und Puffer rechts.

Inhalt
Außenabstand rechts und links in der Breite von Menü1 und Menü2.

Footer
Eine Höhe und hier hebst du den Puffer auf.


Füge wie immer deine Inhalte ein wie h1, deine Linkliste, den Text ...

Beispiel 1


Übung

[col]Jetzt versuche es selber einmal:

Mit einem zweiten Menü über dem Footer

Hier musst du schauen, welchen Div du als Menü verwendest.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Mit einem zweiten Menü unter dem Kopf

[col]Auch in meinem Lösungsbeispiel zur Übung 3 habe ich die Beschriftungen der Div aus dem Beispiel 1 beibehalten.

Beispiel 2

Es gibt viele Möglichkeiten wie man die Bereiche auf der Seite anordnen kann.

Viel Spaß beim Anlegen.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 4 - Mehrspaltiges Template

Beitrag von kp2709 » Do 4. Sep 2014, 08:52

Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

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

Re: Lektion 4 - Mehrspaltiges Template

Beitrag von anke » Do 4. Sep 2014, 14:05

Hallo Kurt
das hast du technisch wieder super hinbekommen ;)

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

Re: Lektion 4 - Mehrspaltiges Template

Beitrag von Hellriders » Fr 16. Okt 2015, 21:38

ich hab mal 2 zum nachschauen :D

übung1
übung2

gruß micha

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

Re: Lektion 4 - Mehrspaltiges Template

Beitrag von anke » Sa 17. Okt 2015, 12:42

Hallo micha
die sind super geworden :D

Moendel
Beiträge: 34
Registriert: Di 13. Okt 2015, 07:32

Re: Lektion 4 - Mehrspaltiges Template

Beitrag von Moendel » Di 23. Feb 2016, 15:29

Endlich bin ich ein bischen weiter. Wenn ihr netterweise mal schauen wollt?

Beispiel1
Beispiel2
Beispiel3

und wieder habe ich mit den Positionierungen gekämpft.Mir scheint, bei mir haben sich einige
Gedankenfehler eingeschlichen, die ich nicht so richtig zu fassen bekomme :oops:
Irgendwie habe ich in Erinnerung, es ist sicherer entweder Innen- oder Aussenabstand zu nutzen.
Beispiel 2:
Um nun den Inhalt nicht ganz zu nah am Menu zu haben, kam ich dann ins Schleudern.
Mit Innenabstand Links funktioniert es anscheinend nicht. Außenabstand wollte ich nicht aus obigem Grund.
Mit Angabe von Breite und Höhe für den Inhalt geht es auch nicht - es entsteht links ein Abstand zum Menu.
Tja, irgendwann war ich durch viel Probieren etwas durcheinander und habe es nun so belassen.
LG
Moendel

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

Re: Lektion 4 - Mehrspaltiges Template

Beitrag von anke » Mi 24. Feb 2016, 17:52

Hallo Moendel

ja, da hat sich ein kleiner Knoten eingeschlichen ;)

Also wenn du das Menü 1 mit 120 px Breite angibst, musst du den Innenabstand von #inhalt auf links 130px setzen, wenn du einen 10 px breiten Abstand zum Menü haben möchtest.

In der Vergangenheit haben FF und IE die Abstände unterschiedlich definiert. Deshalb sollte nach Möglichkeit nur eine Art von Abstand verwendet werden. Wenn du dich für den Innenabstand entscheidest, musst du daran denken, dass die Elemente sich überlappen, wie hier beim Menü 1.

Mir sind auch noch ein paar andere Dinge aufgefallen, du machst immer noch einen #body, dabei ist body schon eine ID, denn es gibt sie nur einmalig auf einer Webseite und sollte deshalb nicht als ID angelegt werden, sondern einfach nur als Elementen-Stil also einfach nur body ;)

Dann ist mir aufgefallen, dass du Schriftgrößen alle in proportionaler Form anlegst. Der body beinhaltet die gesamte Seite. Wenn du darin eine Schriftgröße angibst, sollte diese in px angegeben werden. Alle anderen abweichenden Angaben zur Schriftgröße im Kopf, Footer, Menü oder später die verschiedenen Überschriften, werden dann prozentual von dieser festen Größe berechnet.

Beispiel: Du möchtest, dass die Schrift auf deiner Webseite in 14 px angezeigt wird

Code: Alles auswählen

body {
 font-size: 14 px;
}
Die Schrift im Kopf soll 3 Mal so groß angezeigt werden

Code: Alles auswählen

#klopf {
font-size: 3em;
}
im Footer soll die Schrift hingegen nur 2/3 der Größe haben

Code: Alles auswählen

#footer {
font-size: 0.75 em;
}
Die Zeilenhöhe sollte auch nur in der Menüleiste eingestellt werden, um die Schrift im Menü zu zentrieren. Sonst stelle sie nicht ein, sonst könnte es passieren, dass dadurch die Schrift oben abgeschnitten wird.

Viele Grüße
Anke

Antworten