Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon MACC vom 21.02.2020, 20:47 Options

Grafik wird mit CSS nicht ganz angezeigt

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

^{*Threadedit* 20:53:45, 21.02.2008
Admininfo: Achte bei Links bitte auf unsere Formatierungshilfe oder nutze das SNTool}

Antwort schreiben

Antwort 1 von katy vom 21.02.2020, 21:27 Options

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

Antwort 2 von MACC vom 21.02.2020, 21:30 Options

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

mfg

Antwort 3 von katy vom 22.02.2020, 07:04 Options

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

Antwort 4 von Flupo vom 22.02.2020, 08:15 Options

Zitat:
Hat auch gut geklappt...

...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

Antwort 5 von MACC vom 22.02.2020, 14:00 Options

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

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);  [b]display:block; width:165; high:22;}[/b]

richtig?

Antwort 6 von Flupo vom 22.02.2020, 14:29 Options

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

Antwort 7 von MACC vom 22.02.2020, 15:39 Options

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

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

Antwort 8 von katy vom 22.02.2020, 16:14 Options

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

Antwort 9 von MACC vom 22.02.2020, 17:18 Options

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

Antwort 10 von MACC vom 22.02.2020, 17:26 Options

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.

Antwort 11 von MACC vom 22.02.2020, 18:29 Options

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

Antwort 12 von MACC vom 22.02.2020, 18:58 Options

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

Antwort 13 von katy vom 22.02.2020, 19:48 Options

Hallo Marcel,

Zitat:
das "a" von "alternativer Text" hier nicht hinkommt....... häää

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

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..