float und p

[strauberry]

Hallo zusammen,

habe ein Bild mit float:left. Zusätzlich habe ich einen p-Tag. Ist es möglich, dass der ganze p-Tag um das Bild floatet und nicht nur der darin stehende Text?

VIELEN DANK!

strauberry

[strauberry]

Hier noch ein Bild für die Veranschaulichung

[Kropff]

du hast ein bild mit float: left. du willst den text im p um das bild floaten. soll der text so fließen wie im bild zu sehen, oder soll er rechts vom bild stehen?

beispielcode?

gruß
peter

[strauberry]

Der Text floatet wunderbar, das ist genau richtig! Nur die zweite blaue Überschrift ist ebenfalls ein p mit Hintergrund-Grafik (die zwei gelben Linien). Der Text dieses P floatet auch, nur eben die gelben linien nicht.

<PHP>
<img src="images/content_unserepraxis_1.jpg" style="float: left; margin-right: 10px; margin-bottom: 10px;" />

<p class="p_Content_Titel">Lorem ipsum dolor sit amet</p>

.p_Content_Titel {
font-size: 12px;
color: #033357;
background-image: url(images/content_titel_hintergrund.gif);
height: 19px;
margin-bottom: 5px;
margin-top: 14px;
}
</PHP>

DANKE!

[Kropff]

background-position

gruß
peter

[strauberry]

Der Hintergrund ist 1 px breit und wird wiederholt. Das ganze soll flexibel sein, sprich ein CSS-Style für Überschriften (blau) und das passt sich dann automatisch an. Das ganze kommt per CMS aus der DB wo ich eben ein Style haben möchte, der das kann.

[Kropff]

wenn du die gelbe linie auch nach rechts einrücken willst, mußt du mit background-position arbeiten. haben denn alle bilder die gleiche breite?

gruß
peter

[cag-live]

also ich würds erstmal mit

margin-left: xx px;

versuchen.

[Kropff]

Original geschrieben von cag-live
also ich würds erstmal mit

margin-left: xx px;

versuchen.

geht bei ihm nicht, der text soll das bild richtig umfließen (wenn ich strauberry verstanden habe). glaube mittlerweile sogar, dass es für sein problem mit dem hintergrundbild keine lösung gibt.

gruß
peter

[strauberry]

Hintergrund des ganzen: die Inhalte verwenden von "Nicht-Profis" :-) in ein WYSIWYG-Feld eingegeben und die Überschriften im Content sollen eben eine doppelte gelbe Linie haben. Das einfachste ist ja, einen Style anzulegen, der das alles automatisch macht, weil der Kunde hier kein Bild einfügen kann (wir nehmen einfach mal DAU an).

Deswegen kann ich das auch nicht für jede Linie separat machen sondern brauche einen so flexiblen allgemeinen Style, der das alles automatisch rafft... Es sollen also Text UND Hintergrund umfließen.

[Kropff]

Deswegen kann ich das auch nicht für jede Linie separat machen sondern brauche einen so flexiblen allgemeinen Style, der das alles automatisch rafft... Es sollen also Text UND Hintergrund umfließen.

das wird meines erachtens nicht möglich sein, da du in so einem fall mit margin arbeiten musst. das einzige was mir im moment einfällt, wäre ein pfusch. erweiter die bilder rechts um einen z.b. 10px breiten, weissen rand. dann würde das passen. ansonsten

gruß
peter

[cag-live]

was sagt etwas gegen einen margin-left im .p_Content_Titel

[Kropff]

Original geschrieben von cag-live
was sagt etwas gegen einen margin-left im .p_Content_Titel

hast du dir mal das bild angesehen?

peter

[cag-live]

jetzt grad nochmal, hm der Text hat schon nen Rand zum Bild, stimmts?

[Kropff]

jetzt grad nochmal, hm der Text hat schon nen Rand zum Bild, stimmts?

ja, durch das margin beim bild. aber ist wüßte keinen weg, wie der doppelte unterstrich als hintergrundbild völlig dynamisch und flexibel das bild mit umfliessen soll. das ginge nur mit margin oder background-position. in beiden fällen müßte die breite und die höhe des bildes bekannt sein, sowie die anzahlen von zeilen, bei denen man damit arbeiten kann. geht wohl nur über einen üblen js-hack.

gruß
peter