4 Replies - 680 Views - Last Post: 06 June 2013 - 12:45 PM

#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 pt 2

Posted 31 May 2013 - 12:04 PM

Hi guys
Okay I found the errors in the previous post
now my lates thing is how to align the contact and back to top icons when
media screen is in full laptop view

Currently when you make screen larger the icons move across the page, I want them to say on the body, but cant figure out how.

Again any pointers greatly recieved,
I noticed 23 people looked at my post but none commented
If Im doing something stupid as to why you didnt respond please let me know
maybe my code was too long, or question wasnt direct enough
Please let me know if Im asking for too much
Many thanks
Elli

so here is 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 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="wrapper" >
		

<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>



and 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: #FFFF7F;
      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;
}




/********************************************/
/***************** =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:  ***************/
/******************************************/
#contentwrap{
    margin-left:-1px;
    margin-right:-1px;
    border-bottom:  1px solid #e1e1e1;  
    background: #D6D6EA;
    box-shadow: inset 0px 0px 79px 12px #ABABAB;
-webkit-box-shadow: inset 0px 0px 79px 12px #ABABAB;
-moz-box-shadow: inset 0px 0px 79px 12px #ABABAB;
-o-box-shadow: inset 0px 0px 79px 12px #ABABAB;
 /* #B7D9CD */   
}


#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;
}



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



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

nav ul {
    margin-bottom: 0;
     }
nav a {
display: block;
}
/* nav is for the bottom navigation*/



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); 
      }


/********************************************/
/************* =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; }




/********************************************/
/************* =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;}
nav a {
  background: #1c1c1c url(i/arrow.png) 98% 50% no-repeat;
   }
}







/********************************************/
/***************** =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:  2px 0px 4px 0px;
     border:hidden;
     line-height: 1.2;
           

}  
#nav a:hover, #nav a:focus {
        border-radius: 0 0 20px 20px;
        border-left:2px solid #e1e1e1;
        border-bottom:2px solid #e1e1e1;
        border-right:2px solid #e1e1e1;
        }

/*
#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" 
}


  #contact {
    position: absolute;
    bottom: 2em;
    right: 1em;
    z-index: 1; }
    #contact li {
      display: block;
      margin: 0;
      padding: 0; }
    #contact a {
      border: 0;
      line-height: 10px;
      padding: .5em; }
      #contact a:before {
        display: inline-block;
        margin-right: .25em;
        position: relative; }
      #contact a.tel:before {
        content: url(i/phone.png);
        top: 5px; }
      #contact a.directions:before {
        content: url(i/direx.png);
        top: 7px; }
      #contact a.email:before {
        content: url(i/contact.png);
        margin-right: .4em;
        top: 2px; 
      
    }
  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-radius:  20px;
        
     }
#contact a{
    padding:10px ;
}
}




/********************************************/
/***************** =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:  2px 0px 4px 0px;
}

#nav a:hover, #nav a:focus {
        border-radius: 0 0 20px 20px;
        border-left:2px solid #e1e1e1;
        border-bottom:2px solid #e1e1e1;
        border-right:2px solid #e1e1e1;
        }
#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;
        }



  #contact {
    position: absolute;
    bottom: 2em;
    right: 1em;
    z-index: 1; }
    #contact li {
      display: block;
      margin: 0;
      padding: 0; }
    #contact a {
      border: 0;
      line-height: 10px;
      padding: .5em; }
      #contact a:before {
        display: inline-block;
        margin-right: .25em;
        position: relative; }
      #contact a.tel:before {
        content: url(i/phone.png);
        top: 5px; }
      #contact a.directions:before {
        content: url(i/direx.png);
        top: 7px; }
      #contact a.email:before {
        content: url(i/contact.png);
        margin-right: .4em;
        top: 2px; 
      
    }
  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-radius:  20px;
        
     }
#contact a{
    float: right; ;

}
      }





This post has been edited by ellishnoo: 31 May 2013 - 12:05 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Help needed with navigation pt 2

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3486
  • View blog
  • Posts: 10,055
  • Joined: 08-June 10

Re: Help needed with navigation pt 2

Posted 31 May 2013 - 12:15 PM

View Postellishnoo, on 31 May 2013 - 09:04 PM, said:

I noticed 23 people looked at my post but none commented

It may be the sheer amount of code that scared most people away. personally, I won’t try to look for a single error in 700 lines of code without as much as a pointer.
Was This Post Helpful? 2
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3227
  • View blog
  • Posts: 10,839
  • Joined: 12-December 12

Re: Help needed with navigation pt 2

Posted 31 May 2013 - 12:19 PM

There are a few errors in your css: 1initial (I'm guessing this is wrong?), rem, "hidden" (which should not be quoted). The HTML and CSS validators are linked in my signature. I would fix these first.

I agree with Dormilich though. Once you've fixed the errors you then might come back with a more specific question.
Was This Post Helpful? 1
  • +
  • -

#4 ellishnoo  Icon User is offline

  • New D.I.C Head

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

Re: Help needed with navigation pt 2

Posted 31 May 2013 - 01:47 PM

Thank you so much Andrewsw and Dormilich for your response

and for pointing out the length of code is too long...
I will be more specific next time :)
and selective with the code and question :)

And thanks Andrewsw for your pointers about the css code errors and validators linked in signature


Many many thanks you guys
ELli :)
Was This Post Helpful? 1
  • +
  • -

#5 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 333
  • Joined: 10-November 09

Re: Help needed with navigation pt 2

Posted 06 June 2013 - 12:45 PM

Did they solve your problem? I was going to take a look, but saw your reply.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1