AMSD Layout

by moeishaa

HTML

<script src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js"></script>
<script src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css">
<div id="wrap">
    <div id="header">
        <div id="boxRight">
            <div id="boxLeft"></div>
        </div>
        <div id="waycontact">
            <div class="contactPaula">
                <p>paulaMACHADO</p>
                <p>crea 97877/D-MG</p>
                <p>(31) 8725 5393</p>
            </div>
            <div class="contactBeatriz">
                <p>beatrizDAMAS</p>
                <p>crea 94660/D-MG</p>
                <p>(31) 9216 6968</p>
            </div>
            <div class="address">
                <p>av. álvares cabral, 381, sl. 604, centro - belo horizonte - mg</p>
                <p>cep: 30170-000 - telefax: (31) 3222 0345</p>
                <p>[email protected]</p>
            </div>
        </div>
        <img id="logo" src="Images/AMSDLogo.png" alt="Logo da AMSD" />
    </div>
    <div id="leftcontent">
        <div id="content">
            <img class="left space" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" />
            <h2>Sobre a empresa</h2>
            <p>A AMSD é focada em qualidade..</p>
        </div>
        <div id="footer">
            <a class="current" href="#">home</a>
            <span class="space">|</span>
            <a href="#">quem somos</a>
            <span class="space">|</span>
            <a href="#">blog</a>
            <span class="space">|</span>
            <a href="#">na mídia</a>
            <span class="space">|</span>
            <a href="#">contato</a>
        </div>
    </div>
    <div id="nav">
        <ul id="menu" class="filetree treeview">
            <li><span class="menu open">Projetos</span>
                <ul>
        ...

CSS

body
{
    font-size: 12px;
    font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
    margin: 0;
    padding: 0;
    color: #666666;
}

a
{
    text-decoration:none;
}
a:link, a:visited
{
    color:#5B194F;
}
a:hover
{
    color: #666666;
}
a:active
{
    color: #444444;
}
p
{
    margin:2px;
}

div#nav ul#menu.treeview span.group, div#nav ul#menu.treeview span.menu
{
    font-weight:bold;    
}
div#nav ul#menu.treeview span.menu
{
    color:#5B194F;
    font-size:16px;
}
div#social-networks
{
    float:left;
    margin:2px;    
}
#bindsolution-link
{
    color: #666666;
}
a#bindsolution-link:active
{
    color:rgb(91,25,79);
}
a#bindsolution-link:hover
{
    color:rgb(124,71,111);
}
div#powered
{
    font-size: 10px;
    position: absolute;
    bottom: 2px;
    right: 2px;
}
div#wrap
{
    width:1024px;
    margin:5px auto;
    border:2px solid #ccc;
    overflow:auto;
    position: relative;
}
div#boxRight
{
    height:180px;
    background-color: rgb(91,25,79);
}
div#boxLeft
{
    height:100%;
    width:810px;
    border-right:10px solid rgb(169, 171, 174);
    background-color: rgb(124,71,111);
}
div#footer
{
    margin:10px;
    bottom:0px; 
    text-align:center;
    font-size: 1.27em;
}
div#waycontact
{
    width:320px;
    margin:20px 40px;
}
div#content
{
    margin-left:40px;
    overflow:auto;
}
div#leftcontent
{
    width:810px;
    border-right:10px solid rgb(169, 171, 174);
}

div.contactPaula p, div.contactBeatriz p
{
    padding:0px;
    margin:0px;
}
div.contact, div.contactPaula, div.contactBeatriz
{
    margin-bottom:15px;
    margin-top:0px;
}
div.contactBeatriz
{
    float:right;
    text-align:right;
}
div.contactPaula
{
    float:left;
    text-align:left;
}
div.address
{
    text-align:center;
}
img#logo
{
    margin:20px auto;
    margin-left:46px;
    width:450px;
    margin-bottom:30px;
}
/* Others
-----------------------------------------------------------*/
.left, div#waycontact, div#leftcontent, div#nav
{
 ...

JavaScript

$(document).ready(function() {
    $("#menu").treeview({
        animated: "fast",
        collapsed: true,
        unique: false,
    });
});