Hallo,
ich habe folgenden HTML- und CSS-Code geschrieben. Ich bin in CSS und HTML aber nicht so fit, der Code sollte aber möglichst optimiert sein für Ladezeit und verschiedene Browser, da davon in einer Liste mehrere angezeigt werden. Würde mich freuen, wenn da mal jemand drüberschauen könnte und mir sagen könnte, wo ich noch etwas verbessern könnte.
HTML
<style type="text/css">
#resultstopbar {
background-color: #fff3e3;
width: 100%;
height: 20px;
padding-left: 2px;
left: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ff9308;
}
#name {
width:30%;
float:left;
text-align:left;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ff9308;
}
#stars {
width:40%;
float:left;
text-align:center;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #e3c651;
}
#softwaresource {
width:30%;
float:left;
text-align:right;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ff9308;
}
#description {
width:80%;
float:left;
text-align:left;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #000000;
}
#thumbnail {
width:20%;
float:left;
text-align:right;
}
#category {
float:left;
width:50%;
text-align: right;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #3bb12c;
}
#pwopm {
padding:0;margin:0;
}
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 id="pwopm">
<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>
<p id="pwopm">
<div>
<div id="name"><b><a href="#sdfasdf" target="_blank" class="name">Can we increase traffic flow rate by increasing
maximum speed limit?</a></b></div>
<div id="stars"><img src="stars.png" width="269" height="22" /></div>
<div id="softwaresource"><a href="#" class="softwaresource">java-applet</a> | <a href="#" class="softwaresource">phy.ntnu.tw</a></div>
</div>
</p>
<p id="pwopm">
<div>
<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>
</p>
<p id="pwopm">
<div style="float:left; width:50%;"> </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>
</p>
</p>Danke,
freundliche Grüße,
Thilo