Supportnet / Forum / Webseiten/HTML

Hallo Leute ........ Ich hab auf einer Homepage ein Mouse-Over Effekt mit CSS zu erstellen. Ich habe bei a:link die Standart Grafik und bei a:hover die Mouse-Over Grafik als Hintergrund und jewals noch ein Text. Hat auch gut geklappt nur, dass die Grafik nicht ganz angezeigt wird unzwar nur so lang, wie lang der Text ist. Kennt ihr eine Lösung ? Die Page : http://snakesg1.sn.funpic.de/Projekt1/Projekt%20Seite%201.html Die Grafiken : Standart: http://snakesg1.sn.funpic.de/Projekt1/button_web.gif hover: http://snakesg1.sn.funpic.de/Projekt1/button_webcss.gif PS: Die Page ist erstmal nur ein Entwurf, nicht das wirkliche Design mfg Marcel Danke im voraus [*][sup][i] *Threadedit* 20:53:45, 21.02.2008 Admininfo: Achte bei Links bitte auf unsere [url=https://supportnet.de/sn_about_help_posting.html][u]Formatierungshilfe[/u][/url] oder nutze das [url=http://sntool.wundi.net/][u]SNTool[/u][/url][/i][/sup]

Hallo Marcel,

die Lösung sollte einfach sein: gib dem Link entsprechende Maße in den CSS-EIgenschaften

width

und

height

. Damit das funktioniert braucht der Link zudem die Eigenschaft

display:block

.

Bei CSS4You findest du genauere Infos.

katy

Hi Katy wo muss ich das eingeben , bei URL oder dannach in der Klammer ?

mfg

Hallo Marcel,

ich weiß nicht von was für einer URL du hier schreibst. Aber die Angaben gehören als eigne CSS-Eigenschaften in die geschweifte Klammer bei deinem Link, etwa so

a {
display:block;
width:...px;
height:...px;
background-image:...;
....
}

katy

...ist relativ. Hast du dir die Seite schonmal im Firefox angesehen?

Da wird die Grafik überhaupt nicht angezeigt.
Im Quelltext sind auch noch ein paar dicke Schnitzer. Z.B. werden zwei Tabellen begonnen, aber nur eine beendet. Die Überschrift steht auch völlig zusammenhanglos zwischen zwei Tabellenzeilen. So ist das reines Glück, dass die oben in der Ecke landet.
Auch warum du innerhalb der Linkauszeichnung

<a href="#"><p align="center">Verweis 1</p></a>

noch <p> verwendest, erschließt sich mir nicht.

Gruß Flupo

Bin ja auch noch nicht fertig.........

So sieht es jetzt aus .. :

a:link       { color:#000000; text-decoration:none; background-image:url(http://snakesg1.sn.funpic.de/Projekt1/button_web.gif); }
 a:visited    { color:#000000; text-decoration:none; background-image:url(http://snakesg1.sn.funpic.de/Projekt1/button_web.gif);}
 a:hover      { color:#000000; text-decoration:underline; background-image:url(http://snakesg1.sn.funpic.de/Projekt1/button_webcss.gif); }
 a:active     { color:#000000; text-decoration:none; background-image:url(http://snakesg1.sn.funpic.de/Projekt1/button_web.gif); }
 a:focus      { color:#000000; text-decoration:underline; background-image:url(#); }

Und so also später (nur mit a:link)? :

a:link       { color:#000000; text-decoration:none; background-image:url(http://snakesg1.sn.funpic.de/Projekt1/button_web.gif);  display:block; width:165; high:22;}

richtig?

Wenn du meine Bemerkung meinst: Nein.

Die css-Sachen oben sind ja extra damit sich das Aussehen des Links beim drüberfahren mit der Maus ändert (hover).

Ich meine
aus

<a href="#"><p align="center">Verweis 1</p></a>

würde ich

<a href="#">Verweis 1</a>

machen und die Zentrierung in die Linkformatierung einbauen.

Gruß Flupo

Flupo, das habe ich ja schon gemacht.........

Doch das Resultat sieht wie folgt aus:
*KLICK HIER*

Hallo Marcel,

high ist den Browsern unbekannt, richtig wäre hight.

Du kannst deinen Quellcode validieren (auf Fehler überprüfen) lassen für CSS und HTML auf den Seiten des W3C (dort die entsprechenden Validatoren in der Navi auswählen). Nur fehlerfreier Code hat gute Aussichten, vorhersehbar angezeigt zu werden. Wenn du Fehler einbaust nimmt sich der Browser das gute Recht, die irgendwie zu interpretieren.

katy

Der Validator hilft mir auch nicht weiter, da werden z.B. Sachen angezeigt, wie das das "a" von "alternativer Text" hier nicht hinkommt....... häää

Hier mal der Link von den Validator : Klick

Und hier von mein neues HTML Dokument: Klick

Wie ihr sehen könnt , hat das mal wieder einen Effekt erzielt, der nich in Ordnung ist, nämlich das "alternativer Text" jetzt unter "td#navi" staht.

Ich lass es doch jetzt besser mit den bildern. ich hab das nochmal mit div probiert , da gab ich es auch geschafft das agnze bild anzuzeigen, aber das wurd 3 mal hintereinander gestappelt.

mfg Marcel

Juhu .... doch es hat geklappt ........ ich Blödmann..... ich meine CSS-Eigenschaft "td#navi" die Größe größer gehabbt als das Bild.

jo danke ne

Hallo Marcel,
bedeutet, dass du text dorthin geschrieben hast wo keiner stehen darf. In Tabellen darf Text nur in den Tabellenzellen (innerhalb td oder th) stehen, du hast ihn aber sozusagen auf die Trennlinien (zwischen tr und td) geschrieben.

katy

• GoLive CS2 - Grafiken
• Layout für Links über css
• wieso laggt mein css?
• Direktformatiertes CSS "überschreiben"
• Grafik wird verzerrt angezeigt!?!