CSS Style Elemente werden nur teilweise benutzt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolut positionieren
anschauen
blocken
code
definition
design
display
eigenschaft
element
festes layout
helfen
http
pfad
reihenfolge
schauen
semikolon
separaten bereiche
text
url
vermutung
-
Hallo,
ich habe momentan das Problem, dass ich meine Links in einem anderen Design erstrahlen lassen möchte, wobei mir das CSS Steine in den Weg legt. Zum testen habe ich erstmal folgenden Eintrag in meinem Stylesheet verwendet:
a:link { font-weight:bold; color:green; text-decoration:none; width:100% } a:focus { font-weight:bold; color:green; text-decoration:none; } a:hover { font-weight:bold; color:green; text-decoration:none; } a:active { font-weight:bold; color:green; text-decoration:none; }
Leider funktionieren nur die Einträge für focus korrekt, d.m.h. dass das Design zumindest erkannt wird. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Kannst du mal einen Link dazugeben wo man sich das anschauen kann. Denn so kann dir niemand so wirklich helfen. Ich habe nämlich die Vermutung das du mehrere Stylesheets einbindest und dabei zufällig gleich definiert wurde. Um das allerdings herauszubekommen brauchen wir einen Link.
Du kannst aber mal schauen in der Quelltextansicht deines Browsers ob die Datei eingebunden worden ist (achte auf die Schreibweise und den Pfad). Außerdem kannst du unter Mozilla Firefox auch mit Firebug den Link auswählen und schauen welche Definitionen gelten, da siehst du dann auch ob er iregenwelche Definitionen aus einem anderen Stylesheet erbt.
Nachtrag: Ich habe gerade noch gesehen das du hinter width kein Semikolon gesetzt hast. Ist zwar nicht sehr schlimm aber du solltest dir angewöhnen hinter jede Eigneschaft ein Semikolon zu setzen.
Gruß S.Brosch
Beitrag zuletzt geändert: 6.4.2011 10:16:20 von software-brosch -
Einen Link kann ich leider nicht posten, da ich Alles ausschließlich lokal aufgesetzt habe und eine Migration auf einen Server ziemlich aufwändig wäre. Ich habe lediglich ein einziges globales Stylesheet definiert, auf das, zumindest dem korrekten hover nach, bereits zugegriffen wird. Width habe ich korrigiert, was aber das Ergebnis nicht positiv beeinflusst hat.
-
Was funktioniert jetzt genau? Du schreibst in deinem letzten Post der hover würde gehen. In deinem ersten Beitrag schreibst du der focus würde gehen. Die anderen kannst du so auch gar nicht sehen, da die ja alle gleich sind.
focus, hover, active sind alle gleich.
link ist mit den anderen ebenfalls gleich nur hier wurde die breite noch definiert.
Du kannst daher keinen Unterschied sehen.
Gruß S.Brosch -
Verzeihung, ich habe mich nur verschrieben. Nur focus hat eine Auswirkung, auch wenn alle separaten Bereiche mit verschiedenen Farben ausgelegt werden (hover:green, link: red, focus:black etc).
-
Also ich kann dir dann nicht wirklich helfen. Nimm dir halt die Zeit das hochzuladen damit man sich das anschauen kann.
Hier findest du noch ein Beispiel zu diesem Thema (sieht so aus als hättest du es von dort).
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
Versuche das mal nachzubauen und dann Stück für Stück umzubauen in deine Version.
Gruß S.Brosch -
Danke, der Link hat wirklich geholfen, da hierbei angegeben wird, dass die Elemente unterschiedlich interpretiert werden können und eine Reihenfolge zu beachten ist. Ich habe lediglich das active-Element eingefügt und schon nimmt er die Inhalte wie er soll.
Hierbei stellt sich mir die zusätzliche Frage: "Wie kann ich es schaffen, dass der Link / Button auf die volle Breite der Spalte gezogen wird"? Momentan richtet sich die Breite des Links wie gewohnt nach dem Namensstring. -
Einfach noch folgende Eigenschaft einfügen. Die width sollte aber noch drinne bleiben.
display: block;
Wenn du allerding ein festes Layout hast kannst du es auch absolut positionieren. Verwende dazu statt % oder em einfach px.
Gruß S.Brosch
Beitrag zuletzt geändert: 6.4.2011 11:03:52 von software-brosch -
Vielleicht liegt es an der Reihenfolge der CSS-Pseudoklassen. Schau mal hier nach und versuch diese mal zu ändern.
EDIT: Hoppla, da ist ja schon jemand drauf gekommen!
Beitrag zuletzt geändert: 6.4.2011 11:03:56 von wagnerm -
Danke sehr, display:block; erfüllt genau die Aufgabe wie ich es vorhatte. Sehr schön, jetzt sieht Alles so aus wie es sollte ^^
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage