Grafik und Text nebeneinander in einem DIV

[rolli123]

Hallo,

ich habe ein DIV und in diesem füge ich eine Grafik ein. Die Grafik "rutscht" nach links, was ja auch normal ist, wenn ich nicht center oder right eingebe.

Jetzt mein Problem, wo ich wohl ein richtiges BRETT vorm Kopf habe.

Wenn ich neben dieser Grafik einen Text einfügen möchte, z.b. eine H1 Überschrift und diese Überschrift soll also neben der Grafik und auch auf gleicher Höhe eingefügt werden. Das bekomme ich nicht hin.

Der Text erscheint entweder unter der Grafik oder wenn daneben, dann vergrößert sich das DIV in der Höhe und der Text "rutscht" nach unten.

Ich hoffe ich habe das verständlich erklärt.

Bitte um Hilfe, bin wohl anscheindend zu doof dafür))

gruss aus Bremen
Rolf

[PascalKremp]

Hi Rolli,

wenn ich dich richtig verstanden habe sollte dir folgendes helfen:

<style>
​article {
 width:600px;
 margin: 1em auto;
 padding:1em;
 border:1px solid #CCCCCC;
}

article img { 
   padding:10px;
 display:block;
   width:250px;
}

img.left {
    float:left;
}

img.right {
    float:right;
}

img.center {
 margin: 0 auto;
}
</style>

<article>
    <h1>H1 Überschrift</h1>        
    <img class="left" src="http://www.dummyimage.com/250x200/000/fff&text=IMG" alt="" width="250" height="200">    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</article>

<article>
    <h1>H1 Überschrift</h1> 
    <img class="right" src="http://www.dummyimage.com/250x200/000/fff&text=IMG" alt="" width="250" height="200">    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</article>

<article>
    <h1>H1 Überschrift</h1>        
    <img  class="center"  src="http://www.dummyimage.com/250x200/000/fff&text=IMG" alt="" width="250" height="200">    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</article>

<article>
    <img  class="left" src="http://www.dummyimage.com/250x200/000/fff&text=IMG" alt="" width="250" height="200">
    <h1>H1 Überschrift</h1>            
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</article>

<article>
    <img  class="right"  src="http://www.dummyimage.com/250x200/000/fff&text=IMG" alt="" width="250" height="200">    
    <h1>H1 Überschrift</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</article>

<article>        
    <img  class="center"  src="http://www.dummyimage.com/250x200/000/fff&text=IMG" alt="" width="250" height="200">    
    <h1>H1 Überschrift</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</article>
​

Wenn dir das nicht geholfen hat, dann vielleicht das: http://www.traum-projekt.com/forum/3...tml#post982097

Sonst hab ich deine Frage falsch verstanden

Gruß

[sejuma]

http://www.ohne-css.gehts-gar.net/0019.php

[rolli123]

Vielen herzlichen Dank an euch beide für die Unterstützung.

Wobei der link von Sejuma das war, was ich gesucht aber nicht gefunden habe.

Aber auch der Tipp von Pascal ist interessant, werde ihn sobald als möglich mal austesten.

Nochmals DANKE !!!

gruss
Rolf