div-Element positionieren

Adrian Anger

Hallo Leute,

Ich rolle gerade ein Redesign meiner Homepage aus (läuft mit Wordpress) und dabei stehe ich gerade vor einem kleinen Problem:

In einigen Artikeln soll eine Art Bewertungskasten implementiert werden.
Hier ist ein Beispiel (Bitte nicht auf das Thema eingehen)

Der Bewertungskasten ist in einem div-Element und soll nach oben neben das Artikelbild geschoben werden.
Das Problem: Wenn ich es als absolute positioniere, ignoriert die box alle anderen Elemente und schiebt sich beim verkleinern des Browserfensters davor.
Wenn ich sie relative positioniere, bleibt der ursprüngliche Platz der Box frei.

Ich will sie aber auch nicht direkt im Quellcode implementieren, weil sie eben nicht in jedem Artikel erscheinen soll.

Was ist der richtige Lösungsweg?

Vielen Dank

modem-kind

hab mal ne frage..
warum zeigt Ihr eigentlich nicht Euer Projekt..
und statt dessen ne sogenannte Beispiel Seite..

soll man sich so Dein Projekt vorstellen erraten..

is das soo Geheim.. dann stells ma nicht ins Internet..
ne echt jez..-

html { display: none; } /* huuuuch */

Adrian Anger

Zitat von modem-kind

hab mal ne frage..
warum zeigt Ihr eigentlich nicht Euer Projekt..
und statt dessen ne sogenannte Beispiel Seite..

soll man sich so Dein Projekt vorstellen erraten..

is das soo Geheim.. dann stells ma nicht ins Internet..
ne echt jez..-

html { display: none; } /* huuuuch */

Sorry, aber ich versteh deinen Einwand nich ganz. Die Beispiel-Seite ist aktuell die einzige Unterseite wo das Element eingesetzt wird.
Sonst ist das "Projekt" doch komplett offen...

djheke

Dann platzier doch dein Bewertungs-DIV neben <div class="post-thumbnail header">...</div>.

Code

.post-thumbnail {
    position: relative;
    width: 50%;
    margin: 0px 0px 0px 60px;
    float: left;
}


/* Div Bewertung inline Style*/
Element {
    border-style: solid;
    border-width: 3px;
    border-color: #1E73BE;
    background-color: #C0D3E2;
    text-align: center;
    padding: 5px 20px 0px;
    float: right;
 }


/h2 Überschrift inline-Style*/
Element {
    text-align: justify;
    clear: both;
}

Alles anzeigen

Sollte funktionieren.

Adrian Anger

Ja das würde sicher funktionieren. Allerdings ist das Element dann in jedem Beitrag und das möchte ich nicht.

djheke

Na dann versuch doch mal dein thumbnail-content in post-content zu packen. Aber oberhalb von dein Berwertungs-Div und die Überschrift kommt gleich darunter. Bei thumpnail musst du display:block entfernen, oder durch display:inline-block ersetzen und ein unteren Außenabstand notieren. Hab's probiert und klappt.

Gastl

Ich würde mit include arbeiten.

modem-kind

Jo sorry hatte es nicht gesehen das das Deine Seite ist ..also Original Projekt
von Dir ist.. weil der link dahin ja als Beispielseite bezeichnet ist..

Good Luck

function holeBier() {
holeBier()
}

Adrian Anger

Danke für die bisherigen Tipps, ich gehe jetzt im Layout einen etwas anderen Weg und habe direkt im WP-Theme neben das Artikelbild einen Werbebanner platziert.

Aktuell laufen Thumbnail und Banner als inline-block und das funktioniert auch recht gut.

Allerdings kommt es dadurch zu einem neuen Problem: Bei kleinem Browserfenster oder auf dem Smartphone, ca ab 750px wird der Content-Container und der Banner rechts abgeschnitten.
Könnt ihr ja z.b. hier mal testen.

Wie kann ich das beheben, bzw. woran liegt das?

Tags