CSS; Problem beim Überschreiben von Text durch Bild
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bereich
browser
button
code
editor
geplant versuche
hintergrund
http
input
leute
problem
safari
software
text
update
url
vogel
wechsel
wissen
zeigen
-
Ich hoffe einfach mal, dass ich mich trotz der Überschrift dieses Bereichs mit meinem Css-Problem nicht in die falsche Ecke verirrt habe... *hust*
Hallo allerseits!
Für einen internen Adminbereich sind wir derzeit dabei, ein CSS zu basteln. Einige Links sollen dabei durch Buttons ersetzt werden. Beim Save-Button (div#admin div.dirmanager div.row div.edit div.editor input.push) hat es funktionert, bei 'Delete' gab es bereits die ersten Schwierigkeiten. Wenn ich den Text nach unten rausrücke, wie bei Save, verschiebt sich der Hintergrund gleich mit.
Die Kombination aus Bild und Text ist eigentlich auch nur eine Notlösung, vor allem, da der Text je nach Browser vertikal unterschiedlich positioniert ist. (Dass die horizontalen Abstände vom rechten Rand bei älteren Versionen des IE anders sind, spielt hier keine Rolle.)
Ganz unten bei 'Upload' kam ich dann gar nicht mehr weiter. Auch hier scheint mir der Text vertikal nicht zu passen, so wie bei 'Delete'. Da er ganz raus soll, ist das allerdings nebensächlich. Was mich eigentlich interessiert ist: Wie kann ich bei besagten Buttons den Text genauso rauswerfen wie bei 'Save' und warum funktioniert es dort, aber in den Klassen der anderen Buttons nicht?
Ich weiß, Fehlersuche ist immer recht mühselig. Umso dankbarer wäre ich für jedes Bisschen Hilfe! Vielleicht ist es ja einfach ein Anfängerfehler, der euch sofort ins Auge springt.
HTML: http://addictedtodarkness.lima-city.de/testseite-lima.html (ignoriert den ungestylten Bereich oben)
Stylesheet: http://addictedtodarkness.lima-city.de/admin-area.css -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mh... warum machst Du das überhaupt so kompliziert?
Vorschlag 1: value=""
Vorschlag 2: http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern
Edit: Hab ich Dein Problem überhaupt richtig verstanden? ;)
Beitrag geändert: 21.10.2008 18:50:27 von tavern -
Wenn ich richtig verstanden habe, willst du dass der Text des Buttons nicht mehr sichtbar ist. Richtig?
Dafür könntest du text-indent mit einem großen negativen Wert verwenden.
Mehr habe ich jetzt momentan nicht verstanden. Was willst du noch wissen? ;)
Grüße, Moritz -
Danke für die prompten Antworten! Beides ist mir bekannt, aber aus verschiedenen Gründen nicht möglich: Der leere Value fällt aus, weil das HTML automatisch generiert wird und daran möglichst nichts mehr geändert werden soll. Beim Text-indent spielt meines Wissens irgendein Browser nicht mit. Ich weiß nicht mehr, ob es Safari war oder der IE6. Jedenfalls hatte ich mich damals wegen irgendeiner Browserinkompabilität dagegen entschieden.
moritzpeuser schrieb:
Wenn ich richtig verstanden habe, willst du dass der Text des Buttons nicht mehr sichtbar ist. Richtig?
Japp, das ist richtig. Ich versuche es nochmal genauer:
div#admin div.dirmanager div.row div.edit div.editor input.push { background: url(save.gif) no-repeat transparent; border: 0px; width: 63px; height: 23px; font-size:0; text-align:center; color: transparent; padding-top:50px; }
Hier verschwindet der Text wie geplant. Versuche ich dieses Prinzip jedoch auf diesen Bereich oder auf den Delete-Button anzuwenden, also den Text mit padding-top rauszukicken, verschiebt sich der Hintergrund mit.
div#admin div.upload input.push { border: 1px; height: 22px; width: 85px; background: url(upload.gif) no-repeat; }
Nun wüsste ich gern, warum es in der einen Klasse klappt, aber in der anderen nicht, und wie ich das Problem beheben kann.
Beitrag geändert: 21.10.2008 18:59:54 von addictedtodarkness
Editiert von moritzpeuser: Added some code-tags...
Beitrag geändert: 21.10.2008 19:21:59 von moritzpeuser -
Laut CSS4You (http://www.css4you.de/Texteigenschaften/text-indent.html) spielt sogar der beknackte IE in Steinzeitversion mit ;) Ich sehe keine Grund warum man text-indent nicht benutzen sollte. Zumal der IE6 sowieso boykottiert gehört :D
€dit: Typo
Beitrag geändert: 21.10.2008 18:56:48 von moritzpeuser -
Ist JS eine Alternative?
-
Nein, leider nicht. Ich kann es zwar halbwegs, aber davon wollen wir eigentlich die Finger lassen.
-
Naah, boykottieren ist leider nicht. Der Bereich wird später auch von älteren Leuten genutzt werden und die zeigen mir den Vogel, wenn ich ihnen sag: Machen Sie erstmal n Software-Update oder wechseln sie am besten gleich den Browser.
Beitrag geändert: 21.10.2008 19:04:07 von addictedtodarkness
Bitte meinen Beitrag lesen ;) Text-indent wird von IE bis Version 5 unterstützt (wer hat das bittschön noch?), Opera bis Version 5, Netscape bis Version 4, Seamonkey ab 1+, Firefox ab 0.8, Safari ab 1.0, Konqueror ab 3.3
Von daher kannst du es getrost verwenden.
Ansonsten bleibt dir nur noch "dirty CSS".
Beitrag geändert: 21.10.2008 19:10:12 von moritzpeuser -
Hab's gerade getestet, der IE6 macht es nicht. Ich wundere mich allerdings gerade selbst darüber. SelfHTML und CSS4you sind sich ja einig, dass es auch mit der alten Krücke geht. Ôo
-
Komisch... sehr komisch.
Ok, mein dreckiges CSS sieht so aus:
div#admin div.upload input.push { background:transparent url(upload.gif) no-repeat scroll 0 0; border:1px none; float:right; height:22px; margin-top:-24px; padding-top:50px; width:85px; }
Nur unter Firefox 3 getestet. Sollte funktionieren.
Beitrag geändert: 21.10.2008 19:17:19 von moritzpeuser -
Vielen Dank! Das sieht im FF tatsächlich sehr viel schöner aus, im IE6 allerdings verabschiedet sich der Button an den rechten Bildschirmrand und scheint auch zu weit oben zu sein. Man sieht jedenfalls nur die untere Hälfte.
Aber hochziehen mit Margin ist keine schlechte Idee. Ich probier mal weiter in der Richtung. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage