"
Template:Team:Waterloo/CSS/TopBar
From 2014.igem.org
(Difference between revisions)
(Created page with "<html> <head> <style> #topbar { width: 100%; position:fixed; left:0px; right:0px; z-index:999; top:16px; background: #333; height:60px; } .sections_panel { posi...") |
Super.suzie (Talk | contribs) |
||
| (35 intermediate revisions not shown) | |||
| Line 4: | Line 4: | ||
#topbar { | #topbar { | ||
width: 100%; | width: 100%; | ||
| - | position:fixed; | + | min-width:900px; |
| + | position:absolute; | ||
| + | left:0px; | ||
| + | right:0px; | ||
| + | top:20px; | ||
| + | background: #333; | ||
| + | min-height:60px; | ||
| + | z-index:999; | ||
| + | |||
| + | /*** | ||
| + | this commented stuff is how it was before; changed the values to what is above here in order to fix display | ||
| + | on mobila devices :) - Stefan */ | ||
| + | /* position:fixed; | ||
left:0px; | left:0px; | ||
right:0px; | right:0px; | ||
| - | z-index:999; | + | z-index:999; |
| - | top: | + | ***/ |
| + | |||
| + | top:20px; | ||
background: #333; | background: #333; | ||
| - | + | /*** height:60px; ***/ | |
} | } | ||
.sections_panel { | .sections_panel { | ||
position:absolute; | position:absolute; | ||
| - | |||
background:#000; | background:#000; | ||
top:60px; | top:60px; | ||
| - | |||
border-radius:0px 0px 8px 8px; | border-radius:0px 0px 8px 8px; | ||
overflow:hidden; | overflow:hidden; | ||
z-index:10000; | z-index:10000; | ||
| - | |||
display: none; | display: none; | ||
| - | width: | + | width: 220px; |
} | } | ||
.sections_panel > div { | .sections_panel > div { | ||
background:#333; | background:#333; | ||
| - | padding: | + | padding:10px; |
| - | + | ||
margin:10px; | margin:10px; | ||
color:#71CCE6; | color:#71CCE6; | ||
| + | } | ||
| + | #headings { | ||
| + | display: table; | ||
| + | margin: auto; | ||
} | } | ||
#headings > li { | #headings > li { | ||
| Line 40: | Line 54: | ||
color: #71CCE6; | color: #71CCE6; | ||
font-size: 15px; | font-size: 15px; | ||
| - | |||
font-weight: bold; | font-weight: bold; | ||
| - | |||
cursor: pointer; | cursor: pointer; | ||
vertical-align: -20px; | vertical-align: -20px; | ||
| + | font-family: 'Oxygen', Helvetica, sans-serif; | ||
| + | text-transform: uppercase; | ||
} | } | ||
.dropdown li { | .dropdown li { | ||
| Line 50: | Line 64: | ||
line-height: 30px; | line-height: 30px; | ||
text-align: left; | text-align: left; | ||
| + | text-transform: uppercase; | ||
} | } | ||
.dropdown li > a { | .dropdown li > a { | ||
| + | font-family: Oxygen, sans-serif; | ||
color: #FFFFFF; | color: #FFFFFF; | ||
font-size: 14px; | font-size: 14px; | ||
| - | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
#headings > li:hover > .sections_panel { | #headings > li:hover > .sections_panel { | ||
display: block; | display: block; | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
} | } | ||
.spacer { | .spacer { | ||
height: 80px; | height: 80px; | ||
| + | } | ||
| + | img#toTop{ | ||
| + | height: 30px; | ||
| + | position: fixed; | ||
| + | bottom: 5%; | ||
| + | float: right; | ||
| + | right: 2%; | ||
| + | -webkit-transition: height 0.5s; /* For Safari 3.1 to 6.0 */ | ||
| + | transition: height 0.5s; | ||
| + | z-index:999; | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> | ||
Latest revision as of 01:11, 18 October 2014
