✔ Floatendes div wird hinterlaufen

[Biergamasda]

Hi Leute

Hab schon in nem andren Thread das Thema behandelt, woraufhin das auch mal funktioniert hat, nur denke ich durch Zufall

Das ganze kann man sich unter http://biergamasta.bi.ohost.de/hp anschauen (und zwar im Gästebuch)

ich weiß nicht warum, aber der antworten button wird immer vom Text hinterlaufen.
HTML

<div class="entryContainer">
    <div class="author"><?php echo $entry['author']; ?></div>
    <div class="date"><?php echo $entry['date']; ?></div>
    <div class="message"><input type="button" class="reply" value="antworten" onclick="makeGbEntry()" />
        <?php echo $entry['message']; ?> <!-- dieser Bereich schreibt die Message raus -->
    </div>                    
</div>

und die Formatierung:

div.entryContainer {
    width: 80%;
    margin: 10px auto;
    border: 1px dashed #847562;
    position: relative;
}

div.author {
    color: #65533b;
    font-weight: bold;
    float: left;
    margin-left: 5px;
    height: 20px;        
    line-height: 20px;
    vertical-align: middle;
}

div.date {
    color: #65533b;
    font-weight: bold;
    float: right;
    margin-right: 5px;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

div.message {
    color: #65533b;
    border-top: 1px dashed #847562;
    padding: 5px;
    margin-top: 20px;
}

input.reply {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-top: 3px;
    margin-left: 3px;
    color: #65533b;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    float: right;
    line-height: 15px;
    vertical-align: middle;
    height: 15px;
    border-top:    1px dashed #847562;
    border-left: 1px dashed #847562;
    border-bottom: none;
    border-right: none;
}

hoffe mir kann da jemand weiterhelfen, bin mit meinem Latein am Ende. Die jetzige Version entspricht der "einst" funktionierenden...

Danke schon mal im Voraus

glg me

 

[Maik]

Hi,

wenn du dich auf deinen anderen Thread beziehst, frage ich mich, warum du dafür extra einen Neuen startest, und nicht den anderen fortsetzt?

Ich hatte dir seinerzeit empfohlen, den Gästebuch-Text in ein Blockelement (z.B. p-Element) einzubetten, damit es das float-Objekt nicht unterwandern kann.

 

[Biergamasda]

Ich habe einen neuen Thread gemacht, um durch den Titel nicht zu verwirren, da das Problem mit dem alten Titel eigentlich nichts am Hut hat, aber in Zukunft werde ich alte Threads weierführen.

Nun, das mitm Blockelement, zB <p> is ja schön und gut. Nur... genau das will ich eben nicht. ein Blockelement ist rechteckig (meines Wissens), demnach habe ich dann entweder rechts auf die gesamte Höhe des Beitrages den rechten Seitenabstand in der Breite des "antworten"-Buttons oder über die gesamte Breite den unteren Abstand in der Höhe des Buttons.


Und das is ja mein Problem, habs ja auch schon mitm <p> Element versucht..

glg me

 

[Maik]

Wenn der Text den Button umfliessen, also ober- und/oder unterhalb von ihm nach rechts fortgeführt werden soll, dann darf das input-Element nicht mit einer absoluten Positionierung aus dem Textfluss genommen werden.

Du mußt dich also entscheiden: entweder umfliesst der Text den Formular-Button, und dieser ist dann nicht rechts unten in der Ecke absolut positioniert, oder er ist es, und wird dafür nicht vom Text umflossen. Beides bekommst du nicht unter einen Hut.

 

[Biergamasda]

Ok, absolut positionieren geht nicht, is auch verständlich... jetz wo du's sagst

Gibts dann ne andere Möglichkeit, den Button rechts unten in der Ecke zu haben und umfließen zu lassen?

glg me

 

[Maik]

Tut mir leid, aber ich seh da keine Möglichkeit, wie sich das bewerkstelligen liesse.