Hallo zusammen,
Ich habe mir eine Beispielwebseite für eine ganzseitige Fotogalerie von Fullscreen Gallery with Thumbnail Flip | Codrops downgeloadet. Möchte einen halbtransparenten Text einfügen der als Navigationsmenü fungieren soll.
Mein Problem ist, dass der Text hinter den Bildern verschwindet. Woran kann das liegen?
Vielen Dank für die Hilfe schon mal.
Ich habe mir eine Beispielwebseite für eine ganzseitige Fotogalerie von Fullscreen Gallery with Thumbnail Flip | Codrops downgeloadet. Möchte einen halbtransparenten Text einfügen der als Navigationsmenü fungieren soll.
Mein Problem ist, dass der Text hinter den Bildern verschwindet. Woran kann das liegen?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>TESTSite</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Fullscreen Gallery with Thumbnail Flip using jQuery" />
<meta name="keywords" content="jquery, background, full page, fullscreen, image, thumbnail, flip, gallery, slider, slide in, keyboard, key navigation, mousewheel, google font api"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="tf_loading" class="tf_loading"></div>
<div id="tf_bg" class="tf_bg">
<img src="http://www.html.de/images/1.jpg" alt="Image 1" longdesc="http://www.html.de/images/thumbs/1.jpg"/>
<img src="http://www.html.de/images/2.jpg" alt="Image 2" longdesc="http://www.html.de/images/thumbs/2.jpg"/>
<img src="http://www.html.de/images/3.jpg" alt="Image 3" longdesc="http://www.html.de/images/thumbs/3.jpg"/>
<img src="http://www.html.de/images/4.jpg" alt="Image 4" longdesc="http://www.html.de/images/thumbs/4.jpg"/>
<img src="http://www.html.de/images/5.jpg" alt="Image 5" longdesc="http://www.html.de/images/thumbs/5.jpg"/>
<img src="http://www.html.de/images/6.jpg" alt="Image 6" longdesc="http://www.html.de/images/thumbs/6.jpg"/>
<!-- <div class="tf_pattern"></div> -->
</div>
<div id="content">
<div id="text1">
<h1><a href="index.html"> <span style="line-height: 58px">Zeile 1</span><br />
<span style="font-size:111px; line-height: 79px; margin-left:10px">Zeile 2</span></a></h1>
<h2><a href="index.html"> <span style="font-size:62px; line-height: 4px; margin-left:1px">Zeile 3</span><br />
<span style="font-size:13px; line-height: 3px; margin-left:1px">Zeile 4</span></a></h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Index</a></li>
<li>Nix</li>
<li>Nix 2</li>
</ul>
</div>
</div>
<div id="tf_next" class="tf_next"></div>
<div id="tf_prev" class="tf_prev"></div>
<div class="reference">
<a href="http://www.website1.com" class="last">Irgendwas</a>
<a href="http://www.website2.com" target="_blank">Irgendwas</a>
<a href="http://www.website3.com">Irgendwas</a>
</div>
<div class="description">
<span>Use keys ↑ and ↓ or the wheel of the mouse to navigate.</span>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
[...]
</script>
</body>
</html>Vielen Dank für die Hilfe schon mal.
