tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
1
ZUGRIFFE
794
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 16.09.11 14:48 #1
    mera mera ist offline Rookie
    Registriert seit
    Sep 2011
    Beiträge
    6
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    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;
     
    Zitieren Zitieren
  2. 18.09.11 13:49 #2
    mera mera ist offline Rookie
    Registriert seit
    Sep 2011
    Beiträge
    6
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    <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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

    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;
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Text neben Bild fließen aber mit div-container/HTML-Code in CSS umwandeln-screenshot_richtig.jpg  
     
    Zitieren Zitieren
« On-Mouseover Menü mit zusätzlichem Teaser Bild daneben | Container verrutschen »

Ähnliche Themen

  1. Bild neben Text
    Von Superdok im Forum CSS
    Antworten: 6
    Letzter Beitrag: 16.04.10, 10:53
  2. Text in HTML Code umwandeln, aber <a href="..">LINK</a> nicht umwandeln?
    Von chris4712 im Forum PHP
    Antworten: 10
    Letzter Beitrag: 17.06.07, 01:09
  3. [InDesign] Text um Bild fließen lassen
    Von DirkHo im Forum Desktop Publishing (DTP)
    Antworten: 6
    Letzter Beitrag: 19.10.05, 09:00
  4. Text um Bild fließen lassen
    Von webpagemaster im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 01.02.05, 10:38
  5. Text neben Bild
    Von hagi2k2 im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 28.05.02, 11:03

Stichworte