Scribd Logo
Unggah

Selamat datang di Scribd!

  • Untitled

    Diunggah oleh

    Matt Vitebsky
    11 tayangan5 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    TXT, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai TXT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    11 tayangan5 halaman

    Untitled

    Diunggah oleh

    Matt Vitebsky

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai TXT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    <html> <head> <title> Div Blocks</title> <style type="text/css"> a{ height:400px; width:450px; } div#container { margin: 15px auto 0px auto;

    padding: 0px; width: 940px; text-align: left; background-color: #FFFFFF; } html { background: url("bgo.jpg") no-repeat fixed center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1200px; } body{ min-width: 1200px;} a{ cursor : url("nav.png"), pointer; } #leftnav { position : absolute; left : 0; width : 600px; margin-left : 10px; color : #000000; padding : 3px; z-index:3; } #rightnav { float:right; width : 450px; padding-left : 10px; z-index : 4; color : #000000; padding : 3px; margin-right:80px; } #content { margin-left:100px; margin-right:100px;

    position:absolute; } div.hide { visibility:hidden; } div.one a { position:absolute; text-decoration:none; background:url("branding.png"); background-repeat:no-repeat; padding-bottom:25px; height:150px; top:50px; } div.one a:hover {background: url("brandingalt.png"); background-position: 0px 0px; background-repeat:no-repeat; } div.two a { position:absolute; text-decoration:none; background:url("marketing.png"); background-repeat:no-repeat; padding-bottom:25px; z-index:5; width:500px; height:150px; top:400px } div.two a:hover {background: url("marketingalt.png"); background-position:0px 0px; background-repeat:no-repeat; } div.three a { width:500px; height:150px; top:657px; position:absolute; text-decoration:none; background:url("ecommerce.png"); background-repeat:no-repeat; padding-bottom:20px; } div.three a:hover {background: url("ecommercealt.png"); background-position: 0 0px; background-repeat:no-repeat;

    } div.r1 a { position: absolute; top:50px; width: 400px; height: 150px; text-decoration:none; background:url("webdesign.png"); background-repeat:no-repeat; padding-bottom:25px; } div.r1 a:hover {background: url("webdesignalt.png"); background-position: 0px 0px; background-repeat:no-repeat; } div.r2 a { position: absolute; top:400px; width: 450px; height: 150px; text-decoration:none; background:url("optimization.png"); background-repeat:no-repeat; padding-bottom:25px; } div.r2 a:hover {background: url("optimizationalt.png"); background-repeat:no-repeat; } div.r3 a { position: absolute; top:657px; width: 400px; height: 75px; text-decoration:none; padding-bottom: 20px; background:url("packaging.png"); background-repeat:no-repeat; } div.r3 a:hover {background: url("packagingalt.png"); background-repeat: no-repeat; } div.transbox { left:0; visibility:hidden; position:absolute; width:600px; height:500px; margin:30px 50px; background-color:blue; border:3px solid red;

    opacity:0.4; filter:alpha(opacity=40); z-index: 10; } </style> </head> <body> <div> <div id="leftnav"> <div class="one"> <a href="#" value="Branding" class="go" ></a> </div> <div class="two"> <a href="#" class="go"></a> </div> <div class="three"> <a href="#" class="go" ></a> </div> </div> <div class="hide"> <button id="hide" class="hide">Hide</button></div> <div id="content"> </div> <div id="rightnav"> <div class="r1"> <a href="#" class="go" ></a> </div> <div class="r2"> <a href="#" class="go" ></a> </div> <div class="r3"> <a href="#" class="go" ></a> </div> </div> </div> <div class="transbox"> </div> </body> </html>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ 1.6.1/jquery.min.js"></script> <script> $(".go").click(function(event){ event.preventDefault(); $(".go").not(this).hide("slow"); $(this).animate({top: "0", left: '60%'}, "slow", function() { $(".transbox, .hide").css("visibility","visible");

    }); }); </script>

    Anda mungkin juga menyukai