Hi Leute,
oh man bis jetzt habe ich echt Glück gehabt. Habe eine Menü (eine kleine Grafik mit Text) mit zwei Ebenen. Alles klappt wunderbar.
Wo ich jetzt aber daran knabbere ist, dass ich gern einen HOVER einfügen möchte der über die gesamte Breite geht (ca. 160px) und nicht nur auf dem Text der Navigation sichtbar ist. Problem dabei wenn ich mit css display: block arbeite, bricht mir Typo-Script die Navigation um und der Text steht dann unterhalb der Grafik. Gnnn
Meine Frage ist es zum einen: Vielleicht nur ein CSS-Problem ?
bzw.
Gibt es ne Möglichkeit TS zu "sagen" das zuerst bei der Erzeugung der Navigation ein DIV dann der LINK und dann die Grafik kommt ?
Hier mein Typo für die erste Ebenen
1 = TMENU
1.NO = 1
1.NO {
linkWrap = <div class="menue0"><img src="fileadmin/navi1_01.gif" width="17" height="12" alt="" />|</div>
}
1.ACT = 1
1.ACT < .NO
1.ACT {
linkWrap = <div class="menue1"><img src="fileadmin/navi1_01.gif" width="17" height="12" alt="" />|</div>
}
Danke für die Hilfe. Schade wollte eigentlich noch ein Bild hochladen... o.O
Ein Bild oder Link, bzw. vielleicht das CSS dazu wären nicht schlecht um zu verstehen, wie es aussehen soll...
bei display block erhälst du standardmäßig einen Umbruch... du musst dann schon mit display inline arbeiten, oder den Text floaten.
Hi kitsunet,
also das CSS schaut wie folgt aus.
.menue0, .menue1, {
font-size: 3.2mm;
font-family: Verdana, " Arial", " Helvetica", " sans-serif";
color: #747474;
text-decoration: none;
padding: 3px;
border-bottom: 1px dashed Black;
font-variant: small-caps;
}
.menue1 {
font-weight: bolder;
background-color: #e9d9b9;
}
a {color: #747474; text-decoration:none; }
a:hover { color:#ff0; background-color:#00f; }
wie schon gesagt das Problem ist nur, dass ich den reinen Texthover schon hin bekomme aber ich möchte einen Effekt über eine bestimmte Fläche haben (so einen Art Schaltflächeneffekt aber nur mit CSS). Eigentlich so wie Du es auf Deine Internetseite hast. 🙂
Wie schon erwähnt geht es soviel ich weiss mit a {display:block;} aber dann bricht mir TS das ganze um und schreibt mir den Linktext unterhalb der Grafik.
Merci für Deinen "Anteilnahme". Habe dir hier mal ein Bild dazu
http://www.back2u.de/test.htm
Iceman
Dann floate doch den Text links neben das bild... Also float:left; Dann kannst du auch display:block verwenden
Hi Kitsunet,
merci für die Hilfe habe heute leider Notfalldienst und kann es erst heute Abend ausprobieren. Halte Dich aber auf dem laufenden und wenn ich ne Lösung habe, poste ich das TS.
Danke
Iceman
Hi Kitsunet
so habe heute mal die verschiedenen Möglichkeiten durchgespielt. Leider komme ich absolut zu keinem Ergebnis. Wenn ich float: left mache wird mir absolut alles durcheinander geschmissen und wenn ich inline mache genauso. Am einfachsten wäre es wenn ich TS "sagen" könnte, dass es beim wrapen des Lnks zuerst den Link und dann das Bild wrappen soll. Ungefähr auf die Art
<a><img>Text</a>...
Aber vielleicht sollte ich alles in einer Liste ausgeben?
Thanks
Iceman
Ich würde dieses Bild nicht mit img einbinden, sondern als Hintergrundbild. li bekommt inline, a bekommt block und background mit diesem Bild, darf natürlich nicht repeatet werden, und du musst den a jeweils genug padding-left geben, damit der Text rechts vom Bild anfängt...
Wenn es nicht klappt, kann ich auch Code für sowas raussuchen...
Hi Kitsunet
ja ja Tage der Verzweiflung neigen sich dem Ende... Der Tip war super. Mit noch ein wenig tricksen habe ich es ohne li geschafft. Ich habe einfach unterschiedliche CSS-Eigenschaften definiert und mit ATagParams zugewiesen. So war es dann möglich die Untermenüs etc zu erstellen.
Danke das Du mir geholfen hast und take car :p
Hier der versprochene TS
#1. Ebene
1 = TMENU
1.NO = 1
1.NO {
linkWrap = <div>|</div>
ATagParams = class="menu"
}
1.ACT = 1
1.ACT < .NO
1.ACT {
linkWrap = <div>|</div>
ATagParams = class="menu_a"
}
#2. Ebene
2 = TMENU
2.NO = 1
2.NO {
#Link wrappen
linkWrap = <div>|</div>
ATagParams = class="menu_sub"
}
2.ACT = 1
2.ACT < .NO
2.ACT {
linkWrap = <div>|</div>
ATagParams = class="menu_suba"
Iceman