Anzeige

Anordnung von einer Grafik und Text

Anordnung von einer Grafik und Text | PSD-Tutorials.de

Erstellt von xxCyRiuSxx, 01.05.2011.

  1. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    Guten Morgen liebes Forum, ich bin seit gestern Abend am versuchen das ich das optisch so hin bekomme das ich 2 Grafiken neben einander stehen habe (Zentriert) aber neben jeder Grafik muss noch etwas Text rechts daneben aber linksbündig.
    Es sind insgesamt 8 Bilder also 4 Gruppen. Habe schon versucht jede Gruppe in ein Div zu setzten was nichts geholfen hat, habe auch schon versucht jede Grafik und Text in ein Div zu setzten, hat auch nichts gebracht. Dann hab ich einfach eine Tabelle genommen da hat des geklappt will aber nicht mit Tabellen arbeiten.

    Was könnte ich machen?

    p.s Habe die Grafik mit einem float:left versehen aber dann schreibt er mir den Text darunter oder amcht die Grafik wieder kleiner ...

    p.s.s Habe mir auch gedacht das ich dann vielleicht mit Listenpunkten arbeiten kann, das habe ich aber noch nicht ausprobiert das mach ich jetzt gleich.
     
    #1      
  2. MegaAdi

    MegaAdi Freak

    1
    Dabei seit:
    20.11.2009
    Beiträge:
    610
    Geschlecht:
    männlich
    Ort:
    Görlitz
    Software:
    Rassierwasser vom Lidl :D
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Mit Tabellen arbeiten ist generell schlecht, da Tabellen nicht zum layouten da sind.
    So wie ich dich jetzt verstanden habe ist unteres Beispiel das, was du suchst oder?

    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    2.   <head>
    3.     <title>Bild-Test</title>
    4.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    5.     <style type="text/css">
    6.       .img_div{
    7.         float: left;
    8.         width: 250px;
    9.         border: 1px solid black;
    10.         margin: 5px;
    11.         padding: 5px;
    12.       }
    13.       .img_div img{
    14.         margin-right: 5px;
    15.         width: 80px;
    16.         height: 160px;
    17.         float: left;
    18.         border: 1px solid black;
    19.       }
    20.     </style>
    21.   </head>
    22.   <body>
    23.     <div class="img_div">
    24.       <img />
    25.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    26.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    27.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    28.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    29.     </div>
    30.     <div class="img_div">
    31.       <img />
    32.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    33.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    34.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    35.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    36.     </div>
    37.     <div class="img_div">
    38.       <img  />
    39.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    40.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    41.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    42.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    43.     </div>
    44.     <div class="img_div">
    45.       <img />
    46.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    47.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    48.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    49.       Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn!
    50.     </div>
    51.   </body>
    52. </html>
    Gruß Adrian
     
    Zuletzt bearbeitet: 01.05.2011
    #2      
  3. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Ok danke dir das ist schon mal nicht schlecht. also ist es besser wenn ich dann für jedes Bild nen eigenen Div anlege ja? Wenn ja bekomme ich das denn dann trotzdem noch hin das ich die 4 x 2er Gruppen noch auch die Website zentriert bekomme?
     
    #3      
  4. MegaAdi

    MegaAdi Freak

    1
    Dabei seit:
    20.11.2009
    Beiträge:
    610
    Geschlecht:
    männlich
    Ort:
    Görlitz
    Software:
    Rassierwasser vom Lidl :D
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Für jedes img mit text ist es Sinnvoll da du dann den Text jeweils zum Bild hinzufügen kannst. Zentrieren kannst du das ganze dann wenn du dem Body-Tag (oder machst noch ein content-div ausenrum) margin: 0 auto; gibst. So wird es automatisch horizontal zentriert.
    Gruß Adrian
     
    #4      
  5. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Whoa doch so einfach ... ? Du hast mich echt gerettet! Ich denke das war dann gestern doch wohl zu spät, das ich das nicht hin bekommen habe. Du warst mir echt eine große Hilfe!

    Ach so, noch was. Ich habe den Divs immer ID´s vergeben hab jetzt gesehen das du mit Klassen arbeitest. Ist das besser?
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Den divs die selben IDs zu geben ist wirklich nicht valide - den Divs dieselben Klassen zu geben ist sinnfrei, überhaupt divs zu verwenden ist fraglich.
    wenn du eine Liste von Bildern mit Beschreibungen hast, warum dann nicht auch eine Liste verwenden? (deine erste Idee war schon richtig).
    (man sollte immer misstrauisch werden, wenn zur Erreichung eines Ziels innerhalb eines Layouts Divs ineinander geschachtelt werden müssen)
    zB:
    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6. <meta name="language" content="de" />
    7. <style type="text/css">
    8. #bilder{
    9.   width: 500px;
    10.   list-style: none;
    11.   margin: 0 auto;
    12. }
    13. #bilder li{
    14.   clear: both; /*clear: left */
    15. }
    16. #bilder img{
    17.   float: left;
    18.   margin: 5px;
    19. }
    20. </style>
    21. <title></title>
    22. </head>
    23. <body>
    24. <ul id="bilder">
    25.   <li><img src="http://twoiback.de/samples/32/archit12.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
    26.   <li><img src="http://twoiback.de/samples/32/auge124.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
    27.   <li><img src="http://twoiback.de/samples/32/euro.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
    28.   <li><img src="http://twoiback.de/samples/32/kuh.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
    29. </ul>
    30. </body>
    31. </html>
    32.  
    html soll Struktur beschreiben.
     
    Zuletzt bearbeitet: 01.05.2011
    #6      
  7. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Hmm also doch mit einer Liste Arbeiten?!
    Ok werde ich mal ausprobieren.
     
    #7      
  8. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    So das hat wunderbar geklappt mit der liste jetzt ist nur die Frage muss ich insgesamt 4 Listen machen? Weil ich mag ja gerne 2er Gruppen haben.
     
    #8      
  9. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Hab wieder ein Problem, ich habe jetzt die Auflistung in eine Tabelle gepackt weil ich das nciht anderes realisieren kann das ich 2er Gruppen habe, nur jetzt skaliert der mir das Bild was rechts steht größer als das was links steht obwohl die Werte gleich sind ...

    HTML
    Code (Text):
    1. <ul id="Service_Logos">
    2. <table border="0" cellspacing="1" cellpadding="1">
    3.   <tr>
    4.     <td><li>
    5. <img src="../Logos/IQ_service_new.PNG" alt="iq_service"/>
    6. <span><h2>Text</h2><p>Text</p> Text</span>
    7. </li></td>
    8.     <td><li>
    9. <img src="../Logos/Fachberatung.PNG" alt="fachberatung" />
    10. <span><h2>Text</h2><p>Text</p> Text</span>
    11. </li></td>
    12.   </tr>
    13.   <tr>
    14.     <td><li>
    15. <img src="../Logos/Lieferservice.png" alt="lieferservice"/>
    16. <span><h2>Text</h2><p>Text</p>Text</span>
    17. </li></td>
    18.     <td><li><img src="../Logos/altgerät_entsorgung.PNG" alt="altgerät"/>
    19. <span><h2>Text</h2><p>Text</span>
    20. </li></td>
    21.   </tr>
    22.   <tr>
    23.     <td><li><img alt="bargeldlos" / src="../Logos/bargeldlos.png"/>
    24. <span><h2>Text</h2>Text</span>
    25. </li></td>
    26.     <td><li><img src="../Logos/Garantie.png" alt="garantie"/>
    27. <span><h2>Text</h2><p>Text</p>Text</span>
    28. </li></td>
    29.   </tr>
    30.   <tr>
    31.     <td><li><img src="../Logos/Reparaturdienst.png" alt="werkstatt"/>
    32. <span><h2>Text</h2>Text</span>
    33. </li></td>
    34.     <td><li><img src="../Logos/zubehör.PNG" alt="zubehör" />
    35. <span><h2>Text</h2><p>Text,</p> Text.</span>
    36. </li></td>
    37.   </tr>
    38. </table>
    39. </ul>
    CSS
    Code (Text):
    1. #logo {text-align:center;
    2.  
    3. }
    4.  
    5. #header {min-height:101px;
    6.             overflow:hidden;
    7.             width: 100%;
    8. }
    9.  
    10.  
    11. #navigation { text-align:center;
    12.                 margin-top:2%;
    13.                
    14. }
    15. #Service_Logos{
    16.   width:55%;
    17.   list-style: none;
    18.   margin: 3% auto;
    19. }
    20. #Service_Logos li{
    21.   clear: both; /*clear: left */
    22.  
    23. }
    24. #Service_Logos img{
    25.   float: left;
    26.   width:30%;
    27. }
     
    Zuletzt bearbeitet: 01.05.2011
    #9      
  10. Krankenzimmer

    Krankenzimmer Noch nicht viel geschrieben

    Dabei seit:
    01.05.2011
    Beiträge:
    1
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Wieso nimmst du das clear der Listenelemente nicht raus und ersetzt dieses durch ein float: left. Du musst allerdings die Mindestbreite deines umschließenden Containers ( in diesem Fall ist es das Tag ul ) entsprechend Erhöhen (ca. 1200px ?).

    Eine Tabelle innerhalb einer Liste ist Fragwürdig.

    Code (Text):
    1. <html xmlns="http://www.w3.org/1999/xhtml">
    2. <head>
    3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    4. <meta name="language" content="de" />
    5. <style type="text/css">
    6. *{ margin: 0; padding: 0; }
    7. #bilder{
    8.   width: 1200px;
    9.   list-style: none;
    10.   margin: 0 auto;
    11. }
    12. #bilder li{
    13.   float: left;
    14. }
    15. #bilder img{
    16.   float: left;
    17.   margin: 5px;
    18. }
    19. </style>
    20. <title></title>
    21. </head>
    22. <body>
    23. <ul id="bilder">
    24.   <li><img src="http://twoiback.de/samples/32/archit12.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
    25.   <li><img src="http://twoiback.de/samples/32/auge124.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
    26.   <li><img src="http://twoiback.de/samples/32/euro.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
    27.   <li><img src="http://twoiback.de/samples/32/kuh.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
    28. </ul>
    29. </body>
    30. </html>
     
    #10      
  11. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Ich hab das jetzt mit Divs geregelt. Anders hab ich das nicht hin bekommen.
     
    #11      
  12. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.079
    Geschlecht:
    männlich
    Ort:
    Ö
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Trotzdem kann auch ich dir nur dazu raten, dass ganze mit einer Liste umzusetzen. Sokie hat vollkommen Recht wenn er sagt, dass HTML die Struktur beschreiben soll.
    Ich weiß nicht genau, wie dein endgültiges Layout aussehen soll, aber es lässt sich definitiv auch semantisch korrekt umsetzen.
    Deine Beiträge hören sich für mich so an, als ob dir das Prinzip von float/clear nicht vertraut ist und du dich damit besser auseinandersetzen solltest?
    Bzw. würde mich ein konkretes Bsp. interessieren, wie du dir dein Layout genau vorstellst? Das ist immer besser als eine Beschreibung, welche falsch interpretiert werden kann.

    L. G.
     
    #12      
  13. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    [​IMG]

    So hätte ich das gerne aber ich hab das nicht hin bekommen mit dem floaten arbeite ich ja nur hab ich das aus welchen Gründen auch immer nicht geschafft eine Auflistung zu machen die dem entspricht was ich jetzt habe
     
    #13      
  14. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    aus einem Bild kann man nicht viel erkennen. Wie cebito dir schon an anderer Stelle schrieb, lad das was du hast einfach mal hoch (das soll doch sowieso fürs i-net sein, oder?), dann kann man sich ein Bild machen.
    Ansonsten macht das Ganze hier nicht viel Sinn.
    hier aber noch ein Beispiel wie es gehen kann:
    http://twoiback.de/PSD/liste/liste.htm
     
    Zuletzt bearbeitet: 03.05.2011
    #14      
  15. xxCyRiuSxx

    xxCyRiuSxx Nicht mehr ganz neu hier

    Dabei seit:
    22.11.2009
    Beiträge:
    66
    Geschlecht:
    männlich
    Anordnung von einer Grafik und Text
    AW: Anordnung von einer Grafik und Text

    Ja genau so dachte ich mir das hast du villt auch den css schnipsel für mich
     
    #15      
x
×
×