Difference between revisions of "Template:Team:TU Eindhoven/Menu CSS"

Line 1: Line 1:
 
<html>
 
<html>
−
#menu{
+
#menuwrapper{
 
position:relative;
 
position:relative;
 
z-index:1;
 
z-index:1;
 
background: #ddeebb;
 
background: #ddeebb;
 
width:100%;
 
width:100%;
 +
}
 +
#menu{
 +
position:relative;
 +
width:1200px;
 
height:45px;
 
height:45px;
 
margin:0 auto;
 
margin:0 auto;
 
}
 
}
−
#submenu{
+
#submenuwrapper{
 
position:relative;
 
position:relative;
 
z-index:1;
 
z-index:1;
 
background: #f6f0cc;
 
background: #f6f0cc;
 
width:100%;
 
width:100%;
 +
}
 +
#submenu{
 +
position:relative;
 +
width:1200px;
 
height:0px;
 
height:0px;
 
margin:0 auto;
 
margin:0 auto;
Line 19: Line 27:
 
}
 
}
 
#menu1{
 
#menu1{
−
margin-left:calc((100% - (5 * 14%)) / 2);
+
margin-left:calc((100% - (6 * 12%)) / 2);
 
}
 
}
 
#menu a:not(#menutwitter):not(#menufacebook), #submenu a {
 
#menu a:not(#menutwitter):not(#menufacebook), #submenu a {
Line 26: Line 34:
 
     text-align: center;
 
     text-align: center;
 
     line-height: 45px;
 
     line-height: 45px;
−
     width:14%;
+
     width:12%;
 
     display:block;
 
     display:block;
 
     text-decoration: none;
 
     text-decoration: none;
 
     float: left;
 
     float: left;
 
     color: #004415;
 
     color: #004415;
−
}
 
−
 
−
#menu1:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover{
 
−
color: #9DC671;
 
 
}
 
}
  
Line 47: Line 51:
  
 
#sub2a{
 
#sub2a{
−
margin-left:calc(((100% - (5 * 14%)) / 2) - (0.5 * 14%));
+
margin-left:calc(((100% - (6 * 12%)) / 2) - (0.5 * 12%));
 
}
 
}
 
#sub3a{
 
#sub3a{
−
margin-left:calc(((100% - (5 * 14%)) / 2) + (1.5 * 14%));
+
margin-left:calc(((100% - (6 * 12%)) / 2) + (1.5 * 12%));
 
}
 
}
 
#sub4a{
 
#sub4a{
−
margin-left:calc(((100% - (5 * 14%)) / 2) + (2 * 14%));
+
margin-left:calc(((100% - (6 * 12%)) / 2) + (2 * 12%));
 
}
 
}
 
#sub5a{
 
#sub5a{
−
margin-left:calc(((100% - (5 * 14%)) / 2) + (4 * 14%));
+
margin-left:calc(((100% - (6 * 12%)) / 2) + (4 * 12%));
 
}
 
}
  

Revision as of 10:11, 12 May 2015

#menuwrapper{ position:relative; z-index:1; background: #ddeebb; width:100%; } #menu{ position:relative; width:1200px; height:45px; margin:0 auto; } #submenuwrapper{ position:relative; z-index:1; background: #f6f0cc; width:100%; } #submenu{ position:relative; width:1200px; height:0px; margin:0 auto; overflow:hidden; transition: height 0.2s; } #menu1{ margin-left:calc((100% - (6 * 12%)) / 2); } #menu a:not(#menutwitter):not(#menufacebook), #submenu a { position:relative; font-weight: bold; text-align: center; line-height: 45px; width:12%; display:block; text-decoration: none; float: left; color: #004415; } #sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover{ color: #9DC671; } #sub2,#sub3,#sub4,#sub5{ width:100%; height:100%; } #sub2a{ margin-left:calc(((100% - (6 * 12%)) / 2) - (0.5 * 12%)); } #sub3a{ margin-left:calc(((100% - (6 * 12%)) / 2) + (1.5 * 12%)); } #sub4a{ margin-left:calc(((100% - (6 * 12%)) / 2) + (2 * 12%)); } #sub5a{ margin-left:calc(((100% - (6 * 12%)) / 2) + (4 * 12%)); } #sub2,#sub3,#sub4,#sub5{ display:none; } #body{ position:absolute; top:45px; width:100%; background-color: #FCFCD5; } #container{ margin:0 calc((100% - 1200px) / 2); border-radius:15px 30px 30px 15px; background-color:white; background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)), url("http://thumbs.dreamstime.com/z/paper-texture-drops-coffee-23801402.jpg"); background-size: cover; box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); height:1200px; width:1200px; } /*Twitter*/ #twitter{ top:45px; right:0; z-index:1; display:none; position:absolute; } #twitter_logo{ height:45px; float:right; } /*FB*/ #facebook{ right:0; top:45px; z-index:1; display:none; position:absolute; } #facebook_logo{ height:45px; float:right; }