Formatierung mittels CSS klappt nicht

[Regina Schaukrug]

<a href="aktuelles.html"><img src="images/icon_01.png" alt="" width="107" height="168"></a>

Noch nicht. Wenn Du den Link schon als Grafik präsentierst, dann bitte mit besetztem title und alt.

Dann wäre noch die Sache mit dem Icon. Das kann man mit CSS formatieren.

img.HauptMenueIcon {
   width:  107px;
   height: 168px;
}

(Größenangabe besser in rem)

<a href="aktuelles.html" title="Aktuelles aus der Praxis"><img class="HauptMenueIcon" src="images/icon_01.png" alt="icon"></a>

Zuletzt stellt sich die Frage, ob der Text wirklich Teil der Grafik sein muss. HTML kann prima Text darstellen. Dann erübrigt es sich auch eine Div-Suppe anzurühren:

Statt also eine div-Suppe zu rühren:

<div id="icon_01"><a href="aktuelles.html"><img src="images/icon_01.png" alt="" width="107" height="168"></a></div>
…

kann man - ich sagte ja schon: auf HTML5 umstellen - so loslegen:

<nav class="MainNav">
   <a href="aktuelles.html" Accesskey="A">Aktuelles</a>
   …
   <a href="anfahrt.html" Accesskey="f" >Anfahrt</a>
</nav>

und im CSS:

#accesskeys{
   text-decoration: underline;
}

nav.MainNav a:link {
    display: inline-block; 
    height: 18.8rem;
    width:  11rem;

    background-repeat: no-repeat 
    background-position: top, center;
    padding-top: 17.3rem;
    text-align: center;
}


nav.MainNav a:hover, nav.MainNav a:focus {
  …
}


nav.MainNav a:active {
  …
}

nav.MainNav a:target {
  …
}


nav.MainNav a [href="aktuelles.html"] {
   background-image: url("/icons/aktuelles.png");
}

nav.MainNav a [href="anfahrt.html"] {
   background-image: url("/icons/anfahrt.png");
}

Auch kannst Du aus <div id="header"> einfach <header> machen. footer gibt es auch...

<p>
<strong>Herzlich Willkommen auf meiner Website!</strong>
</p>

<h2>Herzlich Willkommen auf meiner Website!</h2>

Gunnar als unser Hardcore-Benutzbarkeitswächter sagt Dir sicherlich was noch fehlt.