Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Grafik wird mit CSS nicht ganz angezeigt





Frage

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]

Antwort 1 von katy

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

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

mfg

Antwort 3 von katy

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

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

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



richtig?

Antwort 6 von Flupo

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

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

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

Antwort 8 von katy

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

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

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

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

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

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

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: