bar top

by matmat

HTML

<div class="header">
<div class="line h60">
    <div class="helper"></div>
    <div class="content jqMainLauncher w60" id="home">
        <img src="http://www.junkst.com/Images/Icones/logo_junkst.png" alt="Junkst" title="Junkst" />
    </div>
    <div class="content clear1 w60"></div>
    <div class="content clear2 w60 arrow" id="avatar">
        <img src="http://www.junkst.com/Images/Avatars/8.jpg" alt="J" title="Junkst" />
    </div>
    <div class="content clear2 w60 jqMainLauncher" data-app="saap">
        <img src="http://www.junkst.com/Images/Icones/SAAP.png" alt="Junkst" title="Junkst" />
    </div>
    <div class="content clear2 w60 jqMainLauncher" data-app="gaap">
        <img src="http://www.junkst.com/Images/Icones/GAAP.png" alt="Junkst" title="Junkst" />
    </div>
    <div class="content clear2 w60 jqMainLauncher" data-app="svap">
        <img src="http://www.junkst.com/Images/Icones/SVAP.png" alt="Junkst" title="Junkst" />
    </div>
    <div class="content w60 jqMainLauncher" data-app="wlap">
        <img src="http://www.junkst.com/Images/Icones/WLAP.png" alt="Junkst" title="Junkst" />
    </div>
    <div class="content w60 clear1"></div>
    <div class="content w60 jqMainLauncher clear2" data-app="search">
        <img src="http://www.junkst.com/Images/Icones/Search.png" alt="Junkst" title="Junkst" />
    </div>
    <div class="content w60 jqMainLauncher clear2" data-app="set">
        <img src="http://www.junkst.com/Images/Icones/Set.png" alt="Junkst" title="Junkst" />
    </div>
	<div class="content w60 jqMainLauncher" data-app="quit">
        <img src="http://www.junkst.com/Images/Icones/logout.png" alt="Junkst" title="Junkst" />
    </div>
</div>
</div>

    <div class="header2">
        <div class="headerbox2 lh40"> <span>  Junkst.com</span>
 <span class="sub">  Réseau social de l'économie circulaire</span> 
        </div>
    </div>

CSS

html{
    background:whitesmoke;
    
}
.header{
    margin:auto;
    width:100%;
    background:whitesmoke;
    position:relative;
    text-align:center;
}
.h60 {
    height:60px;
}
.lh60 {
   line-height:60px;
}
.w60 {
    width:60px;
}
.h40 {
    height:40px;
}
.lh40 {
   line-height:40px;
}
.w40 {
    width:40px;
}

.line {
    margin:auto;
    padding:0;
    line-height:100%;
    box-sizing:border-box;
}
.helper, .content {
    /* on permet à ces éléments de s'aligner verticalement */
    display:inline-block;
    vertical-align:middle;
}
.helper {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    height:100%;
}
.content {
height: 100%;
line-height: 100%;
box-sizing: border-box;
text-align: center;
margin: 0px -4px 0px 0px;
position: relative;
padding:1.3%;
background: none repeat scroll 0% 0% #DCDCDC;
border: 3px solid #FFF;
cursor:pointer;
    vertical-align:middle;
}
.content:hover {
background:#FF7000;

}
.arrow{
 border:3px solid white;   
 background:grey;
}
.arrow:after, .arrow:before { right:-35%;z-index:10;top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow:after {  border-left-color: white; border-width: 10px; margin-top:-15%; } 


.content img {
    height:100%;
    
}
.clear1 {
    background:whitesmoke;
    border:none;
    cursor:default;
}
.clear1:hover {
background:whitesmoke;
}
.clear2 {
    border-right:none;
}

.header2 {
    width:100%;
    margin:auto;
    vertical-align:middle;
    background:whitesmoke;
    min-width:900px;
}
.headerbox2 {
background: none repeat scroll 0% 0% #900;
padding-left: 10%;
padding-right: 10%;
height: 100%;

color: #F5F5F5;
font-family: 'italianno';
min-width: 700px;
margin-bottom: 1%;
font-size: 2.3rem;
}
.sub {
    float: right;
    color: #808080;
    font-family: georgia;
    font-size: 1.2rem;

}