Schnatterinchen
Grünschnabel
Hallo, hab eben eine Javascript Slideshow integriert, diese überlappt jedoch den Content Bereich bzw, einen Teil davon. WIe kann ich das verhindern...außerdem besteht das Problem, dass die Ausklapptafeln der dynamischen Navileiste hinter der Slideshow verschwinden, wie geht das behoben:
default1.css
kreuz.html
default1.css
Code:
/* 1.1 Body-Bereich */
body {
margin: 20px;
padding: 0;
background: #FFFFFF url(tapete_grau.gif) repeat;
font: normal small Arial, Helvetica, sans-serif;
color: black;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
text-transform: uppercase;
color: black;
}
h1, h2, h3 {
}
h4, h5, h6 {
}
p, ul, ol, blockquote {
margin-top: 0;
}
a {
color: black;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
#slideHolder {
clear: both;
width: 590px;
top: 35px;
left: 300px;
position: relative;
border-left:solid white;
border-left: 5px;
border-right:solid white;
border-right:5px;
}
/*-----------------------------------------------------------------------------*/
/* 1.2 Header */
#header {
width: 590px;
height: 110px;
margin: 0 auto;
padding: 35px 0 0 0;
background: #FFEE8F url(images/img2.gif) repeat-x;
border: 5px solid #FFFFFF;
border-bottom: none;
}
#header h1 {
text-align: center;
font-size: 3em;
}
#header h2 {
text-align: center;
font-size: 1.4em;
}
/*------------------------------------------------------------------------------*/
/* 1.3 Menu */
/* Navigation Links (TOP-Level)*/
a.navi {
border:1px solid white;
border-left:0;
border-right:5px solid white;
text-decoration: none;
}
a.navi#home {
border-left:5px solid white;
}
a.navi:link, a.navi:visited {
display:block;
padding:10px;
width:94px;
text-align:center;
color:white;
vertical-align: middle;
background-color: black;
}
a.navi:active, a.navi:hover {
text-decoration: none;
color: white;
background-color: #4E4E4E;
}
/* Menü Links (SUB-Level)*/
a.menu:link, a.menu:visited {
color: Black;
text-decoration: none;
}
a.menu:active, a.menu:hover {
text-decoration: none;
background-color: Black;
color: White;
background-image: url(../../../../img/portfolio/musterseiten/dynamisch/bullet_aktiv.GIF);
background-repeat: no-repeat; /*muss net*/
}
a.menu {
display:block;
padding:1px 1px 1px 10px;
background-image:url(../../../../img/portfolio/musterseiten/dynamisch/bullet_nicht_aktiv.GIF);
background-repeat:no-repeat;
}
/*Aufklappbare Menüboxen, relative Positionierung,
Sichtbarkeit: zuerst versteckt... */
#navi td div {
position:relative;
left:-5px;
top:-2px;
visibility: hidden;
width:105px;
padding:2px 5px 10px 5px;
display:block;
background-color:#fff;
border:1px solid #000;
border-top-color:#fff;
z-index:1;
}
/* ...nur für gute Browser - Submenüs sichtbar machen per CSS: */
#navi td:hover div {
visibility:visible;
}
#go {
position: absolute;
float: left;
left: 320px;
}
/*------------------------------------------------------------------------------*/
/* 1.4 Splash */
#splash {
width: 590px;
margin: 0 auto;
background: #FFFFFF;
border-left: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
}
/*----------------------------------------------------------------------------*/
/* 1.5 Content */
#content {
width: 590px;
margin: 0 auto;
background: #FFFFFF;
border: 5px solid #FFFFFF;
}
/* Hoverbox integrieren */
.clearfix:after {
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
#content .title {
padding: 10px 20px;
background: #FFEE8E url(images/img4.gif) repeat-x;
font-size: 1em;
}
#content .story {
padding: 20px;
border: 2px solid #FFEE8E;
}
/*----------------------------------------------------------------------*/
/*1.6 Footer */
#footer {
width: 550px;
margin: 0 auto;
padding: 10px 20px;
background: #4E4E4E;
border: 5px solid #FFFFFF;
border-top: none;
}
#footer p {
margin: 20px;
padding: 0 0 0 250px;
text-align: center;
font-size: x-small;
color: #CCCCCC;
}kreuz.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Homepage Michael Pauka</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default1.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if IE]>
<link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
<script src="slideshow.js" type="text/javascript"></script>
<script src="slideshow-onload.js" type="text/javascript"></script>
</head>
<body">
<div id="header">
<h1>Michael Pauka</h1>
<h2>official Homepage</h2>
</div>
<div id="go">
<table class="navigation" id="navi" cellpadding="0" cellspacing="0"
border="0" summary="Navigationsleiste">
<tr valign="top">
<td><a class="navi" href="#" id="home">HOME</a></td>
<td>
<a class="navi" href="#">Über mich</a>
<div>
<a class="menu" href="#">Zivildienst</a>
<a class="menu" href="#">Praktikas</a>
<a class="menu" href="#">Lebenslauf</a>
<a class="menu" href="#">Schule</a>
<a class="menu" href="#">Ausbildung</a>
</div>
</td>
<td>
<a class="navi" href="#">Bilder</a>
<div>
<a class="menu" href="#">Barcelona 2008</a>
<a class="menu" href="#">Salzburg 2007</a>
<a class="menu" href="#">Wien 2007</a>
<a class="menu" href="#">Rom 2005</a>
<a class="menu" href="#">Paris 2004</a>
<a class="menu" href="#">Sorrent 2003</a>
</div>
</td>
<td>
<a class="navi" href="#">Material</a>
<div>
<a class="menu" href="#">Hyperlink 1</a>
<a class="menu" href="#">Hyperlink 2</a>
<a class="menu" href="#">Hyperlink 3</a>
<a class="menu" href="#">Hyperlink 4</a>
<a class="menu" href="#">Hyperlink 5</a></div>
</td>
<td>
<a class="navi" href="#" id="rand">Kontakt</a>
<div>
<a class="menu" href="#">Impressum</a>
<a class="menu" href="#">Feedback</a>
<a class="menu" href="#">Hyperlink 3</a>
<a class="menu" href="#">Hyperlink 4</a>
<a class="menu" href="#">Hyperlink 5</a></div>
</td>
</tr>
</table>
</div>
</go>
<div id="slideHolder"></div>
<script type="text/javascript">
objSlider = new qpSlider( "slideHolder", // ID für Sliderholder
true, // true - Bilder verlinken, false - nur Bilder
{classImg: "slideImg", classHref: "slideLink"}, // CSS-Klassennamen (Bilder, Links)
// Bilder- u. Linkarray
[["huhu1.jpg", {}],
["huhu1.jpg", {url: "http:// www.quaese.de", text: "Quaese"}],
["huhu1.jpg", {url: "http:// www.tutorials.de", text: "tutorials.de", target: "_blank"}],
["blume_ende.jpg", {}]
]
);
</script>
<div id="content">
<h2 class="title">Welcome to my homepage!</h2>
<div class="story">
<ul class="hoverbox clearfix">
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo06.jpg" alt="description" /><img src="img/photo06.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo07.jpg" alt="description" /><img src="img/photo07.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo08.jpg" alt="description" /><img src="img/photo08.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo09.jpg" alt="description" /><img src="img/photo09.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo10.jpg" alt="description" /><img src="img/photo10.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo11.jpg" alt="description" /><img src="img/photo11.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo12.jpg" alt="description" /><img src="img/photo12.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo13.jpg" alt="description" /><img src="img/photo13.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo14.jpg" alt="description" /><img src="img/photo14.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo15.jpg" alt="description" /><img src="img/photo15.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo16.jpg" alt="description" /><img src="img/photo16.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo17.jpg" alt="description" /><img src="img/photo17.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo18.jpg" alt="description" /><img src="img/photo18.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo19.jpg" alt="description" /><img src="img/photo19.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo20.jpg" alt="description" /><img src="img/photo20.jpg" alt="description" class="preview" /></a>
</li>
</ul>
</div>
</div>
<div id="footer">
<p>Copyright by Michael Pauka webdesign 2008</p>
</div>
</body>
</html>
