nicht angemeldet
Schrift unsichtbar machen
0 0 0 0 image replacement
Schrift unsichtbar machen
Hallo zusammen!
Ich mach mit nem Kumpel zusammen eine kleine Website. Er ist mehr für das Design und ich für die Umsetzung zuständig.
Er meint nun, dass die Überschriften unbedingt in einer bestimmten Schriftart in gelb und schwarz umrandet sein muss.
Die einzige Möglichkeit ist doch, dies mit einer Grafik zu realisieren, was ich gar nicht gut finde.
Da ich ihn nicht davon abbringen konnte, hab ich jetzt die Überschrift, den Text in der Hintergrundfarbe rechtsbündig dargestellt und die Grafik als Hintergrundbild der Überschrift zugeordnet. Also etwa so:
h3 {
height:25px;
background-image: url(bild.jpg);
background-repeat:no-repeat;
color:#FFF; text-align:right;
}
<h3>Text</h3>
Das macht spätestens dann Probleme, wenn die Überschrift zu lang wird, dass Sie die grafik überlappt.
visibility:hidden zeigt auch die Hintergrundgrafik nicht an.
Ein <span> mit visibility:hidden geht zwar, aber gibts da nix eleganteres?
Viele Dank schon mal und Grüßle
Jo
-
hi, ich glaube ohne span wird das nicht gehen da du ja nur den teile zwischen <h3> und </h3> unsichbar machen willst.
ich würde das ganze so machen:
h3 {
height:25px;
background-image: url(bild.jpg);
background-repeat:no-repeat;
color:#FFF; text-align:right;
}h3 span {
display:none;
}
<h3><span>Text<</span></h3>zusätzlich würde ich der h3 noch eine größe geben.
h3 {
width:300px;
height:20px;
}gruß
phase-
Hallo phase!
Danke für die Tipps, hab ich mal so umgesetzt.
Viele Grüße
Jo
-
-
warum machst denn nicht einfach mit css einen border um die schrift?
-
warum machst denn nicht einfach mit css einen border um die schrift?
wie geht das denn? ich glaube nciht das er einen border haben will sondern eine kontur!
gruß
phase-
wie geht das denn? ich glaube nciht das er einen border haben will sondern eine kontur!
genau ;-)
-
wie geht das denn? ich glaube nciht das er einen border haben will sondern eine kontur!
genau ;-)
achso *falschverstanden*
;-)
-
-
-
-
Hallo,
du kannst Konturen simulieren, indem du einen Text mehrfach darstellst, jeweils in einem absolut positionierten <div>.
Die <div>s liegen übereinander, jeweils um ein paar Pixel in x- und y- Richtung versetzt.
Muster: http://www.osmer.de/2005/index_5.htm
Kalle
-
hi,
du kannst Konturen simulieren, indem du einen Text mehrfach darstellst, jeweils in einem absolut positionierten <div>.
Die <div>s liegen übereinander, jeweils um ein paar Pixel in x- und y- Richtung versetzt.
Die dort gezeigte "Lösung" halte ich für die denkbar dümm^Hungünstigste - denn dort taucht jetzt der Text mehrfach wiederholt im HTML-Dokument auf, was einfach vollkommener Blödsinn ist.
In so einem Falle wäre es m.E. allerhöchstens akzeptabel, die "Klone" erst per Javascript ins Dokument einzufügen - um aus Sicht einer Suchmaschine und eines Textbrowser nicht vollkommenen Unfug dort stehen zu haben.
Aus der Sicht eines Nutzer ohne CSS, aber mit Javascript, oder eines Javascript-interpretierenden Vorlesebrowsers käme da aber immer noch Murks bei heraus.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
Hallo,
ich finde im Moment den Link nicht, aber ein "image replacement" was mich überzeugt hat ist fogendes:
In der h3 wird ein span definiert, der das image als Hintergundbild bekommt. Dieses wir dann mit gleicher Höhe und Breite wie die h3, _über_ den text gelegt. Der Text bleibt dann gewissermaßen "sichtbar",
(auch für Suchmaschienen, die wie ich meine gelesen zu haben, mittels display:none versteckten Text zunehmend ignorieren (werden?))
wird aber duch das Hintergrundbild des spans überlagert.
Kann das Bild nicht geladen werden ist die Schrift dann sichtbar.
Ohne CSS sieht das auch ok aus, da das span als inline Element dann "leer" ist und nicht in Erscheinung tritt.
Mit CSS und Image sieht es dann so aus, wie als Design angestrebt.Den Vorteil sehe ich darin, daß bei fehlendem Hintergundbild aber aktivem CSS der h3 Text lesbar wird, der sonst durch display:none oder visibility:hidden immer noch versteckt wäre.
just my 2 cents
mfG
Ulrich -