Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 05 - Teil 3 - Feingeschliffen
zurück: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? weiter: Kapitel 05 - Teil 2 - Butter bei die Fische Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
21. Dez 2007, 16:48
Rufname:
Wohnort: Aachen

Kapitel 05 - Teil 3 - Feingeschliffen - Kapitel 05 - Teil 3 - Feingeschliffen

Nach oben
       

·Kapitel 05 - Teil 3 - Feingeschliffen


Hallo zusammen,

Layout steht, Menü steht. Es bleiben also nur noch die Formatierungen für die Inhalte.
Die Schriftfamilie, -größe und –farbe haben wir bereits im body für das gesamte Dokument festgelegt. Nun müssen noch die Überschriften und Ausnahmen definiert werden. Mit den Überschriften ist es ja nicht schwer. Wir haben eine Seitenüberschrift in blau. Die ist unsere Überschrift ersten Grades, h1:

h1{
color: #495b95;
font-size: 16px;
font-weight: bold;
line-height: 20px;
}


Die Eigenschaft line-height ist gesetzt, um den Abstand nach oben und unten zu erhöhen. Normalerweise hat eine Schriftfamilie eine eigene, ihr zugehörige Zeilenhöhe.
Diese Eigenschaft kann mittels line-height manipuliert werden.

Unsere zweite Überschrift ist, im Vergleich zur definierten Standardschrift, nur fett.
Sie ist unsere Überschrift zweiten Grades, h2:

h2{
font-size: 11px;
font-weight: bold;
line-height: 10px;
}


Ebenso wie bei der Überschrift ersten Grades muss hier die Schriftgröße definiert werden, da für die Überschriften bereits das Standardstyle des Browsers eine Größe vorgibt. Wird diese Angabe nicht gemacht, setzt der Browser seine vorgegebene Schriftgröße. Versucht es einfach mal, indem ihr die Angabe font-size auskommentiert, abspeichert und euch das Ergebnis im Browser anschaut. Die Zeilenhöhe ist hier verringert, da das Standardstyle des Browsers für die Überschrift als Blockelement einen größeren Abstand vorsieht.

Eine weitere Angabe sollte auch stets gemacht werden: Den Rand für Bilder auf Null zu setzen. Die Browser verpassen eingefügten Bildern, wenn sie verlinkt werden, einen unschönen Rahmen. Dies ist bei Navigationselementen in Bildform nicht wirklich erwünscht. Wer es möchte, kann an dieser Stelle den Rahmen belassen und vielleicht eine eigene Farbe festlegen. Ansonsten sollte diese Angabe einfach mal per se gemacht werden.

img{ border: 0px;}

Um die Inhalte zu formatieren, sollten wir jetzt dummiemäßig Überschriften und Texte in das HTML-Dokument einfügen. Am Ende des Kapitel ist wieder einen Blindtext zum runterladen, den ihr dafür verwenden könnt. Dieser kommt in den Bereich inhalt:



Speichert das Dokument und betrachtet es im Browser. Natürlich ist der Text, wie anfänglich beim Menü, zentriert dargestellt. Also muss in dem Stylesheet für den Container #inhalt der Textfluss wieder auf links gesetzt werden.

#inhalt{
text-align: left;
left: 148px;
top: 130px;
width: 632px;
height: 400px;
position: absolute;
}


Nun steht der Text wieder linksbündig, allerdings ohne einen Abstand. In unserem Entwurf hatten wir einen linken Abstand von 40 Pixel vorgesehen, die Überschrift sitzt auch ein wenig tiefer. Versuchen wir einfach mal ein padding von 40px zu setzen und schauen es uns im Browser an. Nach links ist der Abstand in Ordnung, nach rechts fließt der Text aber über den Container hinaus. Erinnern wir uns an das Boxmodell, so wissen wir, dass sich die gesamte Breite einer Box aus Außenabständen, Rändern, Innenabständen und der Breite des Inhaltes zusammensetzen. Das heißt, wenn wir beidseitig jeweils 40 Pixel als Innenabstand setzen, müsste die Box rechnerisch um 80 Pixel schmaler gemacht werden. Tatsächlich sind es 120 Pixel, die die Box schmaler sein muss. Der linke Innenabstand vergrößert die Breite um 40 Pixel und verschiebt den Inhalt entsprechend weit nach rechts. Damit steht der Text rechts um 40 Pixel "über". Mit dem rechten Innenabstand wird der Text zwar wieder zurück geschoben, aber es fehlt optisch der Abstand nach rechts. Also müssen noch mal 40 Pixel rechts hinzugerechnet werden.

Oder wir gehen einfach hin und versetzen die Position des Containers 40 Pixel nach rechts und machen sie 80 Pixel schmaler (statt des rechten Innenabstands). Damit haben wir die Fehlerquellen bei älteren Versionen des IE, die das Boxmodell nicht richtig wieder geben, umschifft. Damit die Überschrift auch wie gewünscht positioniert ist, setzen wir die Angabe top von 130px auf 164px. Im Firefox dürfte es nun unserem Layout entsprechen, nur wieder der IE ... Da gilt es wieder in die Trickkiste zu greifen und ausschließlich den IE mit einer Anweisung anzuweisen. Dies geht mit dem Universal-Selektor, der über das Elternelement html dessen Kindelement #inhalt anspricht:

*html #inhalt{ top: 174px;}

Notiert diesen Hack unterhalb der Angaben des Containers #inhalt, dann habt ihr entsprechende Angaben immer im Blick. Mit den Werten müsst ihr ein wenig rumprobieren – pi x Daumen sind es um die 10 Pixel mehr als im Firefox. Wenn es irgendwie möglich ist, testet euere Seite mindestens in diesen beiden Browsern. Es sind diejenigen, die am weitesten verbreitet sind und die Darstellung kann deutlich voneinander abweichen.

Die Zeilenabstände des Fliesstextes sind in ihrer Standardeinstellung ein wenig zu eng, um einen angenehmen Lesefluss zu erhalten. Mit line-height erhöhen wir den Zeilenabstand auf 14px bis 16px.

Schauen wir uns die Seite jetzt im Browser an, so scheint es, dass wir fertig sind. Nun wird es Zeit, die Seite auf den Normalfall zu testen. Unser Text ist ja nicht so wahnsinnig lang. Wie sieht es eigentlich aus, wenn mehr Inhalte da sind? Kopieren wir dazu den letzten Absatz - <p>Text</p> - und fügen ihn 5-6 Mal hintereinander ein. Jetzt ist der Inhalt so lang, dass wir im Browser scrollen können, und was sehen wir da? Der Hintergrund hört irgendwann auf! Im Container #content haben wir noch eine Höhe von 100% stehen. Dies ist die sichtbare Höhe im Browser. Unterhalb davon wird der Hintergrund nicht mehr gekachelt. Da haben wir jetzt natürlich ein Problem. Wer jetzt eine CSS Referenz im Kopf hat, der weiß, dass ein gekacheltes Hintergrundbild nicht vererbbar ist. Es wird also das Hintergrundbild des Containers #content nicht an das Kindelement #inhalt weitervererbt. Einzig beim body wird das Hintergrundbild entsprechend der Inhalte gekachelt. Jetzt müssen wir den Aufbau noch mal überdenken und sehen, wie wir die Sache gelöst bekommen. Verbreitern wir unser #inhalt-Container soweit, dass er das Hintergrundbild des #content-Containers kacheln kann, müssen wir das Menü dort integrieren. Dort fängt es dann an kompliziert zu werden.

Wenn wir allerdings wissen, dass der body zuverlässig das Hintergrundbild kachelt, wäre es eine Möglichkeit den gesamten Hintergrund derart auszuwählen, dass er in Gänze gekachelt wird. Einzig der Farbverlauf wird in die andere Richtung gekachelt. Wir könnten ihn so, wie geplant und entworfen, nicht mehr einbauen. Er würde sich als ein Streifenmuster wiederholen. Würden wir den Hintergrund horizontal anlegen, so bekommen wir ein Problem mit der Hintergrundfarbe, bzw. der Zentrierung der Seite. Da nur eine Hintergrundfarbe gesetzt werden kann, müssen wir uns entscheiden, ob hellblau oder orange. Zu einer Seite wird es bei der Zentrierung immer einen Farbbruch geben.

Wenn ihr mir bis hierhin folgen konntet, entscheide ich mich für eine kleiner Veränderung in dem Layout, um möglichst wenig von dem, was wir bisher gemacht haben zu verändern. Unser #head-Bereich ist 200 Pixel hoch. Ich werde den Farbverlauf auf 200 Pixel reduzieren und ihn in einem besonderen Container über die gesamte Breite kacheln lassen. Als Hintergrundgrafik für den body nehme ich den Ausschnitt, den wir für den #content-Container ausgewählt hatten, diesmal aber mit einem orange-farbenden Hintergrund. Damit haben wir auch das Transparenzproblem des IE ausgebügelt.

Also bemühen wir den Gimp noch mal. Speichert euren Originalentwurf mit einer neuen Versionsnummer ab, z.B. entwurf02.xcf. Sucht eure ziehender-Farbpalette heraus und stellt als Vordergrundfarbe das hellere Orange ein. Anschließend erstellt ihr eine neue Ebene mit der Vordergrundfarbe als Hintergrundfarbe. Erstellt eine weitere Ebene mit einer Höhe von 200 Pixel und transparenten Hintergrund und benennt sie Verlauf. Die erste verschiebt ihr in der Ebenenpalette ganz nach unten und die zweite direkt darüber. Die alte Hintergrundebene wird mit einem Klick auf das Auge unsichtbar gemacht. In der Werkzeugpalette stellt ihr die Vorder-/Hintergrundfarbe auf die Hintergrundverlaufsfarben ein. Aktiviert die Ebene Verlauf, wählt das Verlaufs-Werkzeug aus und zieht von dem unteren Ende der Ebene über ca. 2/3 der Höhe einen Verlauf. Der Verlauf sollte unten mit Orange beginnen. Die alte Hintergrundebene könnt ihr nun löschen und den orangenen Hintergrund entsprechend umbenennen. Speichert das Dokument und erstellt eine Kopie für die Auswahl des neuen Verlaufs. Geht, wie in den letzte Kapiteln beschrieben, vor und erstellt ein Rechteck von 200px Höhe, 4px Breite mit den Koordinaten UrsprungX = 0 und UrsprungY = 0. Exportiert das Bild als .jpg in höchster Auflösung. Mit einer weiteren Kopie des entwurf02.xcf erstellt ihr das gleiche Hintergrundbild, wie vormals für den #content-Container. Diesmal belasst ihr aber den orange-farbenden Hintergrund. Und die Grafik für den Kopf muss, wegen des veränderten Verlaufs, auch noch mal neu erstellt werden.

So, jetzt sollten wir wieder alles beisammen haben und können die Grafiken in den Containern austauschen. Im body schaut es dann so aus:

body{
padding: 0;
margin: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-image: url(images/bg.gif);
background-repeat: repeat-y;
background-position: center top;
background-color: #f2af3b;
}


Die Hintergrundgrafik wird nun in die Y-Richtung gekachelt und soll zentriert stehen. Wenn ihr für den Kopf denselben Dateinamen gewählt habt, sollte sich die Grafik automatisch aktualisiert werden. Sonst brauch dort nichts verändert werden. Für den Verlauf erstellen wir einen neuen Container mit einem ID-Selektor. Nennt ihn #verlauf. Dieser bekommt dann folgende Anweisungen:

#verlauf{
background-image:url(images/verlauf.jpg);
background-repeat: repeat-x;
background-position: left top;
height: 200px;
width: 100%;
}


Indem die Breite auf 100% gesetzt ist, erstreckt sich der Container über die gesamte Breite des Browsers. Jetzt muss natürlich der Container noch in dem HTML Dokument eingefügt werden. Dies geschieht direkt hinter dem body-Tag:



Gespeichert und im Browser betrachtet sieht es hervoragend aus. Lediglich der IE (Version 6) hat einen kleinen Versatz. Den können wir mit dem Hack, den wir schon auf den #inhalt-Container angewandt haben, beheben. Diesmal liegt er auf dem #content-Container:

*html #content{ margin-left: -406px;}

In dem #content-Container können nun auch alle Anweisungen rund um das Hintergrundbild entfernt werden. Schauen wir uns das Ergebnis wieder im Browser an und scrollen bis zum unteren Ende, so stellen wir fest, dass unten ein kleiner Abstand zum Browserrand nicht schlecht wäre. Ein padding-bottom: 40px; in dem #inhalt-Container erledigt das kurzerhand.

Das war’s schon, wir sind fertig.

Im head-Bereich könnt ihr nun noch diverse meta-Angaben machen, die sind ja in den Kapiteln über HTML beschrieben worden. Der Weg, den ich hier beschrieben habe, ist natürlich nicht der Weisheit letzter Schluss. Es ist eine Möglichkeit, wie man ein Webseitenlayout mit Hilfe des Boxmodells umsetzen kann. Andere Entwürfe bedingen auch andere Lösungswege. Ich hoffe aber, dass euch das Prinzip des Aufbaus ein wenig näher gekommen ist. Und vielleicht habt ihr auch Lust bekommen euch näher mit den Möglichkeiten von CSS zu befassen und ein wenig rumzuexperimentieren.


Übung...

Diesmal gibt's zwar auch keine Übungsdatei, aber ihr dürft Euch gern der Dateivorlagen aus den vorherigen Kapiteln bedienen.

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Dez 2007, 17:00
Rufname: maninweb
Wohnort: Aachen


AW: FINALE - IN WEINIGEN MINUTEN IST'S SOWEIT - AW: FINALE - IN WEINIGEN MINUTEN IST'S SOWEIT

Nach oben
       

Dieser Beitrag dient nur zur Sortierung
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 01 - Zielgruppendefinition 1 womaninweb 7448 21. Dez 2007, 17:06
maninweb Kapitel 01 - Zielgruppendefinition
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet 1 womaninweb 7815 21. Dez 2007, 17:06
maninweb Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 2 - Es lebt! 1 womaninweb 6526 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 2 - Es lebt!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5131 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6249 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 1 womaninweb 5415 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... 1 womaninweb 5232 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt 1 womaninweb 4736 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell 1 womaninweb 4909 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell 5 maninweb 4592 16. Sep 2008, 18:19
womaninweb Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Keine neuen Beiträge Workshop: Excel Projekte: Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen 0 Lukas Mosimann 30275 26. Apr 2008, 08:59
Lukas Mosimann Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft-Excel Diagramme