Text soll Layer im Hintergrund überspringen

Status
Nicht offen für weitere Antworten.
A

ais

Mitglied
Hallo!

Da aus dem Titel mein Problem vermutlich nicht ganz klar wird habe ich mal eine Grafik an gehangen.

Ich bekomme es nicht hin, das der Text den Layer 2 frei hält. Da dieser die Farbe des Textes hat, muß er an dieser Stelle aussetzen. Mit float komme ich nicht weiter. Bekomme aber auch in der Textbox kein PlatzhalterObjekt platziert, da der Text aus einer db kommt und die Länge immer variiert.

Auf einer Seite ist mir mal begegnet, das der Text von Box 1 in Box 2 automatisch weiter lief. Denke es war DHTML. Leider finde ich die Seite nicht mehr.

Hat einer ne Idee, wie ich es hinbekomme?


thx ais
 

Anhänge

  • Layer.jpg
    Layer.jpg
    64,1 KB · Aufrufe: 20
Hi,

mir ist mit CSS keine Möglichkeit bekannt, das geschilderte Problem zu lösen.

Ciao
Quaese
 
Hallo!

Danke, auch wenn es nicht sehr hilfreich war.
Sollte die Frage dann besser in eine andere Rubrik geschoben werden

ais
 
Hi,

ich hätte eventuell noch einen Ansatz. Vielleicht hilft es dir weiter, wenn du mit zwei identischen Containern arbeitest, die in unterschiedlichen z-Ebenen angeordnet werden.

Der Text im oberen läuft bis zum Hintergrund mit der gleichen Farbe wie der Text. Der untere ist um die Höhe des gleichfarbigen Hintergrunds nach unten verschoben, enthält aber den gleichen Text wie der obere Container.

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
.textHolder{ position: relative;
             width: 200px;
             line-height: 20px;
             background: url(bg_rot_6x40.gif) 0 120px repeat-x;}
.textHolder .bottomText{ position: relative;
                         top: 40px;
                         color: #f00;
                         z-index: 2;}
.textHolder .topText{ position: absolute;
                      top: 0;
                      height: 120px;
                      width: 100%;
                      background: #fff;
                      color: #f00;
                      overflow: hidden;
                      z-index: 3;}
 //-->
</style>
</head>
<body>
<div class="textHolder">
  <div class="bottomText">
    Illud posse dissentiet ad qui, quo eripuit deterruisset at. Vel primis scripserit
    an, his persius veritus vivendo et. Et mea commune accumsan molestiae, est id velit
    salutandi. Per modus iusto errem id. Cu eam novum oportere, te nec falli zzril. Ut
    vim iisque legendos.
  </div>
  <div class="topText">
    Illud posse dissentiet ad qui, quo eripuit deterruisset at. Vel primis scripserit
    an, his persius veritus vivendo et. Et mea commune accumsan molestiae, est id velit
    salutandi. Per modus iusto errem id. Cu eam novum oportere, te nec falli zzril. Ut
    vim iisque legendos.
  </div>
</div>
</body>
</html>
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück