Schlagwort-Archiv: Stylesheet

20 Minuten sieht Schwarz

Dieser Beitrag wurde unter Gesehen abgelegt und mit , , , verschlagwortet am von .

20 Minuten sieht Schwarz

20 Minuten sieht Schwarz

Anstelle des normalen Stylesheets bindet 20Minuten – wie beim Rivella Gelb – eine dunklere Variante ein. Die ganze Website sieht so ziemlich zum kotzen aus (vorher eigentlich auch). Weiss jemand was diesmal dahintersteckt?

Update am Nachmittag:

Da ich halt immer die Werbung blockiere, habe ich leider nicht mitbekommen, dass auf 20 Minuten für M geworben wird. M ist der neue Burger von McDonalds mit Salat, Tomanten und Emmentaler-Käse in einem kleinen Ciabatta-Brötchen.

Mike hat das ganze schnell aufgelöst.. Und ich glaube, bei ihm funktionieren die Permalinks nicht so ganz… ;-)

The M is near

The M is near

Horizontal zentrierte Layouts

Dieser Beitrag wurde unter Technik abgelegt und mit , , verschlagwortet am von .

Bekanntlich führen viele Wege nach Rom. Heute möchte kurz auf die Möglichkeiten eingehen, mit denen man einen Container oder ein ganzes Layout horizontal zentriert ausrichten kann!

Negative Margins

Eine interessante Möglichkeit, die vor allem für Layouts mit einer festen Breite geeignet ist, bieten negative Margins. Mit negativ ist hier der Wert des Margins gemeint. Zum Beispiel: margin: 0 -10px 0 0;

Meine Lösung für einen Container mit einer Breite von 500px sieht somit auch ziemlich ähnlich aus:

body {margin:0px; padding:0px;} /* Für die Cross-Browser Kompatibilität */

#Content {
	position:absolute;
	left:50%;
	width:500px;
	margin-top:50px;
	margin-left:-266px; /* Halbe Breite + Padding + Rand = -266px */
	padding:15px;
	border:1px dashed #333;
	background-color:#eee;
	}

Das ist eigentlich selbsterklärend, doch ich möchte noch genauer darauf eingehen, was da genau passiert. Der Container wird zuerst durch position:absolute; left:50%; ins horizontale Zentrum geschoben. Danach wird der linke Aussenabstand auf minus die Hälfte der Box gesetzt. Wichtig hierbei ist, dass man Innenabstand und Rahmen auch berücksichtigt. In meinem Beispiel ist das also margin-left:-266px;

Auto-Width Margin

Die CSS-Eigenschaft Margin bietet von Haus aus eine nette kleine Funktion, mit der das horizontale Zentrieren von Containern zum Kinderspiel wird. Das funktioniert auch in allen gängigen Browsern mit CSS2-Support.

Nur der Internet Explorer 5 (Windows) macht uns einen Strich durch die Rechnung. Der IE wendet das text-align Attribut bei Block-Level-Elementen falsch an, doch dafür gibt es eine kleine Lösung:

Wenn man beim übergeordneten Block-Leven-Element (meistens <body>) text-align: center; angibt, wird der Container korrekt ausgerichtet.
Dummerweise ist das text-align Attribut vererbbar, weshalb dann in anderen Browsern die Schrift wirklich rechts ausgerichtet wäre. Oft muss man text-align explizit auf das zentrierte Element anwenden, um den Auswirkungen der IE-Lösungen entgegenzuwirken. Das fertige Stylesheet sieht dann wie folgt aus:

body {
	margin:50px 0px; padding:0px; /* Für die Cross-Browser Kompatibilität */
	text-align:center; /* Hack für IE5/Win */
	}

#Content {
	width:500px;
	margin:0px auto; /* Reche und linke Aussenabstände auf
 "automatisch" eingestellt */
	text-align:left; /* IE5 Hack umgehen */
	padding:15px;
	border:1px solid #333;
	background-color:#eee;
	}

20Minuten sieht gelb

Dieser Beitrag wurde unter Gesehen abgelegt und mit , , verschlagwortet am von .

20Minuten

20Minuten

Das Nachrichtenportal 20Minuten (zumindest die Startseite) scheint seit heute eine neue Hintergrundfarbe zu haben. Anstelle des einzig wahren Weiss, macht sich jetzt der Farbwert #E5EE77 selbstständig. Im Quellcode entdeckt man dieses Gelb an mehreren Stellen und meist mit einem !important deklariert. Die externen Stylesheets sind auch z.B. so benannt:

  • 20_2007_gelb.css
  • front_2007_gelb.css
  • front_gelb.css

Wie man sieht, taucht das Jahr 2007 auf  und auch nur die Startseite ist betroffen. Ob es sich hier um einen Scherz der Webdesigner handelt, kann ich nicht sagen. Jedenfalls hat man sich Mühe gegeben, denn sogar das Logo ist in diesem knalligen Gelbton gehalten!