Frage stellen
ich bin dabei eine Diashow in CSS zu erstellen, doch leider bin ich gezwungen auf verschiedenen Doctypes zu arbeiten.
Wenn ich
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Static//EN">
verwende, wird alles richtig angezeigt, allerdings bei
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
gibt es so einige Fehler.
Leider bin ich momentan mit meinem Latein am Ende und hoffe auf Hilfe bzw. Tipps aus der Community.
Hier der Code:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Static//EN">
<html>
<head>
<title>Unbenannt</title>
<style type="text/css">
/* slides styling */
/******************************************/
/* photo klasse - container erstellen */
.photo {
width:635px;
height:365px;
text-align:left;
position:relative;
margin:0 auto;
/* background:#000000; */
}
/* Listenbereich Topic erstellen */
.photo ul.topic {
padding:0;
margin:0;
list-style:none;
width:635px;
height:auto;
position:relative;
z-index:10;
/* background:#000000; */
}
/* Aufzaehlungsbereich erstellen und Aufzaehlungszeichen aendern, sowie mit Farbe ausfllen */
.photo ul.topic li.set ul {
display:block;
position:absolute;
left:0; top:31px;
list-style:none;
padding:0;
margin:0;
height:auto;
background:#ddd;
width:464px;
padding:40px 60px;
border:20px solid #bbb;
z-index:1;
/* background:#000000; */
}
/* Aeusserer Rand */
.photo ul.topic li ul li {
display:inline;
width:112px;
height:87px;
float:left;
border:1px solid #fff;
margin:1px;
}
/* Innerer Rand */
.photo ul.topic li ul li a {
display:block;
width:110px;
height:85px;
cursor:default;
float:left;
text-decoration:none;
background:#444;
border:1px solid #888;
/* background:#000000; */
}
/* Bild */
.photo ul.topic li ul li a img {
display:block;
width:100px;
height:75px;
border:5px solid #eee;
/* background:#000000; */
}
/* Maus ueber Link */
.photo ul.topic li.set ul li a:hover {
white-space:normal; /* automatischer Zeilenumbruch */
position:relative; /* absolute, fixed, relative, static */
/* width:112; */
}
/* Maus ueber Bild */
/* Anzeigen und positionieren des vergroesserten Bildes */
.photo ul.topic li a:hover img {
position:absolute;
left:-50px;
top:-32px;
width:200px;
height:150px;
border-color:#fff;
}
</style>
</head>
<body>
<div class="photo">
<ul class="topic">
<li class="set">
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul >
<li><a href="#No"><img src="" alt="" title=""></a></li>
<li><a href="#No"><img src="" alt="" title=""></a></li>
<li><a href="#No"><img src="" alt="" title=""></a></li>
<li><a href="#No"><img src="" alt="" title=""></a></li>
<li><a href="#No"><img src="" alt="" title=""></a></li>
<li><a href="#No"><img src="" alt="" title=""></a></li>
<li><a href="#No"><img src="" alt="" title=""></a></li>
<li><a href="#No"><img src="" alt="" title=""></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><!--end set-->
</ul><!--end topic-->
</div> <!--end photo-->
</body>
</html>
Gruß
sLayer
