Living Outdoors PoC noJS

Proof of Concept for Living Doors homepage, now without JavaScript

by JibstaMan

HTML

<div id="wrapper">
    <!-- div4 is first so z-index isn't necessary. This might not make sense, but when div4 comes after div2, div2 mouseenter event stops 40px too early, since that's in fact div4's mouseenter. -->
    <div class="div4">
        Welcome to Cissy's website! Here you can find everything you need, just not in dutch.
    </div>
    <!-- div5 is first so z-index isn't necessary -->
    <div class="div5"></div>
    <!-- text in HTML means search engines know about it! Whoohoooh! -->
    <div id="div1" class="divBox">
        <div class="div4">
            NOAH: de psychotische gelovige die gestoord werd door de verantwoordelijk van het "moeten" met dank aan God's opdracht. Tenminste in de film.
        </div>
        <div class="div5"></div>
    </div>
    <div id="div2" class="divBox">
        <div class="div4">
            Very "hands-dirty", in-the-field, tree-huggin' home to live in!
        </div>
        <div class="div5"></div>
    </div>
    <div id="div3">
        <div class="div4">
            Specially tailored for autistic boys and gal's.
        </div>
        <div class="div5"></div>
        <div class="divBox imgDiv3"></div>
    </div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* width and height = 200px, spaces will be 20px. */
.divBox {
    width: 200px;
    height: 200px;
}

/* position the div boxes using absolute values */
#wrapper {
    position: relative;
}

#div1 {
    position: absolute;
    left: 20px;
    top: 20px;
}

#div2 {
    position: absolute;
    left: 240px; /* div_width * 1 + space * 2 */
    top: 160px; /* div_height * 1 + space * 2 - 80 */
}

#div3 {
    position: absolute;
    left: 460px; /* div_width * 2 + space * 3 */
    top: 20px;
    z-index: 2;
}

/* div1/2/3 all have a div4, they all the same width & height*/
.div4 {
    position: absolute;
    left: 240px; /* div_width * 1 + space * 2 */
    top: 20px;
    width: 200px;
    height: 130px; /* Now 130px instead of 200px to ensure #div2 doesn't overlap. */
}

/* div1/2/3 all have a div5, they all the same width & height*/
.div5 {
    position: absolute;
    left: 640px; /* div_width * 3 + space * 2 */
    top: 5px;
    width: 200px;
    height: 425px;
}

/* Since we're using absolute, which is relative to the parent, we need to reposition .div4/5 relative to the parent #div1/2/3.
   We're also making them invisible and have the right color from the get-go */
#div1 .div4, #div2 .div4, #div3 .div4 {
    /* refactered; one comma separated selector, less copied code. */
    display: none;
    background-color: #FFF; /* white */
}

#div1 .div4 {
    left: 220px; /* width div1 + space */
    top: 0px; /* overwrite earlier .div4 top statement. */
}

#div2 .div4 {
    left: 0px; /* overwrite earlier .div4 left statement. */
    top: -140px; /* -top div2 (160px) + space */
}

#div3 .div4 {
    left: -220px; /* -width div4! - space */
    top: 0px; /* overwrite earlier .div4 top statement. */
}

#div1 .div5 {
    top: -15px;
    left: 620px;
    display: none;
    background-color: #B40404; /* dark red */
}

#div2 .div5 {
    top: -155px;
    left:...