Webpage 2.0

Header Sidebars Galerie Platzhalter

by Vloxxity

HTML

<html lang="de">
    
    <body>
        <div id="heaven">
             <h1 id="überschrift">cælum</h1>
        </div>
        <div id="outer-header">
            <div id="inner-header"> <a href="/index.html">
                    <div class="header-item">Domum</div>
                </a>
 <a href="/Vlox">
                    <div class="header-item">Vlox</div>
                </a>

            </div>
        </div>
        <div id="main">
            <div id="sidebar-container">
                <div class="sidebar-menu-left">
                    <div class="sidebar-menu-group">
                         <h1>Invidunt</h1>

                        <ul>
                            <li>sadipscing</li>
                            <li>aliquyam</li>
                            <li>takimata</li>
                            <li>hendrerit</li>
                        </ul>
                    </div>
                    <div class="sidebar-menu-group">
                         <h1>Magna</h1>

                        <ul>
                            <li>consequat</li>
                            <li>delenit</li>
                        </ul>
                    </div>
                </div>
                <div class="sidebar-menu-right">
                    <div class="sidebar-menu-group">
                         <h1>Gubergren</h1>

                        <ul><a href="javascript:changeBG();"><li>vulputate</li></a>
                            <li>commodo</li>
                            <li>tincidunt</li>
                            <li>consetetur</li>
                        </ul>
                    </div>
                </div>
                <div id="content">
                    <div class="textblock">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
                        ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    ...

CSS

@import url(http://fonts.googleapis.com/css?family=Text+Me+One);
html {
    /*background: url(http://www.windows-7-wallpapers.com/wallpapers/img24-1920x1200.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
    /*font-family: serif;
    font-style: italic;*/
    font-family: 'Text Me One', sans-serif;
}
body {
    background-size: 100%;
}
#main {
    background-color: rgb(15, 100, 190);
    background-size: 100%;
    height:auto;
    background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    padding:0px;
}
#heaven {
    /*background-color: rgb(0, 0, 255);*/
    background: url(http://th04.deviantart.net/fs70/PRE/i/2010/309/7/f/meadows_of_heaven_by_debugger20-d2z0tiy.png) no-repeat center center /*fixed*/;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*background-size:100% 600px;*/
    height:300px;
    position:fixed;
    top:0px;
    z-index:-1;
    width: 100%;
}
#heaven h1 {
    text-align: center;
    /*display: block;*/
    margin: 0;
    color: #FFF;
    text-shadow: 3px 3px 3px rgba(50, 26, 14, 0.3);
    font-size: 7rem;
    margin-top:60px;
    /*font-family: Impact;*/
    font-family: 'Text Me One', sans-serif;
    font-style:normal;
}
#outer-header {
    height: 32px;
    width: 100%;
    background-color: rgb(251, 122, 35);
    /*position:fixed;
    margin: auto 0;*/
    margin-top:300px;
    z-index:1;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    min-width:1302px; /*mindestens so groß wie Sidebar-Container- 2 px wegen rahmen.*/
}
#inner-header {
    width: 1300px;
    /*width: 960px;*/
    height: 32px;
    margin: 0 auto;
    line-height: 30px;
}
#inner-header :hover {
    background-color: rgb(255, 132, 45);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}
a {
    /*color:...

JavaScript

$(function () {
    var stickyHeaderTop = $('#outer-header').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#outer-header').css({
                position: 'fixed',
                top: '-300px'
            });
            $('#main').css({
                position: 'relative',
                top: '332px'
            });
        } else {
            $('#outer-header').css({
                position: 'absolute',
                top: '0px'
            });
            $('#main').css({
                position: 'relative',
                top: '332px'
            });
        }
    });
});

window.onload = function () {
    changeBG();
};

function changeBG() {
    var images = new Array('http://www.windows-7-wallpapers.com/wallpapers/img24-1920x1200.jpg',
        'http://awesomewallpapers.files.wordpress.com/2009/08/white2.png',
        'http://3.bp.blogspot.com/-1kmNHFICiGs/UJUdnWynEII/AAAAAAAANPw/lBiCOKpv0As/s1600/White%2BWallpapers%2B3.jpg',
        'http://www.wallpaperpimper.com/wallpaper/Flower/Flower_Art/Flower-Art-Winter-White-1-1920x1200.jpg');
    $('#main').css("background-image", "url(" + images[getRandom(0, images.length - 1)] + ")");
}

var oldR; //Letzte Zahl

function getRandom(min, max) {
    
    //alert('old math' + oldR);
    
    if (min > max) {
        return -1;
    }

    if (min == max) {
        return min;
    }

    var r;

    do {
        r = Math.random();
    }
    while (min + parseInt(r * (max - min + 1)) == oldR); //verhindert das selbe zahl 2 mal nacheinander rauskommt.
    
    oldR = min + parseInt(r * (max - min + 1));
    //alert('new math' + oldR);
    //while (r == 1.0);

    return min + parseInt(r * (max - min + 1));
    
}