Container mit „Eselsohren“[IE|M|O]

von: Werner Zenk

Beispiel:

Lorem ipsum
Lorem ipsum dolor sit amet Semper lobortis risus sem
eros eu sollicitudin tellus Vestibulum elit feugiat a
malesuada volutpat lobortis in in felis tellus
Morbi tempus Aliquam Vestibulum ipsum at nulla.

Quelltext:


ohr_ro.gif
21 x 17 Pixel
99 Byte

<style type="text/css">
.container1{
 border: 1px solid #B8B8B8;
 width: 370px;
}

.container1 .rechts_oben{
 background: transparent url(ohr_ro.gif) top right no-repeat;
 position: relative;
 left: 2px;
 top: -1px;
 padding: 15px 4px 5px 5px;
}
</style>

<div class=container1>
 <div class=rechts_oben>
  Lorem ipsum dolor ...
 </div>
</div>

Beispiel:

Quelltext:


ohr_ru.gif
21 x 17 Pixel
98 Byte


papier.jpg
67 x 60 Pixel
1,45 KB

<style type="text/css">
.container2{
 border: 1px solid #B8B8B8;
 width: 370px;
 background-image: url(papier.jpg);
}

.container2 .rechts_unten{
 background: transparent url(ohr_ru.gif) bottom right no-repeat;
 position: relative;
 left: 2px;
 top: 2px;
 padding: 1px 4px 15px 5px;
}
</style>


<div class="container2">
 <div class="rechts_unten">
  Lorem ipsum dolor ...
 </div>
</div>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Mike P: Guter Tipp, und wo bleiben die "Hundeohren" ? Werner: Die Hundeohren kommen Demnächst McFire: Manchmal wird es nötig sein, den Hintergrund des GIF transparent zu machen. Shylock: für mich als Anfänger Thema Webgestaltung einfach super. Danke ! Draugie: und wenn man jetzt auf die Ecke noch einen Link macht zur nächsten Seite - ist es perfekt MD SCATER: einfach nur super. danke für dieses detail.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!