Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS funzt nicht“

0816_Ghost

Nicht mehr ganz neu hier

Hallo Leute,

Wer kann mir helfen. Ich möchte ein CSS-basierten Rolloverbtn machen. www.glogghuis.ch/0816 . Nun funktioniert es aber nicht richtig und beim Link, bzw. Rollover wird das Hintergrundbild nur auf den Text angewendet und nicht die ganze Zelle. Kann mir jemand helfen? Die CSS-Datei findet sich unter www.glogghuis.ch/0816/css/basic.css

So wie dies hier, einfach nicht animiert, sondern als rollover:



Vielen, vielen Dank an alle, die mir weiterhelfen können.

Greez,

Edit: Ach ja, hab noch vergessen zu erwähnen, dass das Wort "Test" eigentlich im Rahmen links davon sein sollte!! Please help me. Möchte das so gerne mit CSS lösen und nicht mit normalem rollover...

Ghost
 
S

Stroker

Guest

Also erstmal hast du im CSS geschrieben ".MenuTitle A:link", aber die Klasse MenuTitle, welche du <A> zugewiesen hast, auf <TD> angewendet.

Mein Vorschlag, wobei ich nicht weis ob das geht. Mache zwei Hintergründe für den Button und schreibe bei A:link rein, dass CSS den ersten HG nehmen soll und bei A:hover den zweiten HG.
 

0816_Ghost

Nicht mehr ganz neu hier

Auf was muss ich es denn anwenden, wenn nicht auf <Td> und das mit dem HG habe ich eigentlich gemacht. Aber die Grafik wird immer viel zu klein dargestellt (gerade mal auf die Grösse des Textes). Bin echt am verzweifeln. Habe schon x-Tuts und dergleichen durchgemacht, aber irgendwie scheint das bei mir nicht zu fruchten... *grosse Verzweiflung*

Hier mein Quelltext (extern) für das CSS:

.MenuTitle a { color: #ffc; font-size: 14px; font-family: Arial, Verdana, Arial, Tahoma; font-style: normal; font-weight: bold; line-height: 25px; background-image: url(../images/header/menu-basis.gif); background-repeat: no-repeat; text-align: center; width: 100%; height: 100%; }

.MenuTitle a:link { color: #ffc; font-size: 14px; font-family: Arial, Verdana, Arial, Tahoma; text-decoration: none; font-style: normal; font-weight: bold; line-height: 25px; background-image: url(../images/header/menu-basis.gif); background-repeat: no-repeat; text-align: center; width: 100%; height: 100% ; }

.MenuTitle a:hover { color: #960; font-size: 14px; font-family: Arial, Verdana, Arial, Tahoma; font-style: normal; font-weight: bold; line-height: 25px; background-image: url(../images/header/menu-basis-over.gif); background-repeat: no-repeat; text-align: center; width: 100%; height: 100% ; }

Greez, Ghost
 
S

Stroker

Guest

Wende es direkt auf <A> an, weil du hast ja festgelegt, dass alle Elemente von <A>, welche die Klasse MenuTitle haben, diese Eigenschaften erhalten, da bringt es nichts es ins Element <TD> zuschreiben, dass ignoriert die Angaben einfach und schreibe bei dem Hintergrund nicht 100%, sondern die genaue größe in Pixel, also width 120px und height 60px z.B.. Kann sein das ich es übersehen habe, aber vllt noch background-postion: center; setzen.
 

0816_Ghost

Nicht mehr ganz neu hier

Habe es auf <a> angewendet und die Grösse eingestellt, dann geht aber gar nichts mehr ist wirklich verhext... das kann doch nicht so schwer sein...

Aber vielen Dank für deine Hilfe,

Ghost
 

Kaikashi

Freak

Also ich kann den Fehler auch nicht Finden. Aber hier n vorschlag, wie ich es schreiben würde: (ich lass den gansen Grimskrams weg...)

aslo in die css-datei
a:link {background-image:url('bgnorm.gif')}
a:hover {background-image:url('bghove.gif')}

und dann einfach noch die links machen...
 

Askalon

Aktives Mitglied

HI
was für ein Quelltext!!

hast du schonmal was von Vererbung gehört?

Den Quelltext kann man auf ein zehntel kürzen.

alleine in so einer Zeile:
Code:
.fliesstxt   { color: #333333; font-size: 11px; font-family: Arial, Verdana, Arial, Tahoma; font-style: normal; font-weight: normal; line-height: 14px; text-decoration: none ; }

wird gekürzt:
Code:
.fliesstxt {   #333 11px 14px Arial, Verdana, Tahoma, sans-serif;
                 text-decoration: none;}

das Sans Serif ist wichtig damit es auf Linux und mac PC richtige Schriftart angezeigt wird.
Auf dennen gibts nunmal keine Arial, Verdana und Tahoma
Und durch sinnvolle Vererbung ist noch viel mehr gespart.

gruss
 

Kaikashi

Freak

Also dass was ich geschrieben hab funtzt nich.. komisch hab mir mal den quellcode von ner seite mit ähnlichem effekt durchgeschaut und ausprobiert und funtzt trotzdem nich..
 

0816_Ghost

Nicht mehr ganz neu hier

Hi Leute,

Herzlichen Dank für eure Bemühungen. Hab es zum laufen gebracht mit viel probieren, usw.

@Askalon: Vielen Dank für deinen Tipp. Beschäftige mich noch nicht so lange mit CSS und bin daher über jede Hilfe und Kritik dankbar. Kannst du mir das ganze noch etwas detaillierter erklären; bzw. was wird vererbt und was nicht?

Jedenfalls vielen Dank und noch einen schönen Abend,

Gruss,

Ghost

Quelltext geht nun so:

.MenuTitle a { color: #ffc; font-size: 14px; font-family: Arial, Verdana, Arial, Tahoma, sans-serif; font-style: normal; font-weight: bold; line-height: 25px; background-image: url(../images/header/menu-basis.gif); background-repeat: no-repeat; background-position: center 0; text-align: center; width: 100px; height: 25px; visibility: visible; float: left; clear: right; }

Aber wie gesagt: Von vererben hab ich noch nichts gehört, bzw. noch keine Ahnung. Bitte, bitte für Newcomer in Sachen CSS erklären, thx
 

Kaikashi

Freak

Code:
.navi {background-image:url('menu-basis.gif'); width:100px;text-align:center; padding-top:5px; display:block;height:20px;text-decoration: none; font:bold 11px tahoma;}
.navi:hover {background-image:url('menu-basis-over.gif'); width:100px;text-align:center; padding-top:5px; display:block;height:20px;text-decoration: none; font:bold 11px tahoma;}

Is auchn Weg zum Ziel... mensch wollte es gerade Posten und dann les ich deine Antwort mist
 
S

Stroker

Guest

ist noch ein Tutorial. 132 Seiten pdf, was man schön offline lesen kann, ich finde es spitze.
 

0816_Ghost

Nicht mehr ganz neu hier

Vielen lieben Dank, ihr seid spitze. Habe mir das PDF heruntergeladen und werde es mir demnächst zu gemüte ziehen. Bin einfach zur Zeit etwas gar überlastet, so ungefähr 150% Pensum. Ich muss aber schon bald zum Bund und da hat man erfahrungsgemäss jede Menge Zeit....

Greez,

Ghost
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
174.468
Beiträge
2.577.910
Mitglieder
65.948
Neuestes Mitglied
Loki33
Oben