Difference between revisions of "Template:KCII-CSIA-Main-Navigation-English"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
+ | {{template: Inspire rainbow styles}} | ||
+ | <html><style> | ||
+ | /*Hide the first heading*/ | ||
+ | #firstHeading { | ||
+ | display: none; | ||
+ | } | ||
+ | /*Hide the language box when not signed in*/ | ||
+ | .langBox { | ||
+ | display: none; | ||
+ | } | ||
+ | /*Hide the "back" link at top of page for subpages (breadcrum)*/ | ||
+ | #contentSub { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | <head> | ||
+ | <title>GCdocs Program Layout</title> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<style> | <style> | ||
− | + | body { | |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | /* Style the header */ | ||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .img-container { | ||
+ | margin:0; | ||
+ | background-image: url(http://www.gcpedia.gc.ca/gcwiki/images/b/bb/GCdocs-GCpedia-banner-high-resolution%28BIL%29.png); | ||
+ | background-size: 1178px 239px; | ||
+ | min-height: 239px; | ||
+ | margin: 0 auto; | ||
+ | padding : 0; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center top; | ||
+ | } | ||
+ | |||
+ | .img-container a{ | ||
+ | display: block; | ||
+ | width: 1178px; | ||
+ | height: 239px; | ||
+ | text-decoration: none; | ||
+ | text-align: center; | ||
+ | cursor: pointer; | ||
+ | overflow: hidden; | ||
+ | text-indent: 100%; | ||
+ | white-space:nowrap; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Navigation Bar*/ | ||
+ | .nav { | ||
+ | list-style-type: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | overflow: hidden; | ||
+ | background-color: #2F6632; | ||
+ | text-align: center; | ||
+ | text-decorationː none; | ||
+ | font-family: Helvetica, sans-serif; | ||
+ | font-size:20pt; | ||
+ | font-weight: bold; | ||
+ | border-top: none; | ||
+ | line-height:20px; | ||
+ | } | ||
+ | |||
+ | .nav li { | ||
+ | display: inline-block; | ||
+ | text-decorationː none; | ||
+ | } | ||
+ | .nav a { | ||
+ | display: block; | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | padding: 16px; | ||
+ | border-bottom: none; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .nav a:hover { | ||
+ | background-color: #71bd66; | ||
+ | text-decorationː none; | ||
+ | } | ||
+ | /*Responsive*/ | ||
+ | @media screen and (max-width: 600px) { | ||
+ | .nav a:not(:first-child) {display: none;} | ||
+ | .nav a.icon { | ||
+ | float: right; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 600px) { | ||
+ | .nav.responsive {position: relative;} | ||
+ | .nav.responsive .icon { | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | } | ||
+ | .nav.responsive a { | ||
+ | float: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
</style> | </style> | ||
− | + | </head> | |
− | + | <body> | |
− | + | ||
− | + | <div class="img-container"> <a href="http://www.gcpedia.gc.ca/wiki/GCdocsProgram"></div></a> | |
− | + | ||
− | + | <div class="nav"> | |
− | + | <ul class="nav"> | |
− | + | <nav> | |
− | + | <ul> | |
− | + | <li><a href="http://www.gcpedia.gc.ca/wiki/GCdocsProgram">Home</a></li> | |
+ | <li><a href="http://www.gcpedia.gc.ca/wiki/GCdocsProgram/About">About</a></li> | ||
+ | <li><a href="http://www.gcpedia.gc.ca/wiki/GCdocsProgram/What's_New">What's New</a></li> | ||
+ | <li><a href="http://www.gcpedia.gc.ca/wiki/GCdocsProgram/Resources">Resources</a></li> | ||
+ | <li><a href="http://www.gcpedia.gc.ca/wiki/GCdocsProgram/Contact">Contact</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | <div style="float:left; text-align:left; border:2px solid ##f9f9f9; padding:20px; background-color: #f9f9f9; width: 100%;"> | ||
+ | <!-- call cascading stylesheet - do not touch // le code ci-dessous fait appel à une page qui contient le guide- n'y touchez pas-->{{#css:{{Cco-css}}}}<!-- remove table of contents from top of page - enlever la table des matières --> |
Revision as of 18:38, 29 October 2020
Template:Inspire rainbow styles <html><style> /*Hide the first heading*/
- firstHeading {
display: none;
} /*Hide the language box when not signed in*/ .langBox {
display: none;
} /*Hide the "back" link at top of page for subpages (breadcrum)*/
- contentSub {
display: none;
}
<head> <title>GCdocs Program Layout</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {
margin: 0; padding: 0;
}
/* Style the header */
- {
box-sizing: border-box; margin: 0; padding: 0;
}
.img-container { margin:0;
background-image: url(http://www.gcpedia.gc.ca/gcwiki/images/b/bb/GCdocs-GCpedia-banner-high-resolution%28BIL%29.png); background-size: 1178px 239px; min-height: 239px; margin: 0 auto; padding : 0; background-repeat: no-repeat; background-position: center top; }
.img-container a{
display: block;
width: 1178px; height: 239px; text-decoration: none; text-align: center; cursor: pointer; overflow: hidden; text-indent: 100%; white-space:nowrap; }
/*Navigation Bar*/
.nav {
list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #2F6632; text-align: center; text-decorationː none; font-family: Helvetica, sans-serif; font-size:20pt; font-weight: bold; border-top: none;
line-height:20px; }
.nav li {
display: inline-block; text-decorationː none;
} .nav a {
display: block; color: white; text-align: center; padding: 16px; border-bottom: none; text-transform: uppercase;
} .nav a:hover {
background-color: #71bd66; text-decorationː none; } /*Responsive*/
@media screen and (max-width: 600px) {
.nav a:not(:first-child) {display: none;} .nav a.icon { float: right; display: block;
}
@media screen and (max-width: 600px) {
.nav.responsive {position: relative;} .nav.responsive .icon { position: absolute; right: 0; top: 0; } .nav.responsive a { float: none; display: block; text-align: left; }
</style> </head> <body>
<a href="http://www.gcpedia.gc.ca/wiki/GCdocsProgram">
</a>
</body> </html>