Like Button neben Überschrift

[rbm]

Hallo,

ich würde gerne den Facebook Like Button auf der rechten Seite in Höhe der h1 Überschrift positionieren, und zwar ohne absolute Poistionsangaben

Es soll so aussehen:



h1 Überschrift.................................. like-button
__________________________________________

Artikel bblablablablablablablablablablablablablablablaa
blablablablablablablablablablablablablablablablabl abla
blablablablablablablablablablablablablablablablabl abla
blablablablablablablablablablablablablablablablabl abla
blablablablablablablablablablablablablablablablabl abla





Wie mache ich das?


Gruss

[SharkeyO]

ich würde das folgendermaßen machen:

<h1 style="display:block; width:{maximale Breite in pixeln - Breite des like buttons}: float:left">blabla</h1>
<img style="display:block; width:{Breite des like buttons}: float:left" src="blabla" />
<div class="clear"></div>

Sollte eigentlich gehen.

Grüße
SharkeyO

[rbm]

danke schonmal.

Ich binde den Like Button aber direkt im Layout ein, damit ich nicht jeden Artkel einzeln damit versehen muss. Dadurch steht das Like-Button Div vor dem <h1> Tag.

Und was genau macht display:block?

[rbm]

Niemand ne Idee?

Ich muss das Modul irgendwie Artikeltext und <h1> Tag bekommen.

Noch ein Problem welches ich habe ist die Breite des Like Buttons. In normalen Browsern reichen meine eingestellten 110px aus. Im Iphone Brwoser wird der Button rechts abgeschnitten. Was da los?


Ich glaube das ganze kann nicht funktionieren. Da mein <h1> Tag wie aus meiner skizze oben zu entnehmen eine Linie als Unterstreichung hat, über der ja auch der Like Button stehen soll. Smoit können die divs garnicht nebeneinander liegen, ohne das die Linie vorher aufhört?

[mike_mcfly]

Hm, einfach dem Like-Btn ein float: right geben? Damit müsste die Reihenfolge zumindest optisch umgedreht werden, denke ich.

[rbm]

Ja so hab ichs im Moment auch gemacht, und mit absolutem Abstand nach oben, sodass er auf gleicher Höhe wie die Überschrift ist.

Absolute Position ist allerdings blöd, da wenn die darüberliegenden Breadcrumbs zu lang werden eine zweite Zeile entsteht und der Like Button Nach unten rutscht. Das will ich irgendwie verhindern.

[SharkeyO]

Hey,

Wieso arbeitest du nicht margins oder wrapst deine Inhaltselemente?

<div class="wrapper">
 <h1>blabla</h1>
 <button>...</button>
 <text></text>
</div>

ok?

[rbm]

Aber auch dabei würde die border vom h1 tag doch nicht ganz durch verlaufen?