1 Replies - 857 Views - Last Post: 08 June 2013 - 05:31 AM

#1 ellishnoo  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 17
  • Joined: 19-November 08

Help needed with navigation

Posted 31 May 2013 - 06:51 AM

Hello there,
Please could someone assist me in problems I'm having with Navigatiton
First the nav in full screen view leaks out off the body section
and also when I put my cursor on the nav icons in tablet and laptop view the icons move a little
could anyone assist me in directing me to where my errors are

Many thanks
Elli


First the html.....
<html>
<head>
	<title>test page</title>

	<!--Mobile specific meta -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1initial-zoom=1,">
	
	<!--css-->
    <link rel="stylesheet" type="text/css" href="c/testers.css"/>
</head>
<body>
	<div id="wrapper" >
		


		<div class="header" id="top"> 
		<h1 id="logo">
		<a href="http://compeeze.co.uk" title="Compeeze Homepage">
		<div id="logo">Company</div>
		</a>	</h1>
		<a id="jump" href="#nav">Main Navigation</a>
		</div>

<div id="contentwrap">
		<header id="salutation"> 
            <h2>Welcome</h2>
            <p>Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome .</p>
        </header>
        </div> <!--end of contentwrap-->

        <nav role="navigation">
			<ul id="contact">		
				<li><a class="email" href="contact.htm">Contact</a></li>
				<li><a class="directions" href="#top">Back to top</a></li>
			</ul>

			<ul id="nav" tabindex="0">	
			<li><a href="design.htm">Design</a></li>
			<li><a href="charges.htm">Charges</a></li>
		    <li><a href="help.htm">WebAid</a></li>			
		    <li><a href="contact.htm">Contact</a></li>
		    <li><a href="about.htm">About</a></li>
			<li class="back"><a href="#top">Back to top</a></li>
			<li id="back"><a href="#top"></a></li>
			</ul>
		</nav> 


	<div class="footer"> 
	  		<div class="container">
				<div class="contact-details">
					<span class="contact-name">NAME <br></span>
					<span class="contact-address">Address</span>
				</div>
				<div class="tel-wrapper">
					<span class="contact-tel">0000-000-0000</span><br/>
					<span class="contact-mob"> 0000-000-00000</span><br/>
				</div>

				<div class="email-wrapper">
					<span class="contact-email"> <a href="mailto:company@btconnect.com">company@btconnect.com</a></span>
				</div>
			</div>
		</div>



	</div><!-- end of wrapper-->
</body>
</html>




Then the css.........
/**********************************
color
4c5c70 blue gray 
353568; purple blue

1c1c1c black
e1e1e1 white

4e4e4e  dark gray border
8b8b8b  lt gray border

#9496f3 lilac
#f8abf5 light pink
#F9B84A lt orangeh2h2


#DB7224 dk orange
#FFFF7F yellow
*******************************/



/**
 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
 * Richard Clark (http://richclarkdesign.com)
 * http://cssreset.com
 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}



/********************************************/
/***************** =fonts:  ****************/
/******************************************/

strong { 
  font-weight: bold; 
}
i { 
  font-style: italic;
  font-weight:bold;
}

/* =Sizes & Line Heights */
ol,
ul {
  margin: 0;
  padding: 0; 
}


figure {
  display: block; 
}
figure,
iframe {
  display: none; 
}

nav ul {
  list-style: none; 
}


h1,
.hi {
  text-transform: capitalize; 
}


a,
a:link,
nav a:link {
  text-decoration: none; 
}

nav a{
  letter-spacing: .1em; 
}


h2{
  font-size: 1.222rem; /*26px*/
  line-height: 1;
  padding: 5px 0 5px 10px;
}
p{
  font-size: 1rem; /*20px*/
  line-height: 1.2;
  padding:0px 0px 5px 0px;
}

small{
  font:  0.7778rem;
}



/********************************************/
/********** =Logo & Images:  ***************/
/******************************************/


a #logo{
      color: #e1e1e1;
      padding:8px 0px 7px 6px ;
      text-transform: uppercase;
}
a #logo:hover{

      color: #D6D6EA;
      padding:8px 0px 7px 6px ;
}
#logo {
  font-size: 1.05rem;
  margin: 0 0 0 1%;
  line-height: 1.2em; 
  letter-spacing: 0.2em;
  float: left;
}



/********************************************/
/***************** =nav:  ***************/
/******************************************/



#nav a, nav, nav a, #top{
  color: #e1e1e1;
}
#nav {
  margin: 0;
  outline: 0; 
   }

nav ul {
    margin-bottom: 0;
     }
nav a {
display: block;
}

nav a {
  background: #1c1c1c url(i/arrow.png) 98% 50% no-repeat;
   }

nav a {
  display: block;

  border-top: .9px solid #4e4e4e;
  border-bottom: 1px solid;
  padding: .5em 2em;
  letter-spacing: 0.1em;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
}


nav a:hover,
nav a:focus {
  background-color: #4c5c70;
  background-image: url(i/arrow.png), -webkit-gradient(linear, left top, left bottom, from(#4c5c70 0%), to(#353568), 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: #e1e1e1; }
    #nav {

    box-shadow: none; }
  /*this is for highligting on tab and all screens*/
      #nav a:hover, #nav a:focus {
        background-color: #353568;
        background-image: -webkit-gradient(linear, left top, left bottom, ffrom(#4c5c70 0%), to(#353568), color-stop(0.3, #353568));
        background-image: -moz-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -ms-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -o-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -webkit-linear-gradient(top, #353568, #353568 30%, #353568);
        background-image: linear-gradient(top, #4c5c70, #353568 30%, #353568); 
      border:1px solid #e1e1e1;
      }

/********************************************/
/***************** =header:  ***************/
/******************************************/

  
#jump,
#back {
  display: none; 
}

.header{
    height:37px;
    width: 100%;
    border-bottom:  1px solid #e1e1e1;
    border-top:  1px solid #e1e1e1;
}
.footer, .header{
    background:#1c1c1c;
    color: #e1e1e1;
  }


/*******************************************/
/***************** =footer:  ***************/
/******************************************/


.footer {
    color:#f0f0f0;
    line-height: 1.2;
    height: 120px;
  }


.contact-details .telandemail-wrapper {
  display: inline-block;
  text-align: left;
}
.contact-details .telandemail-wrapper
.contact-detail:first-child {
  margin: 0;
}
.container{
  padding: 5px;
}
.contact-details{
  padding: 0 0 0 10px;
}
.contact-name {
  font-size: 1.05rem;
  font-weight: bold;
}
.contact-address{
  margin:5px;
}
 .contact-tel, .contact-mob,.contact-address{
  font-size: 1rem;
}
.email-wrapper{
  margin-top: 5px;
  text-align: center;
  font-weight: 600;
}
.tel-wrapper {
  padding:0 0 0 20px;
}
.contact-email a:hover, .contact-email a:focus {
  color: #FFFF7F; 
}
.contact-email a{
  color: #B6B6DA;  
}


/*******************************************/
/***************** =content:  ***************/
/******************************************/


#salutation{
  padding:5px 10px;
  background:#18242C;
  background:-moz-linear-gradient(center top,#000 0,#18242C 432px,#18242C 100%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(top,#000 0,#18242C 432px,#18242C 100%);
  background:-o-linear-gradient(top,#000 0,#18242C 432px,#18242C 100%);
  background:-ms-linear-gradient(top,#000 0,#18242C 432px,#18242C 100%);
  background:linear-gradient(to bottom,#000 0,#18242C 432px,#18242C 100%);
  border-left:1px solid black;
  border-right:1px solid black;
  color: #e1e1e1;
}
#salutation h2{
  text-shadow: #C9C9E3 0.1em 0.1em 0.2em;
}
#salutation p{  

}
#salutation a{
 color: #ffff7f;
 font-weight: bold;
}



/********************************************/
/************* =layout:  ***************/
/******************************************/


body{
   background-color: #353568;
        background-image: -webkit-gradient(linear, left top, left bottom, ffrom(#4c5c70 0%), to(#353568), color-stop(0.3, #353568));
        background-image: -moz-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -ms-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -o-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -webkit-linear-gradient(top, #353568, #353568 30%, #353568);
        background-image: linear-gradient(top, #4c5c70, #353568 30%, #353568); 
      
}


#wrapper{
  width:100%;
    min-width: 160px;
    max-width: 800px;
    margin: 0 auto;
}
body, .footer, nav, #contentwrap, #salutaion{
    width:100%;
    font:1.111rem; /*87.5%/1.5;*/
       /* font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;*/
    font-family:  "EgyptianText",georgia,serif; 

    /*Georgia, Times, serif;*/
    clear:both;

}






#top > :first-child,
.footer > :first-child,
#wrapper > :first-child,
#salutation > :first-child {
  margin-top: 0; }

#top > :last-child,
.footer > :last-child,
#wrapper > :last-child,
#salutation > :last-child {
  margin-bottom: 0; }



/********************************************/
/************* =layout:  ***************/
/******************************************/


body{
   background-color: #353568;
        background-image: -webkit-gradient(linear, left top, left bottom, ffrom(#4c5c70 0%), to(#353568), color-stop(0.3, #353568));
        background-image: -moz-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -ms-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -o-linear-gradient(top, #4c5c70, #353568 30%, #353568);
        background-image: -webkit-linear-gradient(top, #353568, #353568 30%, #353568);
        background-image: linear-gradient(top, #4c5c70, #353568 30%, #353568); 
      
}


#wrapper{
  width:100%;
    min-width: 160px;
    max-width: 800px;
    margin: 0 auto;
}
body, .footer, nav, #contentwrap, #salutaion{
    width:100%;
    font:1.111rem; /*87.5%/1.5;*/
       /* font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;*/
    font-family:  "EgyptianText",georgia,serif; 

    /*Georgia, Times, serif;*/
    clear:both;

}
.whiteSpace
{
white-space:nowrap;
}

.floatleft { 
  float: right;
  margin: -25px  5px 0px 5px;
  border: 2px ridge #353568; /*#B6B6DA C9C9E3*/
}







#top > :first-child,
.footer > :first-child,
#wrapper > :first-child,
#salutation > :first-child {
  margin-top: 0; }

#top > :last-child,
.footer > :last-child,
#wrapper > :last-child,
#salutation > :last-child {
  margin-bottom: 0; }


/********************************************/
/************* =Mobile Nav:  ***************/
/******************************************/
@media screen and (max-width:640px) {
  #top {
    border-bottom: 1px solid; }

  #logo {
    position: relative;
    z-index: 1001; }

  #jump {
    border: 1px solid;
    border-width: 0 0 1px 2px;
    cursor: pointer;
    display: block;
    padding: 0;
    height: 36px;
    width: 36px;
    text-indent: -999em;
    position: absolute;
    right: 0;
    top: 1px;
    z-index: 1001; }

#jump {
    background: black url(i/nav.png)  no-repeat;
    background-position: 50% 50%;
    background-size: 75% 75%;
    border-color: #e1e1e1; }


  body:not(:target) #nav {
    outline: 0;
    margin: 0;
    padding-top: 39px;
    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: 2em;  /* height of nav */
        height: 2em;
        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; 
        } 
          #contact {
          margin-right: -0.1px;
        }
/*******navigation for dropdown on mobile screen     ********/
        #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(#4c5c70 0%), to(#353568), 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: #e1e1e1;}





  }





  






/********************************************/
/***************** =Tablet:  ***************/
/******************************************/

@media only screen and (min-width : 641px) and (max-width : 767px) {

  .price_block {width: 48%;}
  .price_block:nth-child(odd) {
    border-right: 5px solid white;
  }
  .price_block:nth-child(even) {
    border-left: 5px solid white;
  }
  .price_block:nth-child(3) {clear: both;}
  .price_block:nth-child(odd):hover {
    border: 0 none;}
 
#nav {
    position: absolute;
    top: 4px;
    right: 0px;
   text-align: center;
}
#nav li{
    width: 90px; display: inline-block;

      }
#nav li a {
     background: none;
     font-size: 1.111rem;
     padding:  4px 0px 4px 0px;
   border:hidden;
     line-height: 1.2;
}#nav a:hover, #nav a:focus {
        border-radius: 0 0 20px 20px;
        }

/*
#nav li a:hover, #nav li a:focus {
      border: 1px #e1e1e1;
    }*/

#nav li.back {
    display: none;
    visibility: hidden
  }
  #nav li#back{
    display: none;        
  }
    
  #jump,
  #back {
  display: none; }



.firstSub{
  display:none;
  visibility:"hidden" 
}



}


    
/********************************************/
/***************** =Wide screen:  ***************/
/******************************************/

@media only screen and (min-width : 768px){


 .price_block {width: 48%;}
  .price_block:nth-child(odd) {
    border-right: 5px solid white;
  }
  .price_block:nth-child(even) {
    border-left: 5px solid white;
  }
  .price_block:nth-child(3) {clear: both;}
  .price_block:nth-child(odd):hover {
    border: 0 none;}
 
#nav {
    position: absolute;
    top: 4px;
    right: 0px;
   text-align: center;   
  }
#nav li{
    width: 90px; display: inline-block;
}
#nav li a {
    background: none;
    font-size: 1.111rem;
    border:hidden;
    line-height: 1.2;
    padding:  4px 0px 4px 0px;
}

#nav li.back {
    display: none;
    visibility: hidden
  }
  #nav li#back{
    display: none;        
  }
    
  #jump,
  #back {
  display: none; }
}
#nav a:hover, #nav a:focus {
        border-radius: 0 0 20px 20px;
        }
 }








Any pointers would be greatly appreciated :)/>/>
Cheers

Is This A Good Question/Topic? 0
  • +

Replies To: Help needed with navigation

#2 UnknownCoder  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 135
  • Joined: 22-February 09

Re: Help needed with navigation

Posted 08 June 2013 - 05:31 AM

First off, add this to #wrapper in your css file:

position: relative;


For the little movement you get, it's because it's adding a border around the item therefore adding 2px to the height.

Hope this helps you.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1