Spezielle Konstruktion

[Nils Boom]

Hallo zusammen!

Ich habe folgendes Problem:

So in etwa soll mein Ergebnis nachher aussehen:

http://www-users.rwth-aachen.de/Nils.Boom/vorlage.JPG

So sieht das zug. HTML aus:

<div class="theorie">
  <span class="theorie_titel">Theorie</span>
  <div class="textbereich">
    <div>test</div>
    <div>test</div>
  </div>
</div>

Und so die CSS-Einträge:

.theorie {
   background-color: #FFF;
   border-bottom: 1px solid #9d9d9d;
   background-image:url(icon_reading.gif);
   background-position:top left;
   background-repeat:no-repeat;
   margin-bottom: 30px;
   margin-top: 30px;
   text-align:left;
}

.theorie_titel {
    font-weight:bold;
    color: #568D14;
    font-size: 24px;
    letter-spacing:-1px;
    vertical-align: top;
    background: #FFF;
    padding-bottom: 0px;
    padding-right: 0px;
    margin-bottom: 0px;
    margin-left: 50px;
    background-image:url(corner.gif);
    background-position:top right;
    background-repeat:no-repeat;
    background-color:white;
    top: 0;
    display:block;
}

Das corner.gif sieht wie folgt aus:

http://www-users.rwth-aachen.de/Nils.Boom/corner.gif

icon_reading.gif:

http://www-users.rwth-aachen.de/Nils.Boom/icon_reading.gif

So weit, so gut.

Folgendes Problem habe ich allerdings: Da ich den span als disply:block deklariert habe, passt er sich nicht an den Text an, so dass bei längerem Text folgendes passiert:

http://www-users.rwth-aachen.de/Nils.Boom/vorlage2.JPG

Hat jemand eine Idee, wie ich es realisiert bekomme, dass das Hintergrundbild entsprechend mit nach rechts verschoben wird, wenn der Text länger wird?

Vielen Dank für eure Hilfe!

Schönen Gruß,

Nils

[bleicher]

hi!
hast du versucht den titeltext mit "normalem"hintergrund und :after auszustatten?Aber ich glaueb IE (möge bill so viele euros verlieren wie MSIE fehler hat) macht da nicht imemr mit....
MFG
bleicher

[Patrick Andrieu]

Hallo Nils!

Vielleicht ist die Technik der "Sliding doors" etwas für dich:

http://alistapart.com/articles/slidingdoors/

und der Link hoffentlich hilfreicher als der etwas sinnbefreite Beitrag meines Vorgängers.

Viele Grüße aus Frankfurt/Main,
Patrick