StartMenu soll über/ auf die SlideShow, an unteren Rand!

Lemke

Wie kriegt man das StartMenu über/ auf die SlideShow, unten an Rand? Befindet sich neben Logo oben bündig, sollte aber
besser mit dem Logo unten bündig sein,
bzw. mittig daneben.

HtmlQuellCode

HTML

<html>
<head>
<title></title>
</head>

<body lang="DE" style="
    display: block;  
    margin:0px; padding:0px; border:none; outline: none;
    height: 100%;top:0px;left:0px;right:0px;bottom:0px; 
    background-image: url('funk1111.gif');
    background-color:rgb(1, 4, 16);
    font-size:14px; font-family: Arial, Helvetica, sans-serif;
">

<div class="StartMenu" style="background-color:#f1f1f1; padding:0px; text-align:center;">
<iframe width="100%" height="100%" src="SlideIntro.html" frameborder="0" style="
    margin:0px; padding:0px; border:none; outline: none;
    height:100%;width:100%;
    top:0px;left:0px;right:0px;bottom:0px; 
    background-color:rgba(0, 0, 128,0);
    position: relative; 
    z-index:1
"></iframe>
</div>

<div id="StartLinks" style="
    overflow:hidden; 
    background-color: rgba(0, 8, 51, 0);
    z-index:100; 
"> 
<style>
    .sticky {position:fixed; top:0; width:100%; }
    .sticky + .Information {padding-top:60px; }
    a {float:left; display:block; color: #f2f2f2; text-align:center; padding:14px 16px; text-decoration:none; font-size:17px;}
    a:hover {background-image: url('funk1111.gif');rgba(135, 176, 218, 0.96); background-color:black; color:white;}     
    a.active {background-image: url('funk1111.gif');background-color:black; color:white;}
</style>

<a href="index.html" title="start" alt="Start" onmouseover="Logo.src='Logo1.png';" onmouseout="Logo.src='Logo.png';">
    <img id="Logo" src="Logo.png" border="0" width="300px">
</a>
    <a href="Impressum.html">@Kontakt</a>
    <a href="Ausstellung.html">BadAusstellung</a>
    <a href="Industrie.html">IndustriePlanung</a>
    <a href="Marken.html">Marken</a>
    <a href="Firma.html">Firma</a>
    <a href="Karriere.html">Jobs</a>
    <a href="FranchisePartner.html">Partner</a>
</div>

<div class="Information" style="padding:16px;">

<iframe width="100%" height="100%" src="Service.html" frameborder="0" style="
    margin:0px; padding:0px; border:none; outline: none;
    height:100%;width:100%;
    top:0px;left:0px;right:0px;bottom:0px; 
    background-color:rgba(0, 0, 128,0);
    overflow: hidden; 
    z-index:1
"></iframe>


<a class="up" href="#top" target="_self" style="position: fixed;right:0px;bottom:0px;padding:0px;"><img src="Up.png" alt="Be happy!"></a>



<script>
window.onscroll = function() {myFunction()};

var StartLinks = document.getElementById("StartLinks");
var sticky = StartLinks.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    StartLinks.classList.add("sticky")
  } else {
    StartLinks.classList.remove("sticky");
  }
}
</script>

</body>
</html>

Alles anzeigen

Zeichnung

html-seminar.de/woltlab/attachment/2219/

StartLeiste mit dem Logo und den Links im Menu soll außerdem beim Herunterblättern Farbe ändern von durchsichtig,

in dunkelblau undurchsichtig. (Menu kann beim Scrollen oben anheften, erledigt.) Fehlt FarbÄnderung.

Vielen Dank.

Jetzt mitmachen!