playa layout

by stot

HTML

<div id="battleBackground">    
    <div id="statusBar">
        Status bar: height: 40px, transparent over battle background
    </div>
    battle background and monster area<br/>
    height: 395px x 640px
    <div id="team">
        team: height 106px, transparent over battle background
    </div>
    
</div>

<div id="board">
    Board: height 525, width 640px
</div>

<div id="healthBar">
        health bar: height 40px, 
    </div>

CSS

#statusBar {
    height:40px;
    background-color:rgba(200,200,200,0.4);
}

#team {
    height: 106px;
    position:absolute;
    display:block;
    width:100%;
    bottom: 0px;
    background-color:rgba(200,200,200,0.4);
}

#healthBar {
    height: 40px;
    //position:absolute;
    //display:block;
    //width:100%;
    //bottom: 0px;
    background-color:rgba(200,00,00,0.4);
}

#battleBackground {
    height: 395px;
    position:relative;
    background: linear-gradient(to right, #b4ddb4 0%,#e00000 17%,#ffe41c 33%,#325bff 67%,#ff35f8 83%,#002400 100%);
}

#board {
    height:525px;   
    background-color:rgb(0,0,200);
    color:white;
}

div {
    border:0px solid red;
    background-transparency: 0.5;    
}