Willkommen auf dem Portal für Mediengestalter

Xorbitant · Threadersteller

Hey ich hoffe mir kann jemand helfen. Ich muss die Website für unsere Abschlussausstellung programmieren und bekomme das mit dem Menü nicht hin.

https://www.dropbox.com/s/hn4mo2m2i9egbct/Bildschirmfoto%202014-05-07%20um%2009.30.44.png

Das französische Anführungszeichen soll vor jedem Menüpunkt auftauchen aber immer nur vor dem über den man gerade fährt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="stylesheet_divers2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content">
<a id="diverses" style="position: absolute; top: 5px; left: 5px; z-index: 2;" href="intro.html">
</a>
<a id="diversi" style="position: absolute; top: 5px; left: 5px; z-index: 2;" href="intro.html">
</a>
<a id="erreichen" style="position: absolute; top: 5px; left: 5px; z-index: 2;" href="intro.html">
</a>
<a id="dankt" style="position: absolute; top: 5px; left: 5px; z-index: 2;" href="intro.html">
</a>
<a id="impressum" style="position: absolute; top: 5px; left: 5px; z-index: 2;" href="intro.html">
</a>
<div id="diversesh" style="position: absolute; top: 5px; left: 5px; z-index: 0;">
<img src="Bilder/zeichen.png" />
</div>
<div id="navi" style="position: absolute; top: 5px; left: 5px; z-index: 1;">
<img src="Bilder/menü.png" />
</div>
<div id="logo">
<img src="Bilder/logo.png" />
</div>

</div>

</body>
</html>

CSS

#content {
width: 1800px;
height: 900px;
position: absolute;
}

#diverses {
width: 200px;
height: 40px;
margin-top: 300px;
margin-left: 300px;
}

#diversi {
width: 310px;
height: 55px;
margin-top: 342px;
margin-left: 285px;
}

#erreichen {
width: 160px;
height: 50px;
margin-top: 402px;
margin-left: 410px;
}

#dankt {
transform:rotate(7deg);
width: 280px;
height: 40px;
margin-top: 458px;
margin-left: 310px;
}

#impressum {
width: 150px;
height: 35px;
margin-top: 495px;
margin-left: 280px;
}

#diversesh {
width: 25px;
height: 25px;
background-color: #006;
margin-top: 500px;
margin-left: 245px;
}

#navi {
width: 325px;
height: 400px;
float: none;
margin-top: 300px;
margin-left: 275px;
}

#logo {
width: 200px;
height: 200px;
float: left;
margin-top: 110px;
margin-left: 425px;
}

SimonDerDude · **Verfasst** Mi 07.05.2014 10:15 **Titel**

Was hat dich denn dazu geritten zu sagen dass du das übernimmst?

Da läuft so viel aus dem Ruder dass es schwer ist dir eine vernünftige Antwort zu geben.
Dein Strukturansatz ist bereits falsch und da du weder mit alten noch neuen Technologien vertraut bist kann man dir den Code fast nur vorkauen.

image maps lassen sich nicht einfach mit :hover Zuständen belegen ...

Du könntest versuchen das Bild so auseinander zu schneiden, dass du jeden Menüpunkt als Bild in ein <a>-Element verschachteln kannst. Mit einer Linkliste wärst du in der Lage dem Listenelement das Anführungszeichen im :hover Zustand als Hintergrundbild zu übermitteln. [etwa so]

//edit habe gerade gesehen dass du die Links schon lustig herum gedreht hast.
Es gäbe noch die Möglichkeit die Pseudoklasse :before zu nutzen ... [ etwa so ]
Ob das so geil ist weiß ich nicht, man muss viel händisch machen ... die Rotation der Links muss für die :before Grafik wieder zurückgedreht werden.

Willkommen auf dem Portal für Mediengestalter

Thema: menüpunkte vom 07.05.2014

menüpunkte