Textumrandung in Firefox

[stefagner]

Mit welchem css effekt oder wie kann ich in Firefox(bzw. Mozilla) Text umranden? ;D

[Henrik]

Mit 'border' (http://de.selfhtml.org/navigation/css.htm#rahmen).

Den Text kannst du dazu einfach in <span>-Tags eingliedern, wenn du den Textfluss nicht unterbrechen willst.

[Gast]

Mit 'border' (http://de.selfhtml.org/navigation/css.htm#rahmen).

Den Text kannst du dazu einfach in <span>-Tags eingliedern, wenn du den Textfluss nicht unterbrechen willst.

funktioniert bei mir nicht, warum?
<span style="border-width:5; border-color:FF0000;">Test</span>

Kannst du mir mal ein Quellcode Beispiel posten?

[darph]

funktioniert bei mir nicht, warum?Weil du Maßeinheiten und die Raute vergessen hast?

<span style="border-width:5px solid #FF0000;">Test</span>

[stefagner]

Weil du Maßeinheiten und die Raute vergessen hast?

<span style="border-width:5px solid #FF0000;">Test</span>
geht immer noch nicht!!
<span style="border-width:5px; solid ;border-color:#FF0000;">Test</span>
soweit ich weiß ist "solid" auch nur ein Rahmen um den Text!!!

Ich will dir schrift umranden, wie beim GLOW-Effekt, aber der funzt
ja nur im IE und nicht im FF ;(

[darph]

geht immer noch nicht!!
<span style="border-width:5px; solid ;border-color:#FF0000;">Test</span>
soweit ich weiß ist "solid" auch nur ein Rahmen um den Text!!!

Ich will dir schrift umranden, wie beim GLOW-Effekt, aber der funzt
ja nur im IE und nicht im FF ;(
Nimm das solid mal raus.

[Gast]

Nimm das solid mal raus.
<span style="border-width:5px; border-color:#FF0000;">Test</span>

funzt auch net

[Nase]

Es gibt keinen Ersatz für den Glow-Filter des IE.

[mithrandir]

Was genau "funzt" nicht?

Das hier funktioniert in FX1.04/Solaris:
http://staff.withingames.net/mithrandir/test.html

<span style="border: 2px outset #000000; background-color:#FFAA00; color: #00AAFF">Und hier etwas hervogerhobener Text...</span>

<span style="border: 1px inset #AAFF00; color: #00FFAA;">Und hier etwas hervogerhobener Text...</span>

<span style="border: 1px solid #000000; background-color:#FFAA00;">Und hier etwas hervogerhobener Text...</span>
bye, mith

[stefagner]

Was genau "funzt" nicht?

Das hier funktioniert in FX1.04/Solaris:
http://staff.withingames.net/mithrandir/test.html

<span style="border: 2px outset #000000; background-color:#FFAA00; color: #00AAFF">Und hier etwas hervogerhobener Text...</span>

<span style="border: 1px inset #AAFF00; color: #00FFAA;">Und hier etwas hervogerhobener Text...</span>

<span style="border: 1px solid #000000; background-color:#FFAA00;">Und hier etwas hervogerhobener Text...</span>
bye, mith

na, toll :mad: sonst noch jemand ne idee? :confused:

[mithrandir]

Eine Idee wofür? Was ist ein Glow-Dingens? Ich kenne mich mit IE-spezifischen Dingen nicht aus, weil IE kein Browser ist, der bei mir (oder in meinem Bekanntenkreis) im Einsatz ist. Wenn du uns aufklärst, wissen wir vielleicht "was" du haben möchtest.

Im Ursprungsposting wolltest du eine "Umrandung". Die habe ich mit border. Was passt an dieser Umrandung nicht?

bye, mith

[Gast]

Das sieht wohl so aus:
http://devmag.net/tricks/html/css_links_3.htm?&template=/template/wai.tpl

Da man grundsätzlich keine proprietären Lösungen verwenden sollte, empfiehlt es sich hier vielleicht, einfach ein Bild in einer Bildbearbeitung zu erstellen (ähnlich wie im Link oben) und dieses zu verwenden. Das funktioniert dann auch überall.

[stefagner]

Eine Idee wofür? Was ist ein Glow-Dingens? Ich kenne mich mit IE-spezifischen Dingen nicht aus, weil IE kein Browser ist, der bei mir (oder in meinem Bekanntenkreis) im Einsatz ist. Wenn du uns aufklärst, wissen wir vielleicht "was" du haben möchtest.

Im Ursprungsposting wolltest du eine "Umrandung". Die habe ich mit border. Was passt an dieser Umrandung nicht?

bye, mith
also des ganze soll so aussehen oder so ähnlich:
http://chat3you.homelinux.net/u/stefagner/bilder/test.jpg

[stefagner]

gibts in FF vielleicht Schatten oder sowas? :confused:

[ravage]

Mit dem Standard CSS des Firefox wirst du keinen ähnlichen Effekt hinbekommen, ausser du nimmst eine Grafik.

[stefagner]

Mit dem Standard CSS des Firefox wirst du keinen ähnlichen Effekt hinbekommen, ausser du nimmst eine Grafik.
dann hab ich aber ein neues Problem, kann man links auf Bereiche definieren?

Also ich hab ein Bild und jenachdem wo ich auf dem Bild hinklicke kommt
eine andere Seite :confused: Geht des? :confused:

[Nase]

dann hab ich aber ein neues Problem, kann man links auf Bereiche definieren?

Also ich hab ein Bild und jenachdem wo ich auf dem Bild hinklicke kommt
eine andere Seite :confused: Geht des? :confused:
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

[Henrik]

gibts in FF vielleicht Schatten oder sowas? :confused:

Ja, aber nur über Umwege.
Schreib einfach den gleichen Text in zwei Layer. Einmal nimmst du als Schriftfarbe z.B. Blau und für den Schatten Grau (#666 z.B.).
Dann legst du den Z-Index (Google) für die Layer fest und positionierst sie absolut (wieder Google ;))

[stefagner]

positionierst sie absolut (wieder Google ;))
ich weiß wie des geht, aber des Problem is, wenn ich des absolut postiniere
dann is es absolut und des will ich net, des soll nämlich align=center sein :smile:

[Nase]

ich weiß wie des geht, aber des Problem is, wenn ich des absolut postiniere
dann is es absolut und des will ich net, des soll nämlich align=center sein :smile:
Du kannst auch absolut positionierte z. B. divs mittig ausrichten. Aber bevor ich mir soviel Arbeit nur wegen sowas mache, würde ich doch lieber eine Grafik nehmen und der dann auch gleich einen schönen Schatten verpassen.

[stefagner]

Du kannst auch absolut positionierte z. B. divs mittig ausrichten. Aber bevor ich mir soviel Arbeit nur wegen sowas mache, würde ich doch lieber eine Grafik nehmen und der dann auch gleich einen schönen Schatten verpassen.
na lol, und wenn du dann des fenster größer ziehst ist es nicht mehr in der Mitte! :up: GUTE IDEE ;(

[Nase]

na lol, und wenn du dann des fenster größer ziehst ist es nicht mehr in der Mitte! :up: GUTE IDEE ;(
Stimmt doch überhaupt nicht. Auch bei absolut positionierten divs kannst du Prozentangaben machen. Also machst du z. B. left: 50%;, setzt aber gleichzeitig einen negativen margin, der das Element um die Hälfte der Gesamtbreite wieder nach links verschiebt. Tada, absolut positioniert, aber immer in der Mitte des Screens ausgerichtet.

[BlueMaex]

Schatten kannst du mittels CSS recht einfach machen.
wenn du englsih kannst empfehle ich dir diesesn Super artikel dazu:
http://www.alistapart.com/articles/cssdrop2/

Einfacher als man denkt :-)

[stefagner]

Einfacher als man denkt :-)

kannst du mir mal ein Bsp Code posten :biggrin:

[BlueMaex]

kannst du mir mal ein Bsp Code posten :biggrin:

hehe steht doch in dem Artikel drin? :usweet:
Zwei divs und eine grafik :)

Oder ist dir eine deutsche beschreibung lieber?

[stefagner]

Warum funktioniert des net :confused:

<html>
<head>
</head>
<body>
<div class="alpha-shadow">
<div>
<img src="test.jpg" alt="just a test" />
</div>
</div>
</body>
</html>

[Gast]

Warum funktioniert des net :confused:

<html>
<head>
</head>
<body>
<div class="alpha-shadow">
<div>
<img src="test.jpg" alt="just a test" />
</div>
</div>
</body>
</html>
Was soll denn daran nicht funktionieren? Das ist ein Bild namens test.jpg, das in zwei DIV-Containern steckt.

[stefagner]

Was soll denn daran nicht funktionieren? Das ist ein Bild namens test.jpg, das in zwei DIV-Containern steckt.
weil ich keinen schatten seh :eek:

[Gast]

weil ich keinen schatten seh
Umm... bist du sicher daß du weißt was du da tust?

Hast du deine Klasse "alpha-shadow" überhaupt irgendwo definiert? Gibt es überhaupt ein Bild test.jpg?

[Gast]

Btw dieser ALA Artikel hat nichts mit der Umrandung von Text zu tun, sondern unterlegt Bilder mit einem Schatten.

[stefagner]

Btw dieser ALA Artikel hat nichts mit der Umrandung von Text zu tun, sondern unterlegt Bilder mit einem Schatten.

stimmt, aber mich interessiert beides.

Also, hat jemand noch was zum Text wäre des noch besser.
Aber für Bilder brauch ich des auch :biggrin:

[Gast]

mit <div> sollte es funktionieren. span möchte halt nicht umrahmt werden.

[stefagner]

wo kommt hier ein span vor ???

<html>
<head>
</head>
<body>
<div class="alpha-shadow">
<div>
<img src="test.jpg" alt="just a test" />
</div>
</div>
</body>
</html>

[BlueMaex]

um nen text gaaaanz einfach zu umranden:

<div style="border: 1px solid #ff0000;"> Dieser Text hat nen Rand drum rum ;) </div>

natürlich kann man ausser diveigentlich auch jedes andere html element nehmen. Semantisch gesehen ist div für sowas ungeeignet.

edit

wo kommt hier ein span vor ???

<html>
<head>
</head>
<body>
<div class="alpha-shadow">
<div>
<img src="test.jpg" alt="just a test" />
</div>
</div>
</body>
</html>

da kommt nirgend ein div vor. aber ich befürchte du hast die csss regelnschlichtweg ignoriert und nich mit übernommen genauso wenig wie die eine grafik. Das musst du mit übernehmen!

[stefagner]

da kommt nirgend ein div vor. aber ich befürchte du hast die csss regelnschlichtweg ignoriert und nich mit übernommen genauso wenig wie die eine grafik. Das musst du mit übernehmen!

also beim text umranden gehts mir nicht um einen Viereckigen Rahmen, sondern in der Form der Schrift (wie glüh effekt im IE)

und zum Bild:
also des bild hab ich ( ich bin nicht blöd :biggrin: )
und des ändere fehlt des stimmt - aber wo soll des hin?
und was vorallem (schau mal in den link oben)
da sind drei so teile die des genauer Beschreibung, was muss ich
jetzt wo rein kopieren.

kannst du mir vielleicht meinen Quelltext überarbeiten und posten :confused:

[BlueMaex]

kannst du mir vielleicht meinen Quelltext überarbeiten und posten
Na gut, wollen wir mal nicht so sein ;)
Das der CSSblockso groß ist und in wei teile unterteilt ist liegt an unserem lieben IE das sogar Version5 das darstellen kann. Brauchst dazu aber noch die gleiche grafik als gif.

Quick & dirty könnte mann das so schreibn:


<html>
<head>
<style type="text/css">
.alpha-shadow {
float: left;
background: url(img/shadow1.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.alpha-shadow div {
background: url(img/shadow2.png) no-repeat left top !important;
background: url(img/shadow2.gif) no-repeat left top;
padding: 0px 5px 5px 0px;
}

.alpha-shadow img {
background-color: #fff;
border: 1px solid #a9a9a9;

padding: 4px;
}

</style>
<!--[if gte ie 5.5000]>
<style type="text/css">
.alpha-shadow div {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/shadow2.png', sizingMethod='crop');
background: none;
}
</style>
<![endif]-->
</head>
<body>
<div class="alpha-shadow">
<div>
<img src="test.jpg" alt="just a test" />
</div>
</div>
</body>
</html>

[stefagner]

danke!!!!!!!!!
gut, hab mir jetzt noch die ganz shadows zusammen gesammelt und jetzt
fehlt mir nur noch shadow1.gif - ist nicht auffindbar :-(

[BlueMaex]

danke!!!!!!!!!
gut, hab mir jetzt noch die ganz shadows zusammen gesammelt und jetzt
fehlt mir nur noch shadow1.gif - ist nicht auffindbar :-(

Esist ja iegtnlich auch gedacht, das man sich die Shadows selber macht und nicht zusammensammelt *g*
shadow.gif (http://bluemaex.de/images/shadow.gif) shadow2.gif (http://bluemaex.de/images/shadow2.gif) shadow2.png (http://bluemaex.de/images/shadow2.png)

[stefagner]

Esist ja iegtnlich auch gedacht, das man sich die Shadows selber macht und nicht zusammensammelt *g*
shadow.gif (http://bluemaex.de/images/shadow.gif) shadow2.gif (http://bluemaex.de/images/shadow2.gif) shadow2.png (http://bluemaex.de/images/shadow2.png)

danke aber die hatte ich auch schon ;(

ich brauch shadow1.gif :confused: :confused:

[BlueMaex]

danke aber die hatte ich auch schon ;(

ich brauch shadow1.gif :confused: :confused:

shadow.gif = shadow1.gif ;)

nenn die datei um oder änder den datei namen in der html? et voila ...

[stefagner]

also entweder hab ich noch was vergessen oder ich weiß auch net
Des sieht jedenfalls nicht nach nem Schatten aus :eek:

http://chat3you.homelinux.net/u/stefagner/test/test.html

[stefagner]

hallo???????????????? :eek: :eek: :eek:

[BlueMaex]

also entweder hab ich noch was vergessen oder ich weiß auch net
Des sieht jedenfalls nicht nach nem Schatten aus :eek:

http://chat3you.homelinux.net/u/stefagner/test/test.html
Schau dir mal deinen CSS Quelltext an!
background: url(img/shadow2.png) » was solln das » da drin? das müsste nen ; sein!
Und das findet sie mehrmals im code ...

[stefagner]

Schau dir mal deinen CSS Quelltext an!
background: url(img/shadow2.png) » was solln das » da drin? das müsste nen ; sein!
Und das findet sie mehrmals im code ...

kapier ich net?

was soll ich jetzt durch was ersetzen :confused:

[BlueMaex]

kapier ich net?

was soll ich jetzt durch was ersetzen :confused:

edit: sorry seh gerade das die oben in meinem Post mit dem code beispiel auch schon drin sind. ergo sorry mein fehler. hab den post oben entsprechend abgeändert.

edit2: Man sollte nachts im bett sein :usweet: Am besten du kopierst den einfach noch mal ab. Was ich erzählt hab war schwachfug! Das » sollte lediglich heisen das was in der zeile drunter steht gehört noch zur aktuellen.

[stefagner]

es funktioniert :biggrin:

[stefagner]

jetzt muss ich nur noch wissen wie des mit dem text geht :biggrin:

[BlueMaex]

Also jetzt mal ganz ehrlich das kann so nur der ie, alle anderen sehen den text ganz normal. Das ist halt eben bei unschönen nicht standard code.

Ne alternative könnte mann eventuell in Javscript mache, da kenn ich aber dann wieder doch nicht so gut aus und b warum das eigentlich überhaupt?

[stefagner]

um Text gut sichtbar auf einem mehrfarbigen Hintergrundbild
darzustellen :biggrin:

[Gast]

Genau dafür brauch ich das auch... habs schon mit Layern versucht, allerdings wird z.b. eine bold schrift nicht nur fett sondern auch breiter und liegt nicht mehr unter den buchstaben...

Bilder etc. funktionieren nicht, da dies was dort steht über php jeweils anders ist und automatisch abläuft.

[stefagner]

Genau dafür brauch ich das auch... habs schon mit Layern versucht, allerdings wird z.b. eine bold schrift nicht nur fett sondern auch breiter und liegt nicht mehr unter den buchstaben...

Bilder etc. funktionieren nicht, da dies was dort steht über php jeweils anders ist und automatisch abläuft.

aber auch keine Lösung ;(

kannst ja posten wenn de eine gefunden hast ;)