Aufgabe 4 - Blog Veränderung

sophie.schiesser.uni-linz, 3. November 2014, 00:40

Ich habe meine Blog schlicht mit kleinen farblichen Akzenten wie den farbigen Beitragsüberschriften sowie des Untertitels und dem Twitter Feed gestaltet und den Blog mittig gesetzt.

# Mittiges Layout

Um den Blog mittig auszurichten, wurde ein div-Element mit der ID „container“ um die Grundelemente (header, content, footer) des Blogs gelegt. Dieses Element wurde dann eine fixe Breite (768 Pixel) zugewiesen und mittig angeordnet. Um dies umzusetzen, wurde wie schon erwähnt eine feste breite im Stylesheet mit „width: 768px;“ festgelegt. Um dieses Element nun in der Mitte zu positionieren, wurde ihm die Eigenschaft „margin: 0px auto“ zugewiesen. Somit ist der Außenabstand nach Oben und Unten mit 0px fixiert und dadurch, dass sich die Außenabstände an der linken und rechten Seite automatisch ergeben (Wert „auto“), positioniert sich das container-Element immer mittig.

 

# Farbliche Anpassung

Dem header wurde ein anderer Hintergrund mit der CSS-Eigenschaft „background-color“ zugewiesen. Weiters wurden die Farbe des Untertitels mit der Eigenschaft „color“ angepasst. Wichtig ist dabei, dass es bei der Frage von Texten keine Eigenschaft „text-color“ gibt, wie man vielleicht im Bezug auf den Hintergrund mit der Eigenschaft „background-color“ vermuten könnte, sondern hier lediglich die Funktion „color“ verwendet wird. Ebenfalls wurde die Überschrift der einzelnen Blog-Posts farblich angepasst. Dabei wurde dem a-Element, welches sich in einem h2-Element befindet, im Stylesheet die color-Eigenschaft verändert.

 

# Twitter

Die Einbettung des Twitter Feeds erfolgte durch das Erstellen des Widgets im Twitter Account unter dem Bereich „Widgets“ und der Suchanfrage „#webwi“. Für den Hintergrund des Feeds wurde die Farbe dunkelgrau passend zum header des Blogs ausgewählt.

Die Linkfarbe wurde orange-gelb mit dem Untertitel gleichgesetzt.

Nach dem Abspeichern wurde der HTML Code des Feeds kopiert und auf der Main Page eingefügt.

0 comments :: Kommentieren


To prevent spam abuse referrers and backlinks are displayed using client-side JavaScript code. Thus, you should enable the option to execute JavaScript code in your browser. Otherwise you will only see this information.