Template:Team:Edinburgh/css/header-structure.css

From 2012.igem.org

(Difference between revisions)
(Adding images to the main menu)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
 +
/* the images that are shown when hovering with the mouse over the main menu shouls have the following size ratio: width/height = 120/90 */
#header{
#header{
height:158px;
height:158px;
Line 81: Line 82:
margin-right:auto;
margin-right:auto;
height:40px;
height:40px;
 +
list-style:none;
text-align:center;
text-align:center;
}
}
#main-menu ul{
#main-menu ul{
height:100%;
height:100%;
 +
margin:0;
 +
padding:0;
 +
list-style:none;
}
}
-
#main-menu li{
+
#main-menu ul li{
float:left;
float:left;
width:108px;
width:108px;
Line 94: Line 99:
width:111px;
width:111px;
}
}
-
#main-menu li a{
+
#main-menu ul li ul a{
display: block;
display: block;
height:100%;
height:100%;
width:100%;
width:100%;
 +
padding:0;
}
}
-
#main-menu li a p{
+
#main-menu ul li ul a p{
-
position:relative;
+
padding-top: 6px;
-
top:6px;
+
}
}
-
#main-menu li#human-page a p{
+
#main-menu ul li#human-page ul a p{
 +
padding-top: 4px;
 +
}
 +
#main-menu ul li ul{
 +
padding:0;
 +
height:40px;
 +
}
 +
#main-menu ul li:hover ul{
 +
/*height:40px;*/
 +
}
 +
#main-menu ul li ul li{
 +
padding:0px;
 +
margin:0px;
 +
width:100%;
position:relative;
position:relative;
-
top:4px;
+
top:-9000px;left:-9000px;
 +
}
 +
#main-menu ul li ul li.tab-sub-menu,
 +
#main-menu ul li:hover ul li.tab-description{
 +
height:25px;
 +
}
 +
#main-menu ul li ul li.tab-img{
 +
height:81px;
 +
}
 +
#main-menu ul li ul li a,
 +
#main-menu ul li ul li img{
 +
padding:0;
 +
margin:0;
 +
width:100%;
 +
display:block;
 +
}
 +
#main-menu ul li ul:hover li.tab-img{
 +
top:-121px;left:0px
 +
}
 +
#main-menu ul li:hover ul li.tab-sub-menu,
 +
#main-menu ul li:hover ul li.tab-description{
 +
top:-81px;left:0px;
 +
/*height:auto;*/
 +
}
 +
#main-menu ul li#home-page:hover{
 +
border-radius:0px;
 +
}
 +
#main-menu ul li#attributions-page:hover{
 +
border-radius:0px;
 +
}
 +
#main-menu ul li ul li a{
 +
margin-top:3px;
 +
border:none;
 +
display:block;
 +
}
 +
#main-menu ul li ul li.no-show{
 +
display:none;
}
}
</style>
</style>
</html>
</html>

Revision as of 15:12, 31 July 2012