nicht angemeldet
Hintergrundfarbe für Bild+Text
Hallo,
fange gerade an, mich mit CSS-Layout zu beschäftigen und bin auf folgendes Problen gestoßen:
Habe ein Bild (mit align=left) und Text nebeneinander in einen Bereich mit einer bestimmten Hintergrundfarbe gestellt. Es wird aber nur soweit die Hintergrundfarbe angezeigt, wie der Bereich mit Text ausgefüllt ist. Ist das Bild höher als der Text, ragt es in den nächsten Bereich (mit anderer Hintergrundfarbe) hinaus. Wie mache ich es, dass der eingefärbte Bereich immer soviel Platz einnimmt, wie Text oder Bild in der Höhe belegen (mal ist der Text mehr, mal das Bild)? Oder muss ich dazu wieder auf Tabellen gehen?
Danke Beatrix
-
Hallo,
fange gerade an, mich mit CSS-Layout zu beschäftigen
Schoen! Willkommen im Club!
Habe ein Bild (mit align=left) und Text nebeneinander
in einen Bereich mit einer bestimmten Hintergrundfarbe gestellt.^^^^^^^
Was meinst Du mit "Bereich"?
Es sollte schon ein Block-Level-Element sein,
z.B. <p> oder schlimmstenfalls ein <div>.Ein paar Zeilen (wesentlicher) CSS- und HTML-Quellcode
waeren sehr hilfreich, um zu verstehen, was Du versuchst.Es wird aber nur soweit die Hintergrundfarbe angezeigt, wie der Bereich mit Text ausgefüllt ist.
Hat der "Bereich" denn ausdruecklich festgelegte Dimensionen?
Oder muss ich dazu wieder auf Tabellen gehen?
Nein, bestimmt nicht.
Gruesse,
Thomas
-
Hallo
Es sollte schon ein Block-Level-Element sein,
z.B. <p> oder schlimmstenfalls ein <div>.Ich habe es sowohl mit p als auch div versucht.
In css:
.inhalt1 { background-color:#ffffcc;}
.inhalt2 { backgrundcolor: #ffffff; }in html-Datei z.B.:
<div class="inhalt1"><img scr="bild1.jpg" align="left"> längerer Text 1</div><br clear="all">
<div class="inhalt2"><img src="bild2.jpg" align="left"> Text 2</div>Ich möchte gerne die Inhaltsbereiche 1 und 2 immer abwechseln verwenden für verschiedene Texte und Bilder. Diese können halt unterschiedlich groß und lang sein, daher kann ich hier keine Größenangaben vorgeben.
Beatrx
-
Hallo,
.inhalt1 { background-color:#ffffcc;}
.inhalt2 { backgrundcolor: #ffffff; }^^^^^^
Bitte Quellcode immer mit Copy-Paste uebernehmen
(und ggf. kuerzen), aber nicht abtippen.<div class="inhalt1"><img scr="bild1.jpg" align="left"> längerer Text 1</div><br clear="all">
Das <br clear="all"> ist veraltet. In CSS schreibt man clear:both;
Ich schlage vor:
.inhalt1 { background-color:#ffffcc; clear:both; }
.inhalt2 { background-color:#ffffff; clear:both; }Zudem koenntest Du mal zur Kontrolle die Rahmen der Elemente
sichtbar machen:.inhalt1 { border:1px solid green; }
.inhalt2 { border:1px dotted red; }<div class="inhalt2"><img src="bild2.jpg" align="left"> Text 2</div>
P waere eigentlich sinnvoller als DIV.
Und das align="left" koenntest Du auch gleich per CSS loesen,
und zwar mit float:left.inhalt1 img, .inhalt2 img { float:left; }
Dazu brauchen die Bilder noch eine Width-Angabe. Wenn alle Bilder
gleich breit sind, kannst Du sie auch im zentralen CSS machen,
sonst per Inline-Style <img ... style="width:200px;"> oder so.Ich möchte gerne die Inhaltsbereiche 1 und 2 immer abwechseln verwenden für verschiedene Texte und Bilder. Diese können halt unterschiedlich groß und lang sein, daher kann ich hier keine Größenangaben vorgeben.
Jetzt verstehe ich, was Du willst, und sehe ein, dass man
die Breiten nicht global festlegen kann.Die Problemursache sehe ich noch nicht.
Ein P oder DIV sollte immer so breit sein wie der ganze
Bereich, der ihm zur Verfuegung steht.
(Kann aber sein, dass FLOAT bzw. sein veralteter Vorfahre
align="left" da einen Streich spielen...)Welche HTML-Version benuetzt Du?
Mit welchem Browser hast Du die Probleme?
(Es klingt fuer mich fast nach Netscape 4...)Gruesse,
Thomas
-
Hallo,
mit
<div class="inhalt2"><img style="float:left" src="bild2.jpg"> Textextetx <p style="clear:left"></p>
</div>
klappt es jetzt ;-)
Seltsamerweise nicht, wenn anstatt des div ein p steht.
(kein Netscape, sondern IE6 )Aber danke, ich werde mich bemühen, alle "alten" html-Angaben konsequent durch css-Def. zu verdrängen...
Beatrix
-
-
Hi,
warum verwendest Du eigentlich nur teilweise CSS und daneben noch die HTML-Attribute?
Du könntest statt "align" besser:
.inhalt1 img { float:left;" }
verwenden.Um den Hintergrund auf das ganze umschließende DIV zu erweitern, müßtest innerhalb des DIVs ein Element mit clear:left; setzen.
freundliche Grüße
Ingo-
Hallo Ingo,
das wars. Ich habe das align als CSS geschrieben und dann noch ein <p style="clear:left"> eingefügt. Klappte aber nur für <div>, nicht für <p>-Bereich.Vielen Dank
Beatrix-
Hi,
das wars. Ich habe das align als CSS geschrieben und dann noch ein <p style="clear:left"> eingefügt. Klappte aber nur für <div>, nicht für <p>-Bereich.
das liegt daran, daß p nur inline-elemente enthalten darf. es geht also p in div, nicht aber div in p, dafür aber div in div. übrigens würde ich sicherheitshalber dem clearenden element einen inhalt, und wenn es ein ist, geben.
freundliche Grüße
Ingo-
Hallo,
übrigens würde ich sicherheitshalber dem clearenden element einen inhalt, und wenn es ein ist, geben.
Gerade hat jemand in einem anderen Thread einen interessanten
Link zum Thema float und clear gepostet:
http://www.complexspiral.com/publications/containing-floats/Gruesse,
Thomas
-
-
-
-
-
-
Füge im CSS folgendes ein:
div.clearer {clear: left; line-height: 0; height: 0;}Füge am Ende des Abschnitts folgendes ein:
<div class="clearer"> </div>http://www.complexspiral.com/publications/containing-floats/