✔ Text neben Bild fließen aber mit div-container/HTML-Code in CSS umwandeln

mera · 16. September 2011

Ich habe Text um ein Bild fließen lassen. Dummerweise muss ich die Angaben in HTML schreiben und krieg sie nicht in CSS umgewandelt. Sobald ich einen div-container oder eine Klasse erstelle, funktioniert es nicht mehr. Mit einem inline-element hab ichs auch versucht.

Da diese Objekte nicht die einzigen auf der Seite sein sollen, brauche ich div-container oder eine Klasse. Am ende muss ich das floaten ja wieder lösen. Bild+Text möchte ich (als inline-blockt) verschieben. Was mach ich falsch?

Das habe ich bisher gemacht. Soll so aussehen wie oben:

HTML:

Code:

<body>

<img src="Images/pinker_pfeil.png" width="80" height="80" style="float:left; margin-right:20px;
  margin-bottom:80px; margin-top:-20px" alt="Gestaltungselement"  />
     <h1 class="teaserschrift"> EINS, ZWEI, DREI.</h1> 
   <p>Der Text für die erste Zeile ist gesetzt.<br>
	Und hier folgt auch schon die zweite Zeile wie schön.</br>
	Aller guten Ding sind drei. <em>>und noch was<em></p> 

<div id="teil2">
   <img src="Images/pinker_pfeil.png"  alt="Gestaltungselement"  />
     <h1 class="teaserschrift"> EINS, ZWEI, DREI.</h1> 
   <p>Der Text für die erste Zeile ist gesetzt.<br>
	Und hier folgt auch schon die zweite Zeile wie schön.</br>
	Aller guten Ding sind drei. <em>>und noch was<em></p> <div>
    
</body>

CSS:

Code:

body {
	background:#maroon;
	font-size: 100.1%;
}

.teaserschrift   {color: #e2007a;}

#teil2  {
    display:inline-block;
	position: relative;
	float:left;
	margin-right: 20px; margin-bottom:400px; margin-top:50px;
}

p {
font-family:"Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
color: #00FF00;}

p em {
font-family:"Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
color: #0000FF;

mera · 18. September 2011

Ich hab es nach viel ausprobieren selbst gelöst.
Der Haupttext soll für beide Texte gleich sein, nur die Überschrift anders.

Et voilá!

HTML:

Code:

<body>
<div id="teaser">
	<div class="content1">
		<img src="Images/pinker_pfeil.png" alt="Gestaltungselement"  />
     	<h1>EINS, ZWEI, DREI.</h1> 
  		 <p>Der Text für die erste Zeile ist gesetzt.<br>
		Und hier folgt auch schon die zweite Zeile wie schön.</br>
		Aller guten Ding sind drei. <em>>und noch was<em></p>
    </div> 
    	<div class="content2">
		<img src="Images/pinker_pfeil.png" alt="Gestaltungselement"  />
     	<h1>EINS, ZWEI, DREI.</h1> 
  		 <p>Der Text für die erste Zeile ist gesetzt.<br>
		Und hier folgt auch schon die zweite Zeile wie schön.</br>
		Aller guten Ding sind drei. <em>>und noch was<em></p>
    </div> 
</div> 
   
</body>

CSS:

Code:

body {
	background:#maroon;
	font-size: 100.1%;
}

#teaser .content1 {
    padding-left: 24px;
	margin: 40px 0 0 0;
}
#teaser .content1 img {
    float: left;
    clear: left;
    margin: -25px 20px 50px 0;
}

#teaser .content2 {
    padding-left: 24px;
	margin: 70px 0 0 0;
}
#teaser .content2 img {
    float: left;
    clear: left;
    margin: -25px 20px 50px 0;
}

.content1 h1 {
font-family: "Arial, Helvetica", sans-serif;
font-size: 26px;
font-style: normal;
color: #e2007a;
} 

.content2 h1 {
font-family: "Arial, Helvetica", sans-serif;
font-size: 26px;
font-style: normal;
color:#FF9900;
} 

p {
font-family:"Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
color: #00FF00;}

p em {
font-family:"Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
color: #0000FF;

✔ Text neben Bild fließen aber mit div-container/HTML-Code in CSS umwandeln

mera

Grünschnabel

mera

Grünschnabel

Anhänge

Neue Beiträge