nicht angemeldet
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">
<link rel="stylesheet" href="../stylesheets/design.css" type="text/css"> </head> <body id="diskographien"> <!-- hier beginnt der Wrapper --> <div id="wrapper">
<div id="kopfbereich"> </div>
<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>
<!--Brian Jones Diskographie Beginn-->
<h3>Brian Jones</h3>
<p class="p2"> Nachfolgend sind die Alben aufgeführt, die Jones zusammen mit den Rolling Stones veröffentlichte.
<h4>1964</h4>
<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>
<tr> <td class="td_img"><img src="../Bilder/Cover/Brian/12-X-5-The-Rolling-Stones.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"12 x 5"</td> </tr> </table>
<h4>1965</h4>
<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>
<h4>1966</h4>
<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>
<h4>1967</h4>
<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>
<h4>1968</h4>
<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>
<h4>1969</h4>
<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>
<!--Brian Jones Disko Ende--> <br><hr> <!--Jimi Hendrix Disko Beginn-->
<h3>Jimi Hendrix</h3>
<h4>1967</h4>
<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>
<tr> <td class="td_img"><img src="../Bilder/Cover/Jimi/AxisBoldAsLove.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Axis: Bold As Love"</td> </tr> </table>
<h4>1968</h4>
<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>
<h4>1970</h4>
<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>
<h4>1971</h4>
<table class="table_img"> <tr> <td class="td_img"><img src="../Bilder/Cover/Jimi/cry_of_love.jpg" alt="Grafik" width="150" height="150"></td> <td class="td_text">"Cry of Love"</td> </tr> </table>
<!--Jimi Hendrix Disko Ende--> <br><hr> <!--Janis Joplin Disko Beginn-->
</div>
<div id="fussbereich"> <p>© Mara Becker, Julia Schaumburg und Michelle Morio</p> </div>
</div> <!-- hier ist das Ende des Elements Wrapper --> </body>
</html>
Und hier das CSS:
<style type="text/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 :-)
Matthias Apsel
Gunnar Bittersmann