nicht angemeldet
Menü <a class""> beschriften
0 0 0 0 0
0 
Gunnar Bittersmann
0
Menü <a class""> beschriften
Hallo zusammen,
habe da ein kleines Problem.
Bin dabei ein Menü mittels CSS zu erstellen. Da es auch den Mousover Effekt geben soll habe ich das Menü durch
<a class="menu" href="index.html">###Hauptmenu###</a>
beschrieben.
Folgendes Problem:
Da mein CSS Code wie folgt aussieht:
.menu {
text-decoration: none;
border:0;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 198px;
height:26px;
background-image: url("Buttons/Menu/Obutton.png") ;
}
.menu:hover, .menu2:hover, .menu3:hover{
background-image:url("Buttons/Menu/mouseover.png");
}
funktioniert zwar der Mouseover Effekt jedoch bekomme ich es nicht hin die Beschriftung jetzt auf dem jeweiligen Menüpunkt zu machen.
Bräuchte da ein wenig Hilfe.
Danke im Voraus :)
-
funktioniert zwar der Mouseover Effekt jedoch bekomme ich es nicht hin die Beschriftung jetzt auf dem jeweiligen Menüpunkt zu machen.
Wenn du den Text mit unsinnigen Angaben für text-indent und letter-spacing ins Nirvana ballerst, ist das kein Wunder.
Die Klasse ist übrigens ziemlich unnütz - wie wäre es, wenn du die a-Elemente in deinem Menü über ihr gemeinsames Vorfahren-Element sortierst? Ein nav-Element z.B.
-
funktioniert zwar der Mouseover Effekt jedoch bekomme ich es nicht hin die Beschriftung jetzt auf dem jeweiligen Menüpunkt zu machen.
Wenn du den Text mit unsinnigen Angaben für text-indent und letter-spacing ins Nirvana ballerst, ist das kein Wunder.
Die Klasse ist übrigens ziemlich unnütz - wie wäre es, wenn du die a-Elemente in deinem Menü über ihr gemeinsames Vorfahren-Element sortierst? Ein nav-Element z.B.
naja das kann ich machen bringt mir an sich jedoch nichts.
Die text-indent angabe sowie die letter-spacing Angabe hab ich mal angepasst aber text ist dennoch nicht zu sehen...Problem is wie gesagt nicht die Position oder anordnung, viel mehr dachte ich gibt es einen trick da vllt durch einen div container die überschriften hin zu bringen.
-
naja das kann ich machen bringt mir an sich jedoch nichts.
Doch, schlankeren und sinnvolleren Code der dir auf lange Sicht die Arbeit erleichtert.
Die text-indent angabe sowie die letter-spacing Angabe hab ich mal angepasst aber text ist dennoch nicht zu sehen...
Auf welche Werte hast du sie denn angepasst?
Problem is wie gesagt nicht die Position oder anordnung, viel mehr dachte ich gibt es einen trick da vllt durch einen div container die überschriften hin zu bringen.
Was ist deiner Meinung nach der Unterschied zwischen "position" und "hin bringen" - ich kann dir bei deinem Problem nicht folgen.
-
naja das kann ich machen bringt mir an sich jedoch nichts.
Doch, schlankeren und sinnvolleren Code der dir auf lange Sicht die Arbeit erleichtert.
Die text-indent angabe sowie die letter-spacing Angabe hab ich mal angepasst aber text ist dennoch nicht zu sehen...
Auf welche Werte hast du sie denn angepasst?
Problem is wie gesagt nicht die Position oder anordnung, viel mehr dachte ich gibt es einen trick da vllt durch einen div container die überschriften hin zu bringen.
Was ist deiner Meinung nach der Unterschied zwischen "position" und "hin bringen" - ich kann dir bei deinem Problem nicht folgen.
text-indent steht auf 9px und letter-spacing auf 1px
Das Problem ist, dass ich durch die Klasse die ich in a definiert habe, keine Beschriftung mehr habe.
Eigentlich sollte auf den Buttons etwas drauf stehen.
Die beiden Bilder die ich als Hintergrund verwende sind nämlich ohne Schrift, damit ich sich die Buttons bei dem vergrößern nicht verpixeln und die Schrift immer angepasst ist. außerdem ist es weniger Arbeitsaufwand.Die Ursprungsidee war, ein <div> Element da drin dann das Hintergrundbild und darin wieder ein div Element mit der Schrift.
So dadurch, dass der Mouseover Effekt folglich nur auf die Schrift ging habe ich das umgestellt und über die Klasse a gemacht.
Jetzt möchte ich gerne die Buttons beschriften.
Ich hab nur keine Idee wie ich das anstellen soll, da ich nicht weiß ob es in irgendeiner Form möglich ist darüber ein div Element mit der Schrift zu machen.Hoffe mein Problem ist evt etwas verständlicher geworden
-
Om nah hoo pez nyeetz, BigO!
Was meinst du denn, was font-size: 0 bewirkt?
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Was meinst du denn, was font-size: 0 bewirkt?
Die Schrift wird in der im Browser eingestellen minimalen Schriftgröße dargestellt? ;-b
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Om nah hoo pez nyeetz, BigO!
Was meinst du denn, was font-size: 0 bewirkt?
Matthias
oh man ich bin blind.... -.-
Ja is logisch.. nicht drauf geachtet gehabt...
Aber jetzt muss ich zum besseren aussehen eigentlich nur noch die eigenschaften von a verändern sprich nicht mehr als link kennzeichnen
Danke :)
War kurz vorm verzweifeln
-
Om nah hoo pez nyeetz, BigO!
Aber jetzt muss ich zum besseren aussehen eigentlich nur noch die eigenschaften von a verändern sprich nicht mehr als link kennzeichnen
<a>-Elemente sind aber nunmal Links, wenn sie keine sein sollen, nimm kein <a>.
Es lohnt sich, GANZ VON VORN zu beginnen.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-
@@BigO:
nuqneH
.menu {
--8<--
background-image: url("Buttons/Menu/Obutton.png") ;
}.menu:hover, .menu2:hover, .menu3:hover{
background-image:url("Buttons/Menu/mouseover.png");
}Nicht zwei getrennte Bilder, sondern CSS-Sprites verwenden!
http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/
http://www.webkrauts.de/2009/12/15/kuerzere-ladezeiten-durch-css-sprites/Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Om nah hoo pez nyeetz, BigO!
Einige Hinweise:
-
verwende keine Layouttabellen. Es kann dir zwar keiner mehr Besucher garantieren, aber semantisch richtige Seiten, können auch von den SuMas besser erfasst werden
-
Deine "###" sind Gestaltung, gehören also ins CSS: Pseudoelemente
-
Verwende sowenig Hintergrundgrafiken wie möglich: CSS-Sprites, wie Gunnar schon schrieb.
-
Für die Menüs kannst du für moderne Browser auf eine Grafik verzichten: Gradient
Matthias
--
1/z ist kein Blatt Papier.
-
* Für die Menüs kannst du für moderne Browser auf eine Grafik verzichten: Gradient
Das geht mit Filtern sogar in antiken Internet-Explorer-Versionen und in älteren Opera-Versionen mit SVG.
-
Om nah hoo pez nyeetz, suit!
- Für die Menüs kannst du für moderne Browser auf eine Grafik verzichten: Gradient
Das geht mit Filtern sogar in antiken Internet-Explorer-Versionen
wie verlinkt
und in älteren Opera-Versionen mit SVG.
hab ich als Hintergrund noch nicht gesehen. Gibt es einen Link?
Matthias
--
1/z ist kein Blatt Papier.
-
und in älteren Opera-Versionen mit SVG.
hab ich als Hintergrund noch nicht gesehen. Gibt es einen Link?
http://stackoverflow.com/questions/4084614/how-can-you-create-a-css3-gradient-in-opera
Radiale Verläufe kann Opera 11.11 übrigens noch nicht - da wird sogar SVG von Entwicklerseite empfohlen.
-
Om nah hoo pez nyeetz, suit!
Danke.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-