Bildergalerie

Leola13 · 28. Januar 2005

Hai,

ich versuche zur Zeit mit Hilfe dieses Ansatzes eine Page mit Bildergalerie zu erstellen.
.. aber ohne feste Höhen- und Breitenangaben.

Für die normalen Seiten funktioniert es auch schon, aber bei der Seite mit der Bildergalerie werden :
1. nicht alle Thumbs angezeigt, bzw der Umbruch erfolgt zu spät.
2. der Text in der Mitte erscheint nur wenn einmal gescrollt wird und verschwindet beim Überfahren der Thumbs

Wahrscheinlich nur ein kleiner Denk- oder Schreibfehler, aber ich hab ein Brett vorm Kopf und sehe den Fehler nicht.

HTML :

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>leola13          Bildergalerie</title>
	<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

</head>
<body>

<div id="top">

<p>
bjugzzfzfzz

</p>

</div>

<div id="left">

<p>

	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Über mich</a></li>
			<li><a href="#">Impressum</a></li>
			<li><a href="#">Gästebuch</a></li>
			<li><a href="#">Nav item 5</a></li>
			<br><br><br><br><br><br><br>
		</ul>
	</div>

</p>

</div>

<div id="middle">

<pre>Mitteltextkghjjjjgj</pre>



<a class="gallery slidea" href="#"><span><img src="pic2.jpg" alt="aa" title="Fishes" /><br />pic2.jpg<br />leola</span></a>
<a class="gallery slideb" href="#"><span><img src="pic3.jpg" alt="bb" title="Funnels" /><br />pic3.jpg<br />leola</span></a>
<a class="gallery slidec" href="#"><span><img src="pic4.jpg" alt="cc" title="Vases" /><br />pic4.jpg<br />leola</span></a>
<a class="gallery slided" href="#"><span><img src="pic5.jpg" alt="dd" title="Window" /><br />pic5.jpg<br />leola</span></a>
<a class="gallery slidee" href="#"><span><img src="pic6.jpg" alt="ee" title="Cascade" /><br />pic6.jpg<br />leola</span></a>
<a class="gallery slidef" href="#"><span><img src="pic7.jpg" alt="ff" title="Flowers" /><br />pic7.jpg<br />leola</span></a>
<a class="gallery slideg" href="#"><span><img src="pic8.jpg" alt="gg" title="Butterfly" /><br />pic8.jpg<br />leola</span></a>
<a class="gallery slideg" href="#"><span><img src="pic9.jpg" alt="hh" title="Butterfly" /><br />pic9.jpg<br />leola</span></a>



<img src="bild.jpg" alt="Bild" title="Bild" />




</div>

<div id="right">

<p>

	<li><a class="ps" href="#"><br><br>Photoshop</a></li>
	<li><a class="ps" href="#"><br><br>Fotos SW</a></li>
	<li><a class="ps" href="#"><br><br>Fotos Farbe</a></li>

</p>

</div>


</body>
</html>

CSS :

HTML:

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ccc;
	background-color: #333;
	}

strong, b {
	font-weight: bold;
	}

p {
	font-size: 12px;
	line-height: 22px;
	margin-top: 20px;
	margin-bottom: 10px; 
	}


.nowrap {
	white-space: nowrap;
	font-size: 10px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}

#top {
	margin: 20px 20px 0px 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: #666;
	background-image:url(banner.jpg);
      background-repeat:no-repeat;
	background-position:center; 

	height: 100px; 
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 70px;
	}

html>body #top {
	height: 70px; /* ie5win fudge ends */
	}

#left {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: #666;
	width: 150px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 120px;
	}

html>body #left {
	width: 120px; /* ie5win fudge ends */
	}

#middle {
	margin: 20px 190px 20px 190px;
	padding: 10px;
	border: 5px solid #ccc;
	text-align:center;
	background: #666;
	}


#right {
	position: absolute;
	top: 120px;
	right: 0px; 
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: #666;
	width: 150px; 
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 120px;
	}

html>body #right {
	width: 120px; 
	}

pre {
	font-size: 12px;
	line-height: 22px;
	margin-top: 10px;
	margin-bottom: 10px; 
	}
		
a.ps { 
	text-decoration: none;
	display:block; 
	list-style-type: none;
	font-size: 12px;
	text-align:center;
      background-image:url(button-130.gif);
	background-repeat: none;
      width:110px; height:102px;
	}

a:hover.ps	{ 
	color: #fff;
	text-decoration: none;
	list-style-type: none;
	background-image:url(button-130g.gif);
	background-repeat: none; 
	}

a:link.ps { 
	list-style-type: none;
	color: #036;
	}

a:visited.ps {
	color: #066;
	}

a:active.ps {
	color: #fff;
	}

div#navigation {
	float: left;
	width: 110px;
	padding: 2em 0 2em 0;
	}
		
div#navigation ul {
	list-style-type: none;
	text-align:center;
	padding: 0;
	margin: 0;
	}
		
div#navigation ul li {
	margin-top: 4px;
	}
		
#navigation ul li a {
	display: block;
	width: 95px;
	padding: 3px 5px 3px 10px;
	text-decoration: none;
	color: #000;
	}
		
#navigation ul li a:hover {
	color: #fff;
	background-color: #c58c9d;
	}
	
#container {
	margin : 20px 20px 20px 20px;
	padding : 10px 10px 10px 10px;
	background:#9E3F5C;
	border:1px solid #000;
	}

	
a.gallery, a.gallery:visited {
	display:block;
	color:#000;
	text-decoration:none;
	border:1px solid #000;
	width:75px;
	height:47px;
	float:left;
	margin:3px 10px 0 0;
	}

a.slidea {background:url(thumb2.jpg);}
a.slideb {background:url(thumb3.jpg);}
a.slidec {background:url(thumb4.jpg);}
a.slided {background:url(thumb5.jpg);}
a.slidee {background:url(thumb6.jpg);}
a.slidef {background:url(thumb7.jpg);}
a.slideg {background:url(thumb8.jpg);}
a.slideh {background:url(thumb9.jpg);}
a.slidei {background:url(thumb10.jpg);}
a.slidej {background:url(thumb11.jpg);}

a.gallery span {
	display:block;
	position:absolute;
	width:1px;
	height:1px;
	top:5px;
	left:5px;
	overflow:hidden;
	background:#efedec;
	}

.slidek {
	display:block;
	position:absolute;
	left:50%;
	width:400px;
	margin-left: -200px;
	height:250px;
	top:125px;
	padding:0;
	border:1px solid #000;
	}

a.gallery:hover {
	white-space:normal;
	border:1px solid #fff;
	}

a.gallery:hover img, a.gallery:active img, a.gallery:focus img {
	border:1px solid #000;
	}

a.gallery:hover span, a.gallery:active span, a.gallery:focus span {
	display:block;
	position:absolute;
	left: 50%;
	width:552px;
	margin-left: -276px;
	height:450px;
	top:290px;
	padding:5px;
	font-style:italic;
	color:#000;
	background:#efedec;
	}

Bildergalerie

Leola13

Erfahrenes Mitglied

Neue Beiträge