Bild in Tabelle zentrieren von Gunnar Bittersmann, 11.02.2015 20:02

Bild in Tabelle zentrieren

Michelle 11.02.2015 18:02

Hallo ihr Lieben,

ich habe ein großes Problem. Ich habe eine Tabelle angelegt, damit ich Bilder neben Text machen kann, in die erste Zelle kommt das Bild, in die Zweite der Text. Den Text kann ich über text-align super zentrieren. Das Bild bewegt sich keinen Millimeter von der linken Seite weg, egal was ich auch mache. Align, text-align, margin, float, egal was es klebt am linken Rand. Was kann ich tun?

Das ist der Text:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Club 27</title> <meta name="author" content="Julia">

<div id="steuerung"> <ul id="Navigation"> <li><a href="../Index.html">Club 27</a></li> <li><a href="mitglieder.html">Liste der Mitglieder</a></li> <li class="topmenu"><a href="vitae.html">Vitae der Wichtigsten</a> <ul> <li class="submenu"><a href="./brian.html">Brian Jones</a></li> <li class="submenu"><a href="./jimi.html">Jimi Hendrix</a></li> <li class="submenu"><a href="./janis.html">Janis Joplin</a></li> <li class="submenu"><a href="./jim.html">Jim Morrison</a></li> <li class="submenu"><a href="./kurt.html">Kurt Cobain</a></li> <li class="submenu"><a href="./amy.html">Amy Winehouse</a></li> </ul> </li> <li id="li_diskographien"><a href="diskographien.html">Diskographien</a></li> <li><a href="impressum.html">Impressum</a></li> </ul> </div>

<div id="zweite_spalte"> <h2>Diskografien</h2>

<p class="p2"> Hier haben wir die Diskographien der wichtigsten Mitglieder aufgeführt, natürlich chronologisch geordnet. Bis auf eine Ausnahme finden sich nur Alben, die zu Lebzeiten entstanden waren. Posthume Veröffentlichungen werden hier vernachlässigt. </p>

<h3>Brian Jones</h3>

<p class="p2"> Nachfolgend sind die Alben aufgeführt, die Jones zusammen mit den Rolling Stones veröffentlichte.

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Brian/Englands-Newest-Hitmakers-copy.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"The Rolling Stones / England's Newest Hit Makers"</td> </tr>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Brian/no_2.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"The Rolling Stones No.2"</td> </tr>

<tr> <td class="td_img"><img src="../Bilder/Cover/Brian/stones_now.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"The Rolling Stones, Now!"</td> </tr>

<tr> <td class="td_img"><img src="../Bilder/Cover/Brian/out_of_our_heads.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Out Of Our Heads"</td> </tr>

<tr> <td class="td_img"><img src="../Bilder/Cover/Brian/decembers_children.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"December's Children (And Everybody's)"</td> </tr> </table>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Brian/aftermath.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Aftermath"</td> </tr> </table>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Brian/between-the-buttons.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Between the Buttons"</td> </tr>

<tr> <td class="td_img"><img src="../Bilder/Cover/Brian/their-satanic-majesties-request.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Their Satanic Majesties Request"</td> </tr> </table>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Brian/beggars-banquet.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Beggars Banquet"</td> </tr> </table>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Brian/let-it-bleed.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Let It Bleed"</td> </tr> </table>

<br><hr>

<h3>Jimi Hendrix</h3>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Jimi/Are_You_Experienced.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Are You Experienced?"</td> </tr>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Jimi/SmashHits.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Smash Hits"</td> </tr>

<tr> <td class="td_img"><img src="../Bilder/Cover/Jimi/electric_ladyland.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Electric Ladyland"</td> </tr> </table>

<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Jimi/band_of_gypsys.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Band of Gypsys"</td> </tr> </table>

<br><hr>

</div>

<div id="fussbereich"> <p>© Mara Becker, Julia Schaumburg und Michelle Morio</p> </div>

</div>  </body>

</html>

Und hier das CSS:

body { text-align:center; }

h1 { font-weight:lighter; text-transform:uppercase; }

h2 { font-weight:lighter; text-transform:uppercase; margin-top:-5px; margin-bottom:-3px; }

h3 { font-weight:lighter; text-transform:uppercase; text-decoration:underline; }

h4 { font-weight:bold; text-transform:uppercase; text-decoration:none; }

hr { border:solid black 1.75px; }

#wrapper { background-color:white; width:961px; margin:auto; text-align:left; font-family: 'Chaparral Pro',Calibri,Candara; overflow:hidden; }

img { float:left; margin-right:15px; margin-bottom:0px; }

.imgrechts { float:right; margin-left:15px; margin-bottom:0px; }

#kopfbereich { background-image:url(../Bilder/Header/header_neu.png); width:960px; height:290px; }

#steuerung { background-color: white; width:200px; float:left; margin-top:30px; border-right:1px solid black; }

#zweite_spalte { background-color: white; margin-left:250px; width:650px; margin-top:30px; text-align:left; padding:5px; overflow:hidden; }

#zweite_spalte_jimi { background-color: white; margin-left:250px; width:650px; margin-top:30px; text-align:left; padding:5px; }

#zweite_spalte_jimi a:link, a:visited { text-decoration:none; color:green; }

#zweite_spalte_jimi a:hover, a:active { text-decoration:none; color:red; }

#zweite_spalte audio { width:20%; margin-left:570px; }

#table_members { width:75%; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; border-collapse:collapse; }

.table_img { width:650px; margin:auto; border:0; line-height:30px; }

#table_members tr { height:30px; }

#table_members td { width:162.5px; border:1px solid black; }

#table_members tr td { text-align:center; padding:2px; }

.table_img tr td{ vertical-align:center; }

.td_img { width:165px; height:155px; }

.td_text { text-align:center; width:485px; vertical-align:center; }

#td1, #td2, #td3 { font-weight:bold; height:50px; align:center; }

#zweite_spalte a:link { text-decoration:none; color:green; } #zweite_spalte a:visited { text-decoration:none; color:green; }

#p1 { text-align:center; }

.p2 { text-align:justify; }

#zweite_spalte p, #zweite_spalte_jimi p { line-height:30px; font-size:12pt; }

ul#ul_vitae { margin-left:40px; padding:0; }

#ul_zweitespalte { line-height:30px; font-size:12pt; }

ul#Navigation { list-style-type: none; margin: 0; padding:0 } ul#Navigation a { display: block; }

#startseite #li_startseite a, #mitglieder #li_mitglieder a, #vitae #li_vitae a, #diskographien #li_diskographien a, #impressum #li_impressum a { color:white; background-color:black; }

ul#Navigation a:link, a:visited { display: block; color: black; background-color: white; width:180px; text-align: center; padding: 8px; text-decoration: none; text-transform: uppercase; }

ul#Navigation a:hover, a:active { background-color: black; color: white; }

.topmenu ul { display:none; list-style-type:none; margin:0; padding:0; }

.topmenu a, .submenu a { padding:1px 5px; border-collapse:collapse; color:black; text-decoration:none; background-color:white; margin:0; width:180px; }

.submenu a{ font-size:13px; width:180px; position:relative; clear:both; }

#menu a:hover, .topmenu.on a { color:white; background-color:black !important; }

.topmenu:hover ul { display:block; }

#fussbereich { background-color: black; width:960px; height:30px; text-align:center; font-size:10pt; color:white; margin-top:30px; }

#fussbereich p { padding:8px; }

</style>

Seit gnädig, ich fang grad erst an :-)

Beitrag melden

– Informationen zu den Bewertungsregeln

Bild in Tabelle zentrieren
Matthias Apsel Homepage des Autors 11.02.2015 18:11

css
– Informationen zu den Bewertungsregeln
Om nah hoo pez nyeetz, Michelle!

ich habe ein großes Problem. Ich habe eine Tabelle angelegt, damit ich Bilder neben Text machen kann, in die erste Zelle kommt das Bild, in die Zweite der Text.

Gruseliger Code.

Arbeite dir dies einmal durch

* http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundstruktur
* http://blog.selfhtml.org/c/html/html5-serie/

Seit gnädig, ich fang grad erst an :-)

Seid wann? ;-)

Es gab in tiefster DDR-Zeit eine Eselsbrücke:

_Wann_ wir schreiten _Seit_ an _Seit_

Matthias

--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Fest und Festräger.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Bild in Tabelle zentrieren
  
  Michelle 11.02.2015 18:22
  
  css
  – Informationen zu den Bewertungsregeln
  Also Matthias,
  
  ich lerne das hier an der Uni für meinen Optionalbereich und mache es seit 12 Wochen. Ich verstehe dein Problem an meinem Layout nicht. Es ist mit Containern aufgebaut und wird über CSS designt. Außerdem hat dein Kommentar mir nun wirklich so gar nicht geholfen mein Problem zu lösen.
  
  Om nah hoo pez nyeetz, Michelle!
  
  ich habe ein großes Problem. Ich habe eine Tabelle angelegt, damit ich Bilder neben Text machen kann, in die erste Zelle kommt das Bild, in die Zweite der Text.
  
  Gruseliger Code.
  
  Arbeite dir dies einmal durch
  
  * http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundstruktur
  * http://blog.selfhtml.org/c/html/html5-serie/
  
  Seit gnädig, ich fang grad erst an :-)
  Seid wann? ;-)
  
  Es gab in tiefster DDR-Zeit eine Eselsbrücke:
  
  _Wann_ wir schreiten _Seit_ an _Seit_
  
  Matthias
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Bild in Tabelle zentrieren
    
    Matthias Apsel Homepage des Autors 11.02.2015 19:11
    
    css
    
    – Informationen zu den Bewertungsregeln
    Om nah hoo pez nyeetz, Michelle!
    
    Bitte vermeide Vollzitate, sie stören nur den Lesefluss. Danke.
    
    ich lerne das hier an der Uni für meinen Optionalbereich und mache es seit 12 Wochen.
    
    Das ist dann ein besonderer Grund es richtig zu machen. Dabei helfen dir die verlinkten Seiten.
    
    Ich verstehe dein Problem an meinem Layout nicht. Es ist mit Containern aufgebaut und wird über CSS designt.
    
    HTML 4.01 statt 5
    
    Unzählige divs statt semantisch passender Elemente
    
    einen Wrapper, den du nicht benötigst
    
    Klassen und IDs, die nicht benötigt werden
    
    alt-Texte ohne Aussage
    
    Außerdem hat dein Kommentar mir nun wirklich so gar nicht geholfen mein Problem zu lösen.
    
    Eine Tabelle ist für diesen Fall unpassend, denn es handelt sich nicht um tabellarische Daten, sondern lediglich um eine Gruppierung von Bild und Bildunterschrift, verwende für solche Fälle das figure-Element.
    
    Matthias
    
    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bor und Borg.
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Bild in Tabelle zentrieren
      
      Michelle 11.02.2015 19:15
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      Unser Lehrer an der Uni bringt es uns so bei. Er hat uns den Editor gegeben und gesagt, dass wir es so machen sollen. Daher halte ich mich einfach nur an das, was uns beigebracht wird. Aber trotzdem danke für den Tipp mit dem figure-Element. Werde das alles aber wshl. sowieso nie wieder brauchen ;-)
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. Bild in Tabelle zentrieren
        
        Gunnar Bittersmann Homepage des Autors 11.02.2015 20:02
        
        css
        
        – Informationen zu den Bewertungsregeln
        
        @@Michelle:
        
        nuqneH
        
        Unser Lehrer an der Uni bringt es uns so bei.
        
        Au weia. Da liegt das Problem.
        
        Werde das alles aber wshl. sowieso nie wieder brauchen ;-)
        
        Und wenn doch? Dann entsinnst du dich, dass du an der Uni ja mal was „gelernt“ hast. Hast du aber nicht; jedenfalls nichts Gescheites.
        
        Qapla'
        
        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
    2. Bild in Tabelle zentrieren
      
      Linuchs 11.02.2015 20:07
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      Hallo Matthias,
      
      wie lange liegen deine Anfangsversuche zu HTML & Co zurück?
      
      Ich jedenfalls war froh, ungefähr das auf dem Bildschirm zu sehen, was ich gerade so gelernt habe. Aus der Frage, wie ich ein Bild in die Mitte von irgendwas bekomme, eine Grundsatzdiskussion über guten Programmierstil zu machen, halte ich für extrem überzogen.
      
      Wir sollten Selfhtml als Hilfe auf Gegenseitigkeit betrachten, nicht als "belehrende Standard-Wächter".
      
      Freundliche Tipps sind immer willkommen, aber die Hilfe zu verweigern, weil der Code unübersichtlich oder gar verwässert ist, ist nicht die feine Selbsthilfe-Art.
      
      Linuchs
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. Bild in Tabelle zentrieren
        
        Michelle 11.02.2015 21:29
        
        css
        
        – Informationen zu den Bewertungsregeln
        
        Hallo Linuchs,
        
        vielen Dank für deine Hilfe und ich konnte mit deiner Hilfe meine Probleme lösen und habe überflüssige classes gelöscht.
        
        Danke auch dafür, dass du mich verteidigst. Ich belege an der Uni einen HTML-Kurs und leider hat der Dozent offenbar überhaupt keinen Plan. Aber wirklich danke :-)
        
        Liebe Grüße
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum
Bild in Tabelle zentrieren
Linuchs 11.02.2015 19:02

css
– Informationen zu den Bewertungsregeln
Hallo Michelle,

ich habe ein großes Problem. Ich habe eine Tabelle angelegt, damit ich Bilder neben Text machen kann, in die erste Zelle kommt das Bild, in die Zweite der Text. Den Text kann ich über text-align super zentrieren. Das Bild bewegt sich keinen Millimeter von der linken Seite weg, egal was ich auch mache. Align, text-align, margin, float, egal was es klebt am linken Rand. Was kann ich tun?

Habe mal schnell eine kleine Tabelle mit Bild aufgebaut und kann das Problem nicht nachvollziehen. Sowohl mit
```
td {  
  border: 1px solid #888;  
  text-align: center;  
}
```
als auch mit

<td align=center><img src="http://src.selfhtml.org/selfhtml_wiki.png"></td>

steht das Bild horizontal in der Mitte der Tabellen-Zelle. Da muss bei dir also eine übergeordnete Regel wirken.
```
<table class="table_img">  
<tr>  
  <td class="td_img"><img src="../Bilder/Cover/Brian/Englands-Newest-Hitmakers-copy.jpg" alt="Grafik" width="150" height="150"></td>  
  <td class="td_text">"The Rolling Stones / England's Newest Hit Makers"</td>  
</tr>
```
Was sagt den td_img?
```
.td_img {  
width:165px;  
height:155px;  
}
```
Okay, die Ausrichtung ist Standard, also links. Schon mal ein kräftiges Indiz, warum das Bild links steht.

Was sagt die Tabelle
```
.table_img {  
width:650px;  
margin:auto;  
border:0;  
line-height:30px;  
}
```
Auch da wird nichts zur Anordnung in den Zellen gesagt. Geht an der Stelle auch gar nicht, wollte nur schauen, ob du da eine "Hoffnung" notiert hast. Also zweites Indiz, dass die Bilder standardmäßig links stehen.

Warum sollten sie also in der Mitte stehen? Da müsstest du den Tabellen-Zellen mit dem Bild die richtige Anweisung geben. Da es ja scheinbar immer die erste Zelle in einer Zeile ist, kannst du das auch zentral machen und nicht bei jeder Zelle einzeln:
```
.table_img tr>td:nth-of-type(1) {  
  text-align: center;  
}
```
Linuchs
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Michelle: Bild in Tabelle zentrieren