Hello People,
Would greatly appreciate assistance with the nav on my site
Okay what I have set up for you to view is one html page, with 2 css pages, layout.css has all the mobile layout settings Im happy with this,
now on the style.css page I want to create adaptations for page increasing to 46em width and 60em
now I know later I will be making the display of sectors in percentages,
but right now Im having problems setting up the nav
The nav Im using, uses no javascript, Ive only seen this method on one website, and cant get the nav to set up fro tablet view and laptop view
what I want is a simple navigation bar in the header on the right hand side
I can do it ordinarily, but I want to use the coding Ive already used.
Hope ive explained myself, for you be able to guide me
MAny thanks
Elli :)
index.htm
layout.css....
style.css
Would greatly appreciate assistance with the nav on my site
Okay what I have set up for you to view is one html page, with 2 css pages, layout.css has all the mobile layout settings Im happy with this,
now on the style.css page I want to create adaptations for page increasing to 46em width and 60em
now I know later I will be making the display of sectors in percentages,
but right now Im having problems setting up the nav
The nav Im using, uses no javascript, Ive only seen this method on one website, and cant get the nav to set up fro tablet view and laptop view
what I want is a simple navigation bar in the header on the right hand side
I can do it ordinarily, but I want to use the coding Ive already used.
Hope ive explained myself, for you be able to guide me
MAny thanks
Elli :)
index.htm
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Welcome</title><!--Mobile specific meta --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1initial-zoom=1,"><!--google fonts--><link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'><!-- Device stuff --><link rel="apple-touch-icon" href="http://www.programmersheaven.com/app-icon.png"/> <!-- Favicons--><link rel="shortcut icon" href="img/favicon.ico"><link rel="shortcut icon" href="http://www.programmersheaven.com/favicon.png"/><!--css--><link rel="stylesheet" type="text/css" href="css/layout.css" / ><link rel="stylesheet" type="text/css" href="css/style.css" media="all and (min-width:46em)"/><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js">< ;/script><![endif]--></head><body ><header id="top" role="banner"><h1 id="logo"><a href="www.website.co.uk" title="website Homepage"><img src="i/logo.png" alt="website"/></a></h1><a id="jump" href="#nav">Main Navigation</a></header><div id="page" role="main"><div id="content"><header id="welcome"><h2>Welcome People…</h2><p>Praesent luctus orci quis lorem dapibus molestie. Nam aliquet varius ligula, nec imperdiet ligula suscipit vitae. In rutrum commodo felis a feugiat. Vivamus feugiat eros ut tortor ultricies non feugiat elit mollis. In hac habitasse platea dictumst. </p></header><article> <div id="creation"><h2> <a href="#WebCre">Creation People …</a> </h2><p>Praesent luctus orci quis lorem dapibus molestie. Nam aliquet varius ligula, nec imperdiet ligula suscipit vitae. In rutrum commodo felis a feugiat. Vivamus feugiat eros ut tortor ultricies non feugiat elit mollis. In hac habitasse platea dictumst.</p></div></article><article><div id="pricing"><h2> <a href="#CompP">Pricing People …</a></h2><h4>Starting @ … </h4> <table border="1" cellpadding="1"><tr><td >1 dress </td><td>₤250 </td></tr><tr><td >2 dresses</td><td> ₤400 </td></tr><tr><td class="auto-style1" >4 pages</td><td> ₤600 </td></tr><tr><td >12 dresses</td><td> ₤1000 </td></tr></table></div></article><article><div id="webAid"><a href="#"><h2> <a href="#WebAid">Help People …</a> </h2></a><p>Praesent luctus orci quis lorem dapibus molestie. Nam aliquet varius ligula, nec imperdiet ligula suscipit vitae. In rutrum commodo felis a feugiat. Vivamus feugiat eros ut tortor ultricies non feugiat elit mollis. In hac habitasse platea dictumst.</p></div></article></div><!--end of content--><nav role="navigation"><ul id="contact"><li><a class="email" href="#">Contact</a></li><li><a class="directions" href="#top">Back to top</a></li></ul><ul id="nav" tabindex="0"><li><a href="#">Design</a></li><li><a href="#">Charges</a></li><li><a href="#">Assist</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li><li id="back"><a href="#top">Back to top</a></li></ul></nav></div><!--end of page--><footer id="bottom" role="contentinfo"><!-- ADDRESS & SUCH --><div id="copyright"> © 2013 company. All rights reserved.</div ><!--<a id="jump" href="#contact">Contact Navigation</a>--></footer><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="j/main.js"></script></body></html>
layout.css....
../* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } /********************************************** *************** = layout: = *************** **********************************************/ body { line-height: 1em; font: 87.5% / 1.5 'PT Sans', sans-serif; padding: 0 1em; } header footer { padding: 15px 20px; } /*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/ header:before, header:after { content:""; display:table; } header:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ div#creation, div#pricing, div#webAid, div#welcome { margin-bottom: 1em; margin-top: 1em; } #content{ margin-bottom: 1em; } #top, #bottom, #welcome { margin-left: -1em; margin-right: -1em; padding: 1em; } article { border-bottom: 1px solid #d8d8d8; padding: 0 20px 0 20px; margin: 0; } .boxed { width: 25em; background: red; } .boxeda { width: 40em; background: green; } /********************************************** ********** = header nav footer = ********** **********************************************/ #top { border-bottom: 1px solid #4e4e4e; } #bottom { border-top: 1px solid #4e4e4e; } #nav { margin: 0; outline: 0; } nav { margin: 0 -1em ; } nav a { letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; display: block; border-bottom: 1px solid; padding: 0.5em 1em; font-weight: normal; font-style: normal; } nav ul { list-style: none; margin-bottom: 0; } #jump { border: 1px solid; border-width: 0 0 1px 1px; cursor: pointer; display: block; padding: 0; height: 53px; width: 53px; text-indent: -999em; position: absolute; right: 0; top: 0; z-index: 1001; } #jump { background: black url(i/nav.png) 50% 50% no-repeat; border-color: #4e4e4e; } body:not(:target) #nav { outline: 0; margin: 0; padding-top: 54px; position: absolute; top: 0; right: 0; left: 0; z-index: 1000; } body:not(:target) #nav a { border-bottom-width: 0; font-weight: bold; overflow: hidden; height: 0; line-height: 0; padding: 0 1em; } body:not(:target) #nav:target { z-index: 1001; } body:not(:target) #nav:target a { border-bottom-width: 1px; line-height: 3em; height: 3em; position: relative; z-index: 1; -moz-transition: height .25s, line-height .25s; -ms-transition: height .25s, line-height .25s; -o-transition: height .25s, line-height .25s; -webkit-transition: height .25s, line-height .25s; transition: height .25s, line-height .25s; } body:not(:target) #nav:target #back { display: block; position: relative; } body:not(:target) #nav:target #back a { background: transparent; border: 0; display: block; height: auto; line-height: 1; position: absolute; top: -101em; bottom: -101em; left: 0; right: 0; text-indent: -999em; z-index: 0; } #copyright{ text-align: center; margin: 0; padding: 0; font-size: 0.75em; font-style: italic; } /********************************************** ********** = logo : = ************ **********************************************/ #logo { font-size: 1em; margin: 0; } #logo a { display: block; padding: .4em 0; } #logo img { display: block; vertical-align: middle; /* img Image Replacement */ background: url(i/logo-footer.png) 0 0 no-repeat; background-size: 100% auto; padding-top: 15px; height: 0; width: 198px; max-width: 100%; overflow: hidden; /* end img Image Replacement */ } /********************************************** **************** = font: = ************ **********************************************/ h2 { font-family: 'PT Serif', serif; font-size: 28px; line-height: 1.4; margin: 0 0 .4em; font-weight: normal; padding: 0; } #welcome p{ font-size: 1.14em; } a, a :link, nav a:link { text-decoration: none; } article p{ font-size: 1.14em; } article{ border-radius: 20px ; } /********************************************** **************** = color and picture: = ************ **********************************************/ /**************** = layout: = ************/ body{ background: #d2d2d2; } header, footer{ background: #1c1c1c; color: #fff; } #welcome { background: #343434 left center no-repeat; -moz-box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.75); -ms-box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.75); -o-box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.75); -webkit-box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.75); box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.75); } #bottom { color: #a6a6a6; } article a { color: #2d2d2d; } article a:hover, article a:focus { text-shadow: 5px 5px 10px #2e339e; filter: dropshadow(color=#2e339e, offx=10, offy=5); /*border-bottom: 2px solid #8B8B8B;*/} a { color: #000000; } a:hover, a:focus { color: #353568; } #content > div { border-color: #e2e2e2; } #content article { border-color: #e2e2e2; } article { background: #edeeee; border-color: #c5c5c5; -moz-box-shadow: inset 1px 0px .5em #dddede; -ms-box-shadow: inset 1px 0px .5em #dddede; -o-box-shadow: inset 1px 0px .5em #dddede; -webkit-box-shadow: inset 1px 0px .5em #dddede; box-shadow: inset 1px 0px .5em #dddede; } /**************** = nav: = ************/ #top, #nav, nav a { border-color: #8b8b8b; } nav a { background: #1c1c1c url(i/arrow.png) 98% 50% no-repeat; color: #fff; } nav a:hover, nav a:focus { background-color: #4c5c70; background-image: url(i/arrow.png), -webkit-gradient(linear, left top, left bottom, from(#00613b 0%), to(#007e4d), color-stop(0.3, #353568)); background-image: url(i/arrow.png), -moz-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), -ms-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), -o-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), -webkit-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), linear-gradient(top, #353568, #353568 30%, #4c5c70); color: #fff; } #jump { background: black url(i/nav.png) 50% 50% no-repeat; border-color: #4e4e4e; } #nav { box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.75); } #nav a { background: black url(i/arrow.png) 97% 50% no-repeat; background-color: rgba(0, 0, 0, 0.9); } #nav a:hover, #nav a:focus { background-color: #4c5c70; background-image: url(i/arrow.png), -webkit-gradient(linear, left top, left bottom, from(#00613b 0%), to(#007e4d), color-stop(0.3, #353568)); background-image: url(i/arrow.png), -moz-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), -ms-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), -o-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), -webkit-linear-gradient(top, #353568, #353568 30%, #4c5c70); background-image: url(i/arrow.png), linear-gradient(top, #353568, #353568 30%, #4c5c70); }
style.css
.#nav {
margin: 0;
outline: 0;
}
/* =larger than mobile Nav= */
@media screen and (min-width:46em) {
article {
background: #2222ed;
color: #eceded }
}
@media screen and (min-width:60em){
article {
background: #21ff21;
color: #eceded }
}.