Frage stellen
ich hab ein kleines Problem mit einer Webseite.
Und zwar hab ich ein bereits vorhandenes CSS File an dem ich leider auch nichts verändern kann.
Dazu hab ich auch nur eine HTML-Datei die ich auch nur teilweise verändern kann.
So nun hab ich im CSS folgendes vorgegeben.
- Code: Alles auswählen
#container {
margin: 100px 0 0 0;
padding: 0;
width: 210px;
overflow: hidden;
}
In der HTML-Datei muss ich meinen Code in den div dieses Containers einbauen.
Also hier rein:
- Code: Alles auswählen
<div id="container">...</div>
Ich würde da nun gerne eine Fotodarstellung einfügen die ich auf einer Seite gefunden habe.
Mein Problem hierbei ist das auf Grund der Option "overflow: hidden;" die Fotos nicht so dargestellt werden wie sie es sollten.
Hat jemand eine Idee was ich falsche mache oder wie ich das umgehen kann?
Das ist das dieser Code. (auch zu sehen auf: http://www.cssplay.co.uk/menu/lightbox)
- Code: Alles auswählen
<style type="text/css">
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* slides styling */
.photo {width:635px; text-align:left; position:relative; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}
.photo ul.topic li.active a
{color:#000; background:#bbb;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.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;}
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>
<div class="photo">
<ul class="topic">
<li class="active"><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="bilder1.jpg"><img src="bilder1a.jpg" alt="" title="" /></a></li>
<li><a href="bilder2.jpg"><img src="bilder2a.jpg" alt="" title="" /></a></li>
<li><a href="bilder3.jpg"><img src="bilder3a.jpg" alt="" title="" /></a></li>
<li><a href="bilder4.jpg"><img src="bilder4a.jpg" alt="" title="" /></a></li>
<li><a href="bilder5.jpg"><img src="bilder5a.jpg" alt="" title="" /></a></li>
<li><a href="bilder6.jpg"><img src="bilder6a.jpg" alt="" title="" /></a></li>
<li><a href="bilder7.jpg"><img src="bilder7a.jpg" alt="" title="" /></a></li>
<li><a href="bilder8.jpg"><img src="bilder8a.jpg" alt="" title="" /></a></li>
<li><a href="bilder9.jpg"><img src="bilder9a.jpg" alt="" title="" /></a></li>
<li><a href="bilder10.jpg"><img src="bilder10a.jpg" alt="" title="" /></a></li>
<li><a href="bilder11.jpg"><img src="bilder11a.jpg" alt="" title="" /></a></li>
<li><a href="bilder12.jpg"><img src="bilder12a.jpg" alt="" title="" /></a></li>
<li><a href="bilder13.jpg"><img src="bilder13a.jpg" alt="" title="" /></a></li>
<li><a href="bilder14.jpg"><img src="bilder14a.jpg" alt="" title="" /></a></li>
<li><a href="bilder15.jpg"><img src="bilder15a.jpg" alt="" title="" /></a></li>
<li><a href="bilder16.jpg"><img src="bilder16a.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div>