Wie style ich einen Link? - Eine Schritt-für-Schritt-Anleitung (Tutorial)

Was haben wir hier gemacht?

So, nun fängt unser Menu langam an, wie ein echtes Menu auszusehen. Bisher hatte es sich so ziemlich in der oberen linken Ecke versteckt. Mit dem Selektor #menu a oben im Style-Tag, der sich im Kopfteil befindet, definieren wir einen Stil für alle A-Elemente, die Nachfahren des Elementes mit der ID "menu" sind. #menu a nennt man einen Selektor. Das kommt aus dem Englischen und bedeutet etwas, das auswählt. Mit Selektoren können wir also bestimmte Elemente innerhalb unserer HTML-Datei herauspicken, also selektieren, und ihnen einen Stil zuweisen. Genau das haben wir nun gemancht:


#menu a { 
	  	text-decoration:none;
		font-size:1.6em;
		padding-right: 10px;
		padding-left: 10px;
		border-right: 1px solid #C85000;
}

Hier der Sourcecode der Seite.

Mit text-decoration: none; entfernen wir die Unterstreichung, da die Links ganz oben zu sehen sind, und es so üblich ist, brauchen wir die Unterstreichung nicht mehr. Um die Links als solche zu kennzeichnen, haben wir auch einen kleinen Strich rechts vom Link platziert. Das geht, indem wir einen Rahmen festlegen für #menu a, diesen aber nur auf der rechten Seite des Elementes setzen (border-right: 1px solid #C85000;). Padding können wir nicht setzen, dafür aber padding-left und padding-right. Das ist wichtig, damit die Striche nicht direkt neben dem Link platziert sind. Padding ist eine Kurzschreibweise und beinhaltet auch padding-top und padding-bottom. Diese Eigenschaften können wir aber für das A-Element nicht setzen, da es ein Inline-Element ist. Du kannst natürlich die Eigenschaften setzen, aber sie haben keine Wirkung. Daher haben wir dem umarmenden Div-Element ein Padding gegeben, so dass auf jeder Seite 30 Pixel Abstand ist:


   #menu { 
   		 background:#444444;
		 padding:30px;
}
 

Was ist responsive Webdesign?

Wie du gesehen hast, ist ein Pixel kein Pixel. Man kann sich darauf also nicht verlassen. Das heißt der Pixel ist keine absolute Größe mehr. Der Pixel war damals noch auf dem Bildschirm sichtbar, bevor die vielen mobilen Geräte mit den unterschiedlichsten Größen aufgetaucht sind. Man muss versuchen, seine Seite für alle Geräte anzupassen. Diese Art zu programmieren, nennt man responsive Webdesign. Der Webdesigner ist zudem von den Default-Einstellungen und dem Browserverhalten abhängig, das die Browserhersteller implementieren. Daher ist Testen auf vielen Plattformen ziemlich wichtig. Ich glaube deshalb, unter den unzähligen Maßeinheiten, die CSS bietet, ist em die interessanteste Größe. Sie ist eine relative Maßeinheit für die Vertikale Größe der Schrift. Die Angabe der Einheit bezieht sich immer auf das Elternelement. Auf dieser Seite findest du eine detaillierte Erklärung. Für den Webdesigner ist die Relativität jedoch am wichtigsten, wichtiger, denke ich, als alle Einheiten genau zu verstehen und detailliert zu kennen. Die Angabe von z.B. 1.5 em bezieht sich auf das Elternelement und bedeutet, dass das Element 1,5 mal so groß ist wie sein Elternteil.

Ich bin 1em groß.
Ich bin ein DIV im DIV mit 1.5 em.
Und ich ein DIV im DIV im DIV mit 1.5 em

Das ist wieder die Kaskade in Aktion, d.h. Eigenschaften können vererbt werden von oben nach unten.

Kaskade zur Veranschaulichung der CSS-Kaskade Bildrechte Kaskade zur Veranschaulichung der CSS-Kaskade Bildrechte