Horizontales Menü auf Homepage

[>Chris<]

Guten Tag an Alle!
Ich weis jetzt nicht ob ich hier richtig bin aber ich probiers einfach mal
Ich erstelle grade eine Homepage und möchte da jetzt eine horizontale Menüleiste unter dem Header einrichten. Für jeden Button hab ich ein 2 Bilder. Eins für den normalzustand und eins für den rollover Effekt und zur signalisierung auf welcher Seite man ist.
Jetzt hab ich mir schon viele Anleitungen bei google angeguckt aber die benuzten alle ungeordnete Listen und nehmen das gleiche Bild für jeden Button und machen die Schrift dann von der Liste rein.
Meine Button haben aber schon die Schrift. Wie ich für jeden Punkt in der Liste ein anderes Bild verwenden kann ist mir unklar

Kennt Jemand ein paar gute Anleitungen dafür oder kann mir weiterhelfen?

MfG >Chris<

 

[sabermaul]

Wie gut kennst du dich in HTML/CSS aus? Denn mit CSS wäre es einfach zu realisieren, wenn das Bild keinen Text enthält (dann einfach per CSS und hover das Bild austauschen).

Ich hatte deine Konstellation vor 4-5 Jahren mit Javascript laufen, war jedoch mMn nicht gut gelöst (wenn ich ein Bild austauschen wollte musste ich auch die nachfolgenden Variablen korrigieren, wobei ich damals noch nicht viel Ahnung von Javascript & Co hatte).

Du könntest jedem li eine eigene id geben und dann per CSS das Bild austauschen - wäre jedoch sehr umständlich.

Evtl. hat jemand anderes ja noch eine Idee. Ich würde aber wirklich darüber nachdenken, den Text aus dem Bild zu nehmen (außer du hast den Text so schön mit Photoshop o. ä. gemacht, dass der Text einfach so geschrieben nicht so gut rauskommt).

 

[A R 9 9]

Müßte funktionieren:

<p align="center">
<a href="die_seite.htm"><img src="images/bild_nr._1.jpg" vspace="" border="0"
onMouseOver="this.src='images/bild_nr._2.jpg'" onMouseOut="this.src='images/bild_nr._1.jpg'" title=" bla bla bla "></a>
--- für jeden Link eine neue Zeile ---
</p>

 

[sabermaul]

Genau. Nur waren bei mir die Pfade in durchnummerierten Variablen gespeichert - Chaos vorprogrammiert^^

 

[>Chris<]

Erstmal danke für die Antworten!

Du könntest jedem li eine eigene id geben und dann per CSS das Bild austauschen - wäre jedoch sehr umständlich.

Habe ich mir auch gedacht aber wie du sagst sehr umständlich und ich möchste den Code so sauber wie möglich halten.

Evtl. hat jemand anderes ja noch eine Idee. Ich würde aber wirklich darüber nachdenken, den Text aus dem Bild zu nehmen (außer du hast den Text so schön mit Photoshop o. ä. gemacht, dass der Text einfach so geschrieben nicht so gut rauskommt).

Also ich benutze einen speziellen Font den denk ich so gut wie keiner aufm Rechner hat und so weit ich das verstehe wird der Font ja nur von der Seite angegeben aber kanna uch nur benutzt werden wenn er auch auf dem PC bereit steht.

Müßte funktionieren:

Zitat:<p align="center">
<a href="die_seite.htm"><img src="images/bild_nr._1.jpg" vspace="" border="0"
onMouseOver="this.src='images/bild_nr._2.jpg'" onMouseOut="this.src='images/bild_nr._1.jpg'" title=" bla bla bla "></a>
--- für jeden Link eine neue Zeile ---
</p>

Ah das sieht schon sehr gut aus! Funktioniert soweit nur wie krieg ich die Buttons horizontal und nicht vertikal?
Ansonsten hätt ich gern noch etwas Platz zwischen den Buttons.

Auf jeden Fall danke für die Hilfe!

MfG >Chris<

 

[A R 9 9]

Die Buttons sollten sich automatisch nebeneinander reihen; du darfst nach dem </a> kein <br> setzen (=Zeilenumbruch).

Abstand zw. den Buttons: cellpadding="22" bzw. hspace="22"

Also

<p align="center">
<a href="die_seite1.htm"><img src="images/bild_nr._1.jpg" hspace="22" border="0"onMouseOver= ......></a>
<a href="die_seite2.htm"><img src="images/bild_nr._2.jpg" hspace="22" border="0"onMouseOver= ......></a>
<a href="die_seite3.htm"><img src="images/bild_nr._3.jpg" hspace="22" border="0"onMouseOver= ......></a>
</p>

 

[>Chris<]

Oh die Antwort war ja schnell^^
Ok habs grad hingekriegt. Ich mache das mit Dreamweaver und aus irgendeinem Grund musst ich das Programm erst einmal minimieren und wieder öffnen damit die sich richtig einreihen.
Hab jetzt aber nen anderes Problem :P
Ich hab die Buttons in die ID "menu" gepackt und die position auf "absolut" gesetzt damit die Buttons über dem Header erscheinen. Damit das ganze mittig ist hab ich aber einen wert für die höhe und seitliche lage eingegeben.
Die höhe passt sich an aber die seitliche lage geht so nciht denn wenn man das Browserfenster verkleinert/größert bleiben die button ja relativ zur Seite des Browserfensters.
Wie kann ich die denn relativ zum Header machen?

 

[A R 9 9]

50% (wobei ich momentan nicht genau weiß, wie es aussehen soll)

 

[>Chris<]

Ahh^^
Super es funktioniert
Jetzt hab ich in 10min das gemacht wofür ich vorher Stunden im Internet gelesen hab und auch noch ziemlich wenig Code benutzt
Danke nochmal für die Hilfe!
Wenn mir noch was einfällt schreib ich wieder

MfG >Chris<

 

[A R 9 9]

okidoki - have Fun

 

[>Chris<]

Mir is grad noch was eingefallen
Kann ich einstellen das der Homebutton, wenn man auf die Seite kommt, schon gedrückt aussieht?
Also das wäre dann das "onMouseout" glaub ich direkt angezeigt wird.

 

[A R 9 9]

Klar, kein Probolem.
Entweder per id="active" oder ganz einfach der home.htm entsprechend anders aussehenden Button zuweisen.
Du kannst auch allen Seiten einen "Active-Button" zuweisen damit man immer direkt sieht, welcher Button/welche Seite aktuell gewählt ist ...

 

[>Chris<]

Du kannst auch allen Seiten einen "Active-Button" zuweisen damit man immer direkt sieht, welcher Button/welche Seite aktuell gewählt ist ...

Ja so würd ich das gerne machen. Gibt es da einen Befehl für?
Ich hab jetzt "Active-Button" ausprobiert oder einfach nur "active" und so mit eingefügt

<a href="Home.html"><img src="../images/GL Button Home small.png" vspace="" border="0"
onMouseOver="this.src='../images/GL Button Home small press.png'" onMouseOut="this.src='../images/GL Button Home small.png'" active-button="this.src='../images/GL Button Home small press.png'" title="Home"></a>

das geht aber leider nich^^

 

[>Chris<]

Ok ich hab jetzt noch ein bisschen rumprobiert aber so wirklich klappen will das nich. Ich hab jetzt versucht jedem Button eine id zu geben und dann mit css das Bild ändern zu lassen wenn die Seite aktiv ist.
Also so: #home:active
und dann halt das Bild ändern lassen.
Da passiert aber irgendwie garnix
Kannst du mir das nochmal näher erklären?

MfG >Chris<

 

[A R 9 9]

Diese "Zuweisungen" befinden sich auf allen Seiten (ohne zusätzliches css !!!)

<p align="center">
<a href="seite1.htm"><img src="buttons/button_normal.gif" border="0" onMouseOver="this.src='buttons/button_over.gif'" onMouseOut="this.src='button_normal.gif'" title=" blablabla für seite 1 "></a><br>

<a href="seite2.htm"><img src="buttons/button_normal.gif" border="0" onMouseOver="this.src='buttons/button_over.gif'" onMouseOut="this.src='button_normal.gif'" title=" blablabla für seite 2 "></a><br>

<a href="seite3.htm"><img src="buttons/button_normal.gif" border="0" onMouseOver="this.src='buttons/button_over.gif'" onMouseOut="this.src='button_normal.gif'" title=" blablabla für seite 3 "></a><br>
.........
</p>

----------------------

Wenn die aktive Seite einen anderen Button zeigen soll (so ist es wohl gewünscht), entsprechend abändern:

<p align="center">
<a href="seite1.htm"><img src="buttons/button_normal.gif" border="0" onMouseOver="this.src='buttons/button_over.gif'" onMouseOut="this.src='button_normal.gif'" title=" blablabla für seite 1 "></a><br>

<a href="seite2.htm"><img src="buttons/button_diese-seite-aktiv.gif" border="0" onMouseOver="this.src='buttons/button_over.gif'" onMouseOut="this.src='button_diese-seite-aktiv.gif'" title=" blablabla für seite 2 "></a><br>

<a href="seite3.htm"><img src="buttons/button_normal.gif" border="0" onMouseOver="this.src='buttons/button_over.gif'" onMouseOut="this.src='button_normal.gif'" title=" blablabla für seite 3 "></a><br>
.........
</p>


Diese Zuweisungs-Änderung betrifft dann immer nur diese eine aufgerufene Seite.

Ergo das komplette <a href-Getipperte> in alle Seiten -ohne css-id's !- und den "Aktiv-Button" für eine entsprechende Seite abändern ...

---------------------------------------------------------------------------

Mittels CSS:

#menu ul li a.active
{
background: #000077 url('buttons/button_active.gif');
}

.............

In den Seiten sieht es dann so aus:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Seite1</a></li>
<li><a href="#">Seite2</a></li>
<li><a href="#">Seite3</a></li>
</ul>

Wiederum muß auf jeder einzelnen Seite das "Aktive" gesetzt werden ...
und du könntest nur einen Aktive-Button für alle Seiten vergeben

(oder noch umständlicher: in der css-datei "active1", "active2", "active3", ... für verschiedene Aktive-Buttons

 

[>Chris<]

Achsoo. Alles klar ich dachte man könnte etwas an dem code verändern damit das dann auf allen Seiten gleich ist.
Nagut ist zwar nen bisschen umständlicher so aber solange es funktioniert is mir das egal
Dann noch mal danke!

 

[sys92]

 

[A R 9 9]

Ein Link zur (halb-)fertigen Homepage wäre nett

 

[>Chris<]

Hab sie noch nich hochgeladen. Werd mir die Tage die Domain und den Webspace kaufen. Link kann ich dir dann schicken

 

[Schwinni]

Kleiner Trick:
Mache die 2 Bilder für einen Button zu einem einzigen, in dem beide Versionen untereinander vorhanden sind.
Stelle die A-Elemente per CSS als Blockelemente dar und zwar in der Größe width:Bildbreite & height:Bildgröße/2 und setze das Bild als background-image.
Mit a:hover verschiebst du dann einfach das Bild per background-position um Bildhöhe/2 nach oben.

Vorteil: du brauchst kein JavaScript dafür und die Bilder sind schon komplett geladen.