nicht angemeldet
Position absolute
Hallo, ich habe leider ein Problem. (haha, sonst würde ich ja wohl kaum einen Thread aufmachen, oder??)
Ich bastle gerade eine Site und da kommt ein violetter Kasten vor. In allen Ecken hab ich ein quadratisches Bild (22px hoch 2) und den Rest fülle ich mit css-divs (ich definiere grösse und ort im css und setze mehrere davon zusammen, um mit den Bildern zusammen ein Rechteck zu erhalten.)
Nun will ich aber einen weiteren Kasten einfügen, genau unter dem ersten Kasten und die Beiden durch Breaks trennen. ->logisch, ich darf kein position:absolute->top verwenden, da dann die Kästen hintereinander gelegt würden. Was aber kann ich sonst tun?? wenn ich das top:xy rausnehme, kommt der Textkasten genau 22px zu hoch -> er verdeckt die Bilder und nimmt mir die Freude :'( .
Meine Kästen sehen ca. so aus (oder so sollten sie aussehen)
bild-obererBalken -bild
inhaltmittextinhaltmitt
inhaltmittextinhaltmitt
inhaltmittextinhaltmitt
bild-untererBalken-bild
Die Kastenlänge passt sich der Textlänge an, da ich nur position absolute:left verwendet habe.
Der entsprechende Teil des html-Files:
<div id="rahmeninhalt">
<div class="lo">
<img src="img/lo.gif" />
</div>
<div class="o">
</div>
<div class="ro">
<img src="img/ro.gif" />
</div>
<div class="inhalt">
Inhaltinhaltinhalt
</div>
<div class="lu">
<img src="img/lu.gif" />
</div>
<div class="ru">
<img src="img/ru.gif" />
</div><div class="unten"></div></div>
<br /><br />
<div class="lo">
<img src="img/lo.gif" />
</div>
<div class="ro">
<img src="img/ro.gif" />
</div>
<div class="o">
</div>
<div class="inhalt">
Inhaltinhaltinhalt
</div>
<div class="lu">
<img src="img/lu.gif" />
</div>
<div class="ru">
<img src="img/ru.gif" />
</div><div class="unten"></div></div>
</div>
Anm. lo,ro,lu,ru sind die Bilder (linksoben, rechtsoben etc.)
Das Css-file sieht so aus (nur der entsprechende Teil):
#rahmeninhalt {
position:absolute;
left:250px;
top:250px; }
.lo {
Width:22Px;
Height:22Px;
position:absolute;
left:0px; }
.ro {
left:680px;
position:absolute;
width:22px;
height:22px; }
.o {
position:absolute;
left:22px;
width:658px;
height:22px;
background-color:#840e72;}
.lu {
left:0px;
position:absolute;}
.ru {
left:680px;
position:absolute;}
.inhalt {
width:702px;
background-color:#840e72;}
.unten {
position:absolute;
left:22px;
width:658px;
height:22px;
background-color:#840e72;}
Wenn ich nun einen Break vor dem inhalt einfüge, so gibt es eine unschöne weisse Linie zwischen dem oberen Balken und dem Inhalt des Kastens...
-
Hi.
Was ist zwischen den Bildern? nichts?
Warum hast du soviele Divs? (z.b. um die Bilder?)
Warum positionierst du soviel?