✔ Grafisches Menü im Header

Status
Nicht offen für weitere Antworten.
M

mariographics

Hey,
habe einen Header mit einer Navigation drin.
Bild: [IMG ]http:/mariographics.de/upload/images/bf_03.png[/IMG ]

Habe das früher mit html gemacht möchte es jetzt aber mit css machen.

Code:

<table id="Tabelle_01" width="868" height="208" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="Bilder/original_03_01.png" width="868" height="130" alt=""></td>
</tr>

<tr>
<td rowspan="2">
<img src="Bilder/original_03_02.png" width="29" height="78" alt=""></td>
<td>
<a href="home.php">
<img src="Bilder/home.png" width="102" height="40" border="0" alt=""></a></td>
<td>
<a href="graphics.php">
<img src="Bilder/graphics.png" width="105" height="40" border="0" alt=""></a></td>

<td>
<a href="designs.php">
<img src="Bilder/designs.png" width="104" height="40" border="0" alt=""></a></td>
<td>
<a href="requests.php">
<img src="Bilder/requests.png" width="104" height="40" border="0" alt=""></a></td>
<td>
<a href="archiv.php">
<img src="Bilder/archiv.png" width="104" height="40" border="0" alt=""></a></td>

<td>
<a href="sonstiges.php">
<img src="Bilder/sonstiges.png" width="104" height="40" border="0" alt=""></a></td>
<td rowspan="2">
<img src="Bilder/original_03_09.png" width="216" height="78" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="Bilder/original_03_10.png" width="623" height="38" alt=""></td>

</tr>
</table>

Ich habe keine Ahnung wie ich das mit css machen kann damit es genau gleich aussieht wie auf dem bild. Habe schon viele Sachen probiert hat aber nie geklappt.

Außerdem möchte ich dass wenn man über einen Button fährt, ein weiteres aufklappbares menü kommt (kein Ahnung wie das heißt).

Wäre schön wenn mir jemand codes oder Tipps geben könnte.
Wenn mir jemand den ganzen header und die navi coden würde bitte melden (bekommt natürlich auch einen kleinen Werbeplatz auf meiner Seite) würde dann die Bilder schicken.

Würde mich über Hilfe freuen!!

mfg Elias
 
Hi,

ein Menü wird zunächst mal mit einem Listenelement ausgezeichnet:
HTML: 
<ul id="menu">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Graphics</span></a></li>
    <li><a href="#"><span>Designs</span></a></li>
    <li><a href="#"><span>Requests</span></a></li>
    <li><a href="#"><span>Archiv></span</a></li>
    <li><a href="#"><span>Sonstiges></span</a></li>
</ul>
und anschliessend mit CSS wie folgt formatiert, um es horizontal auszurichten, und den Linktext auszublenden:
CSS: 
#menu {
list-style:none;
margin:0;
padding:0;
}
#menu li {
display:inline;
}
#menu a {
float:left;
}
#menu a span {
display:none;
}

Im zweiten Schritt erhalten nun die Menüpunkte ihren grafischen Hintergrund.

Hierfür erhält jeder Menüpunkt einen eindeutigen ID-Bezeichner:
HTML: 
<ul id="menu">
    <li><a href="#" id="home"><span>Home</span></a></li>
    <li><a href="#" id="graphics"><span>Graphics</span></a></li>
    <li><a href="#" id="designs"><span>Designs</span></a></li>
    <li><a href="#" id="requests"><span>Requests</span></a></li>
    <li><a href="#" id="archiv"><span>Archiv</span></a></li>
    <li><a href="#" id="sonstiges"><span>Sonstiges</span></a></li>
</ul>
über den sich sein Hintergrundbild zuordnen lässt:
CSS: 
#menu a#home {
width:102px; /* entspricht der Grafikbreite */
height:40px;  /* entspricht der Grafikhöhe */
background:url(Bilder/home.png);
}
#menu a#graphics {
width:105px; /* entspricht der Grafikbreite */
height:40px;  /* entspricht der Grafikhöhe */
background:url(Bilder/graphics.png);
}
/* usw. */

Technische Lösungsansätze für ein sog. "Dropdown-Menü" findest du beispielsweise bei Stu Nicholls.

mfg Maik
 
Hey.
danke für die schnelle antwort!!
Werde es gleich mal ausprobieren.

mfg Elias
 
ok danke werd ich auch noch brauchen!

Habe das mit dem Menü ausprobiert aber i-wie zeigt es dass bei mir nicht an....
Woran kann das liegen?

mfg Elias
 
Was wird nicht angezeigt: die Linktexte, oder die Hintergrundbilder?

Wie lautet dein aktueller Code?

mfg Maik

//edit: Okay, hat sich dann wohl erledigt ;-)
 
ja danke hat sich erledigt!
Nur noch eine Frage.
Wie kann ich das Menü beliebig i-wo hinplatzieren?
Mit top und left oder wie mache ich das.
Das Menü soll das ein wie auf dem Bild.

mfg Elias
 
Beispielsweise so:
CSS: 
#menu {
list-style:none;
margin:50px 0 0 10px; /* Außenabstand oben - rechts - unten - links */
padding:0;
}

mfg Maik
 
klappt bei mir nicht...
bei mir sieht dass jetzt so aus:
http://mariographics.de/upload/images/Unbenannt.jpg

Meine Codes: css
Code: 
menu {
list-style:none;
margin:50px 20px 40px 10px; /* Außenabstand oben - rechts - unten - links */
padding:0;
}

#menu li {
display:inline;
}
#menu a {
float:left;
}
#menu a span {
display:none;
}

#menu a#home {
width:102px;
height:40px;
background:url(Bilder/home.png);
}
#menu a#graphics {
width:105px;
height:40px;
background:url(Bilder/graphics.png);
}

#menu a#designs {
width:105px;
height:40px;
background:url(Bilder/designs.png);
}

#menu a#requests {
width:105px;
height:40px;
background:url(Bilder/requests.png);
}

#menu a#archiv {
width:105px;
height:40px;
background:url(Bilder/archiv.png);
}

#menu a#sonstiges {
width:105px;
height:40px;
background:url(Bilder/sonstiges.png);
}


Html:
Code: 
<!-- Menü -->

<ul id="menu">
    <li><a href="#" id="home"><span>Home</span></a></li>
    <li><a href="#" id="graphics"><span>Graphics</span></a></li>
    <li><a href="#" id="designs"><span>Designs</span></a></li>
    <li><a href="#" id="requests"><span>Requests</span></a></li>
    <li><a href="#" id="archiv"><span>Archiv</span></a></li>
    <li><a href="#" id="sonstiges"><span>Sonstiges</span></a></li>
</ul>

mfg Elias
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück