Topic: Simpleviewer covers Navigation

Hello,

I'm having a little problem with SV. Has you can see SV is covering up my navigation in IE and Chrome (Mac and Windows) has anyone had a prob like that before? IE is more important than Chrome since I will not support Chrome anyway.

http://img35.imageshack.us/img35/3003/b … 10420u.png

The Code looks like this:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Diese Seite ist für den Internet Epxlorer 7 und 8, Firefox 3.6.x, Safari 5.0.4, Chrome 10 und Opera 11 optimiert -->
<!-- Geben Sie Open Source eine Chance und testen Sie einen der Browser :) -->
<head>
<title>Projekte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="solarhaus,niedrigenergiehaus,holzhaus,luft-solar-haus,baubiologie,architektur,energieberatung" />
<meta name="description" content="IBN Beratung - Planung - Baubetreuung - http://www.wohlraum.de" />
<meta name="Content-Language" content="de" />
<meta name="author" content="http://www.ed-media.com" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="10 days" />
<link href="/media/images/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="/media/css/wohlraum.css" />

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/media/css/wohlraumie8.css" />
<![endif]-->
</head>
<body>
<!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="Willkommen auf Wohlraum.de leider musste ich feststellen, dass Sie noch den Internet Explorer 6.0 nutzen. Bitte Upgraden Sie auf Internet Explorer 7, 8 oder die neuste Version 9.0 vielen Dank :)" /></a></div> <![endif]--> 
<div id="Wohlraum">
<div id="Logo"><a href="/"><img src="/media/images/logo.png" alt="Startseite" /></a></div>
<div id="Main"></div>

<div id="Site">NEUBAU</div>

<div id="Content"> 

<script type="text/javascript" src="/media/simpleviewer/js/simpleviewer.js"></script>
<script type="text/javascript">
useFlash = "True";
var flashvars = {};
flashvars.galleryURL = "/media/neubau.xml";
var params = {};
// params.wmode = "transparent"; Transparent --> keine BG Farbe
var attributes = {};
attributes.id = "svInstance";
jQuery(document).ready(function () {
SV.simpleviewer.load("sv-container", "895", "565", "222222", true, flashvars, params, attributes);
});
</script>
<div id="sv-container"></div>

</div>
<div class="menu">
<ul>
<li><a href="/neubau" target="_self">Neubau</a>
<ul>
<li><a href="/neubau/projekte" target="_self">Projekte</a></li>
<li><a href="/neubau/holzbausystem" target="_self">Holzbausystem</a></li>
<li><a href="/neubau/leistungen" target="_self">Leistungen</a></li>
</ul>
</li>
<li><a href="/sanierung" target="_self">Sanierung</a>

<ul>
<li><a href="/sanierung/sprojekte" target="_self">Projekte</a></li>
<li><a href="/sanierung/sleistungen" target="_self">Leistungen</a></li>
</ul>
</li>
<li><a href="/solarhaeuser" target="_self">Solarhäuser</a>
<ul>
<li><a href="/solarhaeuser/luft-solar-haus" target="_self">Luft-Solar-Haus</a></li>
<li><a href="/solarhaeuser/sonnenhaus" target="_self">Sonnenhaus</a></li>
</ul>
</li>
<li><a href="/energieberatung" target="_self">Energieberatung</a>

<ul>
<li><a href="/energieberatung/energiecheck" target="_self">Energiecheck (DBU)</a></li>
<li><a href="/energieberatung/vorort" target="_self">Vor-Ort-Beratung</a></li>
<li><a href="/energieberatung/energieausweise" target="_self">Energieausweise</a></li>
<li><a href="/energieberatung/blowerdoor" target="_self">Blower-Door</a></li>
<li><a href="/energieberatung/thermografie" target="_self">Thermografie</a></li>
<li><a href="/energieberatung/leistungenpreis" target="_self">Leistungen</a></li>
</ul>
</li>
<li><a href="/baubiologie" target="_self">Baubiologie</a>

<ul>
<li><a href="/baubiologie/grundlagen" target="_self">Grundlagen</a></li>
</ul>
</li>
<li><a href="/partner" target="_self">Partner</a></li>
<li><a href="/kontakt" target="_self">Kontakt</a></li>
</ul>
</div>
<div class="Impressum">
<ul>
<li><a href="/kontakt" target="_self">Impressum</a></li>
</ul>
</div>

</div>
</body>
</html>

CSS:

@charset "utf-8";

body {
    background: url("/media/images/background.png") repeat-x scroll 0 0 #606060;
}
img {
    border: 0 none;
}

td{
    text-align: center;
  }

#Wohlraum {
    left: auto;
    margin: auto;
    position: relative;
    top: 10px;
    left:0px;
    top:0px;
    width:950px;
    height:740px;
    background: #E6DCC8;  /*FFFFCC, FFCC99, 99CCFF, FFCC33, FABF0B */
}

#Logo {
    position:absolute;
    left:auto;
    top:0px;
    width:950px;
    height:100px;
}

#Main {
    background-image: url("/media/images/Main.png");
    position:absolute;
    left:0px;
    top:130px;
    width:950px;
    height:610px;
}


#Site {
    font: 50px "Times New Roman","calibri","verdana","helvetica","arial";
    position:absolute;
    left:425px;
    top:55px;
    height: 50px;
    width:480px;
    color: #999999;
    font-weight:bold;
    
}

#Content {
    background-color: #FFFFFF;
    color: black;
    font: 90% "Times New Roman", "verdana","helvetica","arial";
    height: 565px;
    left: 16px;
    margin: 0px;
    overflow: auto;
    position: absoloute;
    top: 141px;
    width: 895px;
    text-align: left;
}

.Impressum {
    border: 0;
    font: bold 15px "Times New Roman", "verdana","helvetica","arial";
    height: 10px;
    left: 854px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 714px;
    width: 150px;
    
}
.Impressum ul {
    background: none repeat scroll 0 0 #413F40;
    height: 0px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    top: 735px;
    width: 150px;
}
.Impressum li {
    float: left;
    padding: 0;
}
.Impressum li a {
    background: none repeat scroll 0 0 #413F40;
    color: #FABF0B;
    display: block;
    font-weight: normal;
    line-height: 14px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
}
.Impressum li a:hover, .menu ul li:hover a {
    background: none repeat scroll 0 0 gray;
    color: #FABF0B;
    text-decoration: none;
}
.Impressum li:hover ul {
    display: block;
}
.Impressum p {
    clear: left;
}
.menu {
    border: 0 none;
    font: bold 15px "Times New Roman", "verdana","helvetica","arial";
    left: 15px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 104px;
}
.menu ul {
    background: none repeat scroll 0 0 #413F40;
    height: 30px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 920px;
}
.menu li {
    float: left;
    padding: 0;
}
.menu li a {
    background: url("/media/images/seperator.gif") no-repeat scroll 0 0 #413F40;
    color: #FABF0B;
    display: block;
    font-weight: normal;
    line-height: 30px;
    margin: 0;
    padding: 0 34px;
    text-align: center;
    text-decoration: none;
}
.menu li a:hover, .menu ul li:hover a {
    background: none repeat scroll 0 0 gray;
    color: #FABF0B;
    text-decoration: none;
}
.menu li ul {
    background: #413F40;
    border: 1px #FABF0B; /* Border für dropdown außen */
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 168px;
}
.menu li:hover ul {
    display: block;
}
.menu li li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    width: 168px;
}
.menu li:hover li a { /* Hintergrundfarbe für Dropdown */
    background: none repeat scroll 0 0 transparent;
}
.menu li ul a { /* Dropdown */
    display: block;
    font-size: 12px;
    height: 30px;
    margin: 1px; /* "Box" Abstand von einem pixel */
    padding: 0 10px 0 10px;
    text-align: left;
    border: 1px solid #FABF0B; /* Gelber Border für Dropdown */
}
.menu li ul a:hover, .menu li ul li:hover a {
    background: none repeat scroll 0 0 gray;
    color: #FABF0B;
    text-decoration: none;
}
.menu p {
    clear: left;
}

Re: Simpleviewer covers Navigation

Please see this FAQ for details: http://simpleviewer.net/simpleviewer/su … ml#embed_5
Essentially you should make your gallery's background transparent by using the following line in your embedding code:

SV.simpleviewer.load("sv-container", "895", "565", "transparent", true, flashvars, params, attributes);

You can then set the gallery's background color using CSS:

<div id="sv-container" style="background-color: #222222;"></div>
Steven Speirs
SimpleViewer Support Team.

Re: Simpleviewer covers Navigation

Well thank you very very very much! That did the trick wink