これで、私のウェブサイトはほぼ完成しました。Firefox や IE 8 でも問題なく表示されます。しかし、Chromeはそれを台無しにします。
FFで見るとこんな感じ。
そして、ここChromeで:
下の画像とまったく同じコードですが、Crome が最初の画像のサイズを変更する方法を確認してください。
HTMLコードは次のとおりです。
<table id="todo" class="subview_table web_coding_table">
<tr>
<td>
<img src="image/preview_small/todo.jpg" alt="ToDo-App" />
</td>
<td>
<h2>ToDo Webapplikation</h2>
<p>Einfache Terminplaner-App zum Erstellen,
Bearbeiten und Löschen von Terminen</p>
</td>
<td>
<div class="white_triangle"> </div>
</td>
</tr>
</table>
<div id="todo_content" class="invisible_content web_coding_content">
<p>Die ToDo-Webapplikation entstand als Semesterarbeit zusammen mit meiner Teamkollegin ---. Die Herausforderung hierbei war die komplexe, klassenbasierte Programmierung mittels JavaScript. Die App speichert Termine cookiebasiert ab und kann daher auch lokal vom Rechner aus verwendet werden.</p>
<a href="http://www.hs-augsburg.de/~cr/todo_app/" target="_blank" title:"ToDo-App"><img src="image/preview_big/todo.jpg" alt="ToDo Screenshot"/></a>
<a class="big_link" href="http://www.hs-augsburg.de/~cr/todo_app/" target="_blank" title:"ToDo-App">Zur Live-Demo</a>
<table id="resi" class="subview_table web_coding_table">
<tr>
<td>
<img src="image/preview_small/resi.jpg" alt="Resi bringt Bier" />
</td>
<td>
<h2>Resi Bringt Bier</h2>
<p>Getränke-Nachtlieferservice in München mit Shopsystem.</p>
</td>
<td>
<div class="white_triangle"> </div>
</td>
</tr>
</table>
<div id="resi_content" class="invisible_content web_coding_content">
<p>HINWEIS!: Der Kunde dieses Projekts arbeitet selbst noch an der Website und den Inhalten weiter, daher entspricht das Erscheinungsbild möglicherweise nicht meiner eigentlichen Arbeit.</p><br />
<p>Resi Bringt Bier ist eine Website für einen Nachtlieferanten in München. Sie wurde mit Wordpress umgesetzt und verwendet diverse Plugins sowie eine eigens kreierte Theme. Hinzu kommt die Verwendung eines eigenen JavaScript-Codes, sowie diverse Codeveränderungen in PHP.<p>
<a href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier"><img src="image/preview_big/resi.jpg" alt="Resi"/></a>
<a class="big_link" href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier">Zur Website</a>
</div>
クラス「Invisible_content」の DIV は表示されないことに注意してください。
ここにCSS:
table h2 {
font-size:1.5em;
color:#FFFFFF;
font-style: normal;
}
table p {
color:#FFFFFF;
}
.subview_table {
height:120px;
position:relative;
margin:20px 0px 0px 0px;
background-color:#961518;
}
.subview_table h2 {
margin-top:0px;
}
.subview_table img {
padding:10px;
margin:0px;
}
.subview_table td {
min-width:70px;
}
.white_triangle {
position:absolute;
top:60px;
right:20px;
height:0;
width:0;
border-color: #FFFFFF transparent transparent transparent;
border-style: solid;
border-width: 15px;
}
.invisible_content {
display:none;
padding: 20px;
background-color:#d8d5c6;
}
助けてくれてありがとう!