Anordnung von einer Grafik und Text

xxCyRiuSxx · 01.05.2011

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.

MegaAdi · 01.05.2011

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Bild-Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
      .img_div{
        float: left;
        width: 250px;
        border: 1px solid black;
        margin: 5px;
        padding: 5px;
      }
      .img_div img{
        margin-right: 5px;
        width: 80px;
        height: 160px;
        float: left;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="img_div">
      <img />
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
    </div>
    <div class="img_div">
      <img />
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
    </div>
    <div class="img_div">
      <img  />
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
    </div>
    <div class="img_div">
      <img />
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
      Dies ist ein Test-Text ohne Sinn! Dies ist ein Test-Text ohne Sinn! 
    </div>
  </body>
</html>

Gruß Adrian

xxCyRiuSxx · 01.05.2011

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?

MegaAdi · 01.05.2011

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

xxCyRiuSxx · 01.05.2011

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?

sokie · 01.05.2011

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
#bilder{
  width: 500px;
  list-style: none;
  margin: 0 auto;
}
#bilder li{
  clear: both; /*clear: left */
}
#bilder img{
  float: left;
  margin: 5px;
}
</style>
<title></title>
</head>
<body>
<ul id="bilder">
  <li><img src="http://twoiback.de/samples/32/archit12.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/auge124.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/euro.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/kuh.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
</ul>
</body>
</html>

html soll Struktur beschreiben.

xxCyRiuSxx · 01.05.2011

AW: Anordnung von einer Grafik und Text

Hmm also doch mit einer Liste Arbeiten?!
Ok werde ich mal ausprobieren.

xxCyRiuSxx · 01.05.2011

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.

xxCyRiuSxx · 01.05.2011

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:

<ul id="Service_Logos">
<table border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td><li>
<img src="../Logos/IQ_service_new.PNG" alt="iq_service"/>
<span><h2>Text</h2><p>Text</p> Text</span>
</li></td>
    <td><li>
<img src="../Logos/Fachberatung.PNG" alt="fachberatung" />
<span><h2>Text</h2><p>Text</p> Text</span>
</li></td>
  </tr>
  <tr>
    <td><li>
<img src="../Logos/Lieferservice.png" alt="lieferservice"/>
<span><h2>Text</h2><p>Text</p>Text</span>
</li></td>
    <td><li><img src="../Logos/altgerät_entsorgung.PNG" alt="altgerät"/>
<span><h2>Text</h2><p>Text</span>
</li></td>
  </tr>
  <tr>
    <td><li><img alt="bargeldlos" / src="../Logos/bargeldlos.png"/>
<span><h2>Text</h2>Text</span>
</li></td>
    <td><li><img src="../Logos/Garantie.png" alt="garantie"/>
<span><h2>Text</h2><p>Text</p>Text</span>
</li></td>
  </tr>
  <tr>
    <td><li><img src="../Logos/Reparaturdienst.png" alt="werkstatt"/>
<span><h2>Text</h2>Text</span>
</li></td>
    <td><li><img src="../Logos/zubehör.PNG" alt="zubehör" />
<span><h2>Text</h2><p>Text,</p> Text.</span>
</li></td>
  </tr>
</table>
</ul>

CSS

Code:

#logo {text-align:center;

}

#header {min-height:101px;
            overflow:hidden;
            width: 100%;
}


#navigation { text-align:center;
                margin-top:2%;
                
}
#Service_Logos{
  width:55%;
  list-style: none;
  margin: 3% auto;
}
#Service_Logos li{
  clear: both; /*clear: left */
  
}
#Service_Logos img{
  float: left;
  width:30%;
}

Krankenzimmer · 01.05.2011

AW: Anordnung von einer Grafik und Text

sokie schrieb:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
#bilder{
  width: 500px;
  list-style: none;
  margin: 0 auto;
}
#bilder li{
  clear: both; /*clear: left */
}
#bilder img{
  float: left;
  margin: 5px;
}
</style>
<title></title>
</head>
<body>
<ul id="bilder">
  <li><img src="http://twoiback.de/samples/32/archit12.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/auge124.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/euro.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/kuh.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
</ul>
</body>
</html>

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:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
*{ margin: 0; padding: 0; }
#bilder{
  width: 1200px;
  list-style: none;
  margin: 0 auto;
}
#bilder li{
  float: left;
}
#bilder img{
  float: left;
  margin: 5px;
}
</style>
<title></title>
</head>
<body>
<ul id="bilder">
  <li><img src="http://twoiback.de/samples/32/archit12.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/auge124.jpg" /><span>etwas Text. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/euro.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
  <li><img src="http://twoiback.de/samples/32/kuh.jpg" /><span>etwas Text,. Dieser soll das Bild beschreiben</span></li>
</ul>
</body>
</html>

xxCyRiuSxx · 01.05.2011

AW: Anordnung von einer Grafik und Text

Ich hab das jetzt mit Divs geregelt. Anders hab ich das nicht hin bekommen.

Myhar · 02.05.2011

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.

xxCyRiuSxx · 02.05.2011

AW: Anordnung von einer Grafik und Text

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

sokie · 03.05.2011

AW: Anordnung von einer Grafik und Text

xxCyRiuSxx schrieb:
..was ich jetzt habe

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:

xxCyRiuSxx · 04.05.2011

AW: Anordnung von einer Grafik und Text

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