mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 16:43 Benutzername: Passwort: Auto-Login

Thema: Rolloverbuttons via CSS-Pseudoformat vom 01.09.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Rolloverbuttons via CSS-Pseudoformat
Seite: Zurück  1, 2, 3, 4  Weiter
Autor Nachricht
fragile

Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht: Männlich
Verfasst Fr 02.09.2005 12:25
Titel

Antworten mit Zitat Zum Seitenanfang

Aeh..wie mach ich das bei mehreren Buttons ? Muss ich dann in jedem Button nen style-Attribut definieren und was nehm ich als Lnikbeschriftung ? Gar nix ? Könnte mal jemand den HTML/CSS-Mischtext für nen konkreten Rollover posten ?
Thx..
  View user's profile Private Nachricht senden
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: Männlich
Verfasst Fr 02.09.2005 12:30
Titel

Antworten mit Zitat Zum Seitenanfang

HTML-Menü:
Code:
<div id="navi">
   <ul>
      <li><a href="index.html" class="startActive"><span>Startseite</span></a></li>
      <li><a href="ueber_uns.html" class="ueberuns"><span>Wir über uns</span></a></li>
      <li><a href="fahrzeuge.html" class="fahrzeuge"><span>Fahrzeuge</span></a></li>
      <li><a href="schulungsraum.html" class="schulungsraum"><span>Schulungsraum</span></a></li>
      <li><a href="ausbildung.html" class="ausbildung"><span>Ausbildung</span></a></li>
      <li><a href="seminare.html" class="seminare"><span>Seminare</span></a></li>
      <li><a href="aktuelles.html" class="aktuelles"><span>Aktuelles</span></a></li>
      <li><a href="kontakt.html" class="kontakt"><span>Kontakt</span></a></li>
      <li><a href="anfahrt.html" class="anfahrt"><span>Anfahrt</span></a></li>
      <li><a href="impressum.html" class="impressum"><span>Impressum</span></a></li>
   </ul>
</div>


Definition der Tags:
Code:
div#navi ul {
   list-style-type: none;
}
div#navi ul a span {
   display: none;
   font-size: 1px;
   vertical-align: middle;
}
div#navi li {
   font-size: 1px;
   line-height: 1px;
}
div#navi a {
   display: block;
   width: 128px;
   height: 20px;
   text-decoration: none;
}


Definition der Menüpunkte:
Code:
a.start {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_start.jpg) no-repeat -128px 0px;
}
a.start:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_start.jpg) no-repeat 0px 0px;
}
a.startActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_start.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.ueberuns {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_ueberuns.jpg) no-repeat -128px 0px;
}
a.ueberuns:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_ueberuns.jpg) no-repeat 0px 0px;
}
a.ueberunsActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_ueberuns.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.fahrzeuge {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_fahrzeuge.jpg) no-repeat -128px 0px;
}
a.fahrzeuge:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_fahrzeuge.jpg) no-repeat 0px 0px;
}
a.fahrzeugeActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_fahrzeuge.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.schulungsraum {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_schulungsraum.jpg) no-repeat -128px 0px;
}
a.schulungsraum:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_schulungsraum.jpg) no-repeat 0px 0px;
}
a.schulungsraumActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_schulungsraum.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.ausbildung {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_ausbildung.jpg) no-repeat -128px 0px;
}
a.ausbildung:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_ausbildung.jpg) no-repeat 0px 0px;
}
a.ausbildungActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_ausbildung.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.seminare {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_seminare.jpg) no-repeat -128px 0px;
}
a.seminare:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_seminare.jpg) no-repeat 0px 0px;
}
a.seminareActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_seminare.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.aktuelles {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_aktuelles.jpg) no-repeat -128px 0px;
}
a.aktuelles:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_aktuelles.jpg) no-repeat 0px 0px;
}
a.aktuellesActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_aktuelles.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.kontakt {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_kontakt.jpg) no-repeat -128px 0px;
}
a.kontakt:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_kontakt.jpg) no-repeat 0px 0px;
}
a.kontaktActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_kontakt.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.anfahrt {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_anfahrt.jpg) no-repeat -128px 0px;
}
a.anfahrt:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_anfahrt.jpg) no-repeat 0px 0px;
}
a.anfahrtActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_anfahrt.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.impressum {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_impressum.jpg) no-repeat -128px 0px;
}
a.impressum:hover {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_impressum.jpg) no-repeat 0px 0px;
}
a.impressumActive {
   width: 128px;
   height: 20px;
   background: url(../images/navi/button_impressum.jpg) no-repeat 0px 0px;
}


Ansonsten such mal nach CSS-Menüs


Zuletzt bearbeitet von way2hot am Fr 02.09.2005 12:31, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
fragile

Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht: Männlich
Verfasst Fr 02.09.2005 12:39
Titel

Antworten mit Zitat Zum Seitenanfang

Jo danke, habs grad auch ausprobiert und funzt wunderbar ! thx !
  View user's profile Private Nachricht senden
fragile

Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht: Männlich
Verfasst Fr 02.09.2005 13:08
Titel

Antworten mit Zitat Zum Seitenanfang

Ah, noch eine kleine Frage : Meine Menueelemente sind horizontal angeordnet, einfach die <a>-Tags in einem div-tag untereinander geschrieben. Wie verhindere ich, daß sie auf einmal beim Verkleinern des Browserfensters untereinander rutschen ?

Gruß
FraGiLe
  View user's profile Private Nachricht senden
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: Männlich
Verfasst Fr 02.09.2005 17:27
Titel

Antworten mit Zitat Zum Seitenanfang

fragile hat geschrieben:
Ah, noch eine kleine Frage : Meine Menueelemente sind horizontal angeordnet, einfach die <a>-Tags in einem div-tag untereinander geschrieben. Wie verhindere ich, daß sie auf einmal beim Verkleinern des Browserfensters untereinander rutschen ?

Gruß
FraGiLe


Wenn kein Platz ist in der Breite, dann ist kein Platz. * Keine Ahnung... *

Wie hast du denn den DIV definiert, in dem die Navi platziert ist?


// Du kannst übrigens die Liste aus meinem Beispiel auch benutzen, um eine horizontale Navi zu realisieren (Listenelemente inline floaten). Sinn der Liste sind die zusätzlich vorhandenen Textlinks, für den Fall, dass beispielsweise CSS ausgeschaltet ist.


Zuletzt bearbeitet von way2hot am Fr 02.09.2005 17:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
beeviZ

Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.09.2005 20:07
Titel

Antworten mit Zitat Zum Seitenanfang

im code da oben steht viel zu viel unnützes zeug.

einfach mal
#navi a {width: 128px; height: 20px; }
machen, dann musste das nich bei jedem link einzeln machen. die scheinen ja eh immer alle gleich groß zu sein.
  View user's profile Private Nachricht senden
fragile

Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht: Männlich
Verfasst Sa 03.09.2005 18:54
Titel

Antworten mit Zitat Zum Seitenanfang

Hab deinen code weitgehend übernommen, Bildgrößen angepasst und die div#navi - Konstruktion so gelassen. Die Elemente sollen halt fixed stehen bleiben, so daß der User das Fenster weiter aufziehen muss und es soll mir nicht das Design zerhauen....
  View user's profile Private Nachricht senden
fragile

Dabei seit: 22.09.2004
Ort: Amberg
Alter: 50
Geschlecht: Männlich
Verfasst Mo 05.09.2005 07:42
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
div#navi {
     margin-left : 280px;
    margin-top : 65px;
    position : absolute;
 }

div#navi a {
 
   width: 132px;
   height: 32px;
   text-decoration: none;
}

/* -----------------------------------------*/

a.start {
   width: 132px;
   height: 32px;
   background: url(but_home.jpg) no-repeat;
}
a.start:hover {
   width: 132px;
   height: 32px;
   background: url(but_home_over.jpg) no-repeat;
}
a.start:active {
   width: 132px;
   height: 32px;
   background: url(but_home_pressed.jpg) no-repeat;
}

a.produkte {
   width: 132px;
   height: 32px;
   background: url(but_produkte.jpg) no-repeat;
}
a.produkte:hover {
   width: 132px;
   height: 32px;
   background: url(but_produkte_over.jpg) no-repeat;
}
a.produkte:active {
   width: 132px;
   height: 32px;
   background: url(but_produkte_pressed.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.kontakt {
   width: 132px;
   height: 32px;
   background: url(but_kontakt.jpg) no-repeat;
}
a.kontakt:hover {
   width: 132px;
   height: 32px;
   background: url(but_kontakt_over.jpg) no-repeat 0px 0px;
}
a.kontakt:active {
   width: 132px;
   height: 32px;
   background: url(but_kontakt_pressed.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.wir {
   width: 132px;
   height: 32px;
   background: url(but_wir.jpg) no-repeat;
}
a.wir:hover {
   width: 128px;
   height: 20px;
   background: url(but_wir_over.jpg) no-repeat 0px 0px;
}
a.wir:active {
   width: 128px;
   height: 20px;
   background: url(but_wir_pressed.jpg) no-repeat 0px 0px;
}

/* ------------------------------------ */

a.impressum {
   width: 132px;
   height: 32px;
   background: url(but_impressum.jpg) no-repeat;
}
a.impressum:hover {
   width: 128px;
   height: 20px;
   background: url(but_impressum_over.jpg) no-repeat 0px 0px;
}
a.impressum:active {
   width: 128px;
   height: 20px;
   background: url(but_impressum_pressed.jpg) no-repeat 0px 0px;
}


So das is mein derzeitiger, angepasster Code. Funzt im IE wunderbar.
Das Problem : FireFox zeigt GAR NIX an, die Grafiken sind unsichtbar, wenn ich ins a-tag als Linktitel Text schreibe tauchen sie auf. Hat jemand eine browserunabhaengige Lösung ?

gruß
FraGILe
  View user's profile Private Nachricht senden
 
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.