therapiekind
Threadersteller
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst So 29.04.2007 19:23
Titel [CSS] Navigationsliste mit Bildern/Icons à la Desktop |
  |
|
Cheerio,
bin dabei eine Navigationsliste zu erstellen, bei der die einzelnen Listenelemente jeweils ein Bild plus Beschriftung enthalten. Die Beschriftung geht unter das Bild, beide sollen im Listenelement zentriert sein. Wie auf jeder normalen Desktop-Umgebung. Zudem soll die Navigation auf der Seite zentriert sein. Pixelangaben will ich vermeiden, der Beschriftungstext sollte skalierbar sein (sonst wäre es einfach). Ich denke, da liegt auch das Problem.
So sollte es aussehen:
Ich bin eigentlich recht fit, was HTML und CSS angeht, aber hier komm ich irgendwie nicht weiter. Habe schon alle mir einfallenden Möglichkeiten (floats, display:inline/block, margins etc.) ausprobiert, aber irgendwie klappt das eine oder andere nicht.
Das HTML-Grundgerüst sieht so aus:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="typeof_undefined.css" type="text/css" media="screen" charset="utf-8" />
<title>typeof undefined</title>
</head>
<body>
<div id="page">
<ul id="navigation">
<li><a href="#"><img src="home_icon.png" alt="Home" title="Home" />Home</a></li>
<li><a href="#"><img src="blog_icon.png" alt="Blog" title="Blog" />Blog</a></li>
<li><a href="#"><img src="doodles_icon.png" alt="Doodles" title="Doodles" />Doodles</a></li>
<li><a href="#"><img src="helpabout_icon.png" alt="Help/About" title="Help/About" />Help/About</a></li>
</ul>
<div id="content">
<p>Blabla.</p>
</div>
</div>
</body>
</html> |
Zuletzt bearbeitet von therapiekind am So 29.04.2007 19:28, insgesamt 2-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
