Hallo,
ich habe ein kleines Problem: Und zwar habe ich in Photoshop das hier gemacht
und bin gerade dabei, das in HTML & CSS zu übersetzen. Soweit bin ich bisher
. Das einzige Problem ist das Sprachen-Icon oben links. Das sollte nämlich vertikal in der Mitte des Textes rechts daneben sein. Ich könnte das mit Padding machen, aber (siehe Code) die DIV-Tags richten sich in der Höhe ja nicht automatisch aus, so wie Tabellen, wo jede Spalte gleich hoch ist, auch wenn in einer Spalte mehr Zeilen als in einer anderen sind, sondern sie sind immer genau so hoch, wie der Text, der darin steht. Deswegen bringt mir auch vertikales zentrieren nichts, nur wenn der Name eine Zeile lang ist, dann stimmt alles. Also ist schwer zu erklären, hier der Code
<style type="text/css">
#resultstopbar {
background-color: #fff3e3;
width: 950px;
height: 20px;
padding-left: 2px;
left: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ff9308;
}
#name {
width:350px;
height:35px;
float:left;
text-align:left;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ff9308;
}
#stars {
width:300px;
height:35px;
float:left;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #e3c651;
}
#softwaresource {
width:300px;
height:35px;
float:left;
text-align:right;
vertical-align:top;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ff9308;
}
#description {
width:760px;
float:left;
text-align:left;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #000000;
}
#thumbnail {
width:190px;
float:left;
text-align:right;
}
#category {
float:left;
width:475px;
text-align: right;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #3bb12c;
}
a.name:link {
color: #ff9308;
}
a.name:visited {
color: #e07e00;
}
a.name:hover {
background-color: #fff3e3;
}
a.category:link {
color: #3bb12c;
}
a.category:visited {
color: #3bb12c;
}
a.category:hover {
background-color: #d7f7d3;
}
a.softwaresource:link {
color: #ff9308;
}
a.softwaresource:visited {
color: #ff9308;
}
a.softwaresource:hover {
background-color: #fff3e3;
}
</style>
<div id="resultstopbar">
<p style="padding:0;margin:0;">
<span style="vertical-align:middle;">results <b>1 to 22</b> of <b>387</b> for <b>"double-slit-experiment"</b></span>
</p>
</div>
<p>
<div style="width:1000px">
<div style="width: 50px; height: 35px; float:left;"><img src="eng.png" width="34" height="23" /></div>
<div style="width:950px;float:right;">
<div style="width:950px">
<div id="name"><b><a href="#sdfasdf" target="_blank" class="name" style="height:10px">Can we increase traffic flow rate by increasing maximum speed limit?</a></b></div>
<div id="stars"><img src="stars.png"/></div>
<div id="softwaresource"><a href="#" class="softwaresource">java-applet</a> | <a href="#" class="softwaresource">phy.ntnu.tw</a> </div>
</div>
<div style="width:950px">
<div id="description">
<p>
This is a three lanes high way traffic simulation. You can adjust number of cars with slider when it is paused.<br />
The color turn yellow when it is accelerating, turn red when hit brake, turn green when in the same speed.<br />
It turn into blue when changing lanes.
</p>
<p align="center"><a href="#sdfasdf" target="_blank"><img src="start.png" border="0"/></a></p>
</div>
<div id="thumbnail"><img src="thumbnail.png" /></div>
</div>
<div style="width:950px">
<div style="float:left; width:475px;"> </div>
<div id="category"><a href="#" class="category">optics</a> | <a href="#" class="category">lightwaves</a> | <a href="#" class="category">double-slit</a> <b>:category</b></div>
</div>
</div>
</div>
</p>Danke,
Thilo