Markus: Text-Schatten browserübergreifend

SELF-Forum

Text-Schatten browserübergreifend

Markus Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo!

Ich möchte per CSS einen browserübergreifenden Text erzeugen. Das Praktischste wäre wohl die Version von DrWeb:

<div id="Layer1" z-index:1; left: 1px; top: 1px; color: #FFF; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif;">Schatten-Text</div>
<div id="Layer2" z-index:1; left: 0px; top: 0px; color: #354A69; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif;">Schatten-Text</div>

Funktioniert auch herrlich wenn dieses Zeug ausserhalb eines <td>s eingebaut wird, ich will allerdings diese Layer in einem <td></td> und sie horizontal zentrieren.

Hat jemand Lösungsvorschläge?

Gruss, Markus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text-Schatten browserübergreifend

    Dave
    – Informationen zu den Bewertungsregeln

    Hallo Markus,

    Ich möchte per CSS einen browserübergreifenden Text erzeugen.

    Was ist ein browserübergreifender Text?

    ...

    Ist die Breite von deiner <td> festgelegt?

    Forhe Ostern
    Dave

    --
    sh:( fo:| ch:? rl:° br:> n4:( ie:{ mo:} va:) de:] zu:} fl:| ss:{ ls:& js:{
    Selfcode bei http://emmanuel.dammerer.at/selfcode.html
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text-Schatten browserübergreifend

      Markus Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi!

      Ich meinte halt das dieser _Schatten-Text_ browserübergreifend angezeigt wird.

      Das <td> ist auf 100% eingestellt, zumindest das <table>, somit geht auch <td> über den ganzen Bildschirm.

      Ich habe auch schon versucht diese zwei <div>s in ein <div> zu stecken und es zu zentrieren. Hat aber nicht geklappt!

      Gruss, Markus

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Text-Schatten browserübergreifend

    Thomas J.S.
    – Informationen zu den Bewertungsregeln

    Hallo,

    Ich möchte per CSS einen browserübergreifenden Text erzeugen. Das Praktischste wäre wohl die Version von DrWeb:

    <div id="Layer1" z-index:1; left: 1px; top: 1px; color: #FFF; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif;">Schatten-Text</div>

    Wenn der Code tatsächlich so aussieht, dürfte es nirgendwo funktionieren: die CSS-Angaben gehörten in einem style-Attribut.
    In einer TD kannst du mit position:relative; versuchen.

    Grüße
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text-Schatten browserübergreifend

      Markus Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Tach!

      Ich hab jetzt mal folgendes probiert:

      <table border="0" cellspacing="0" cellpadding="3" width="100%">
          <tr>
           <td align="center">

      <div id="HLayer" style="position:relative;>
      <div id="Layer1" style="position:absolute; left:1px; top:1px; color:#FFFFFF; font-size:24px; font-family:Verdana, Arial, Helvetica, sans-serif;">Hallo</div>
      <div id="Layer2" style="position:absolute; left:0px; top:0px; color:#354A69; font-size:24px; font-family:Verdana, Arial, Helvetica, sans-serif;">Hallo</div>
      </div>

      </td>
          </tr>
         </table>

      Wenn ich den Sinn von lyern verstanden habe, sollte es funktionieren. Tut es aber nicht. Noch eine Möglichkeit wäre folgende:

      <table border="0" cellspacing="0" cellpadding="3" width="100%">
          <tr>
           <td align="center">

      <div id="Layer1" style="position:relative; left:1px; top:30px; color:#FFFFFF; font-size:24px; font-family:Verdana, Arial, Helvetica, sans-serif;">Hallo</div>
      <div id="Layer2" style="position:relative; left:0px; top:0px; color:#354A69; font-size:24px; font-family:Verdana, Arial, Helvetica, sans-serif;">Hallo</div>

      </td>
          </tr>
         </table>

      Die Schrift wird so angezeigt wie ich es haben möchte. Allerdings ist dann ein fetter Rand über dem Text.

      Auch nicht das Wahre. Hat jemand Ideen?

      Gruss, Markus

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Text-Schatten browserübergreifend

        Thomas J.S.
        – Informationen zu den Bewertungsregeln

        Hallo,

        Hat jemand Ideen?

        Folgendes funktionier im IE, Opera und Mozilla:
        Grüße
        Thomas
        -----------------------------------------------
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <html>
        <head>
         <title>Untitled</title>
         <style type="text/css">
          .normal, .schatten {
           position:relative;
           width:100%;
           height:24px;
           margin:0;
           padding:0;
           line-height:24px;
           font-size:24px;
           font-family:Verdana, Arial, Helvetica, sans-serif;
          }
          .normal {
           left:0px;
           top:0px;
           color:#354A69;
          }
          .schatten {
            left:1px;
           top:-24px;
           color:#ffffff;
          }

        </style>
        </head>

        <body>
           <table border="0" cellspacing="0" cellpadding="3" style="width:100%;">
            <tr>
             <td align="center" style="width:100%;">
          <div class="normal">Hallo</div>
          <div class="schatten">Hallo</div>
             </td>
            </tr>
           </table>

        <p>Wenn ich den Sinn von lyern verstanden habe, sollte es funktionieren. Tut es aber nicht. Noch eine Möglichkeit wäre folgende:</p>

        <table border="0" cellspacing="0" cellpadding="3" style="width:100%;">
            <tr>
             <td align="center" style="width:100%;">
          <div class="normal">Hallo</div>
          <div class="schatten">Hallo</div>
             </td>
            </tr>
          </table
        </body>
        </html>

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln