Nathaniel Mafemba's Profile

About

 
Points: 3

Contact

 

Drop files in here
or click to pick manually
Nathaniel Mafemba
August 24, 2015 · Public

I am new to web development and working on a small project to bolster my understanding of HTML and CSS that i have learnt. I have been trying to push my unordered menu list to the right and have failed to do so, below is my code, can anyone help please:



Seller
Buyer
Log in
Sign up



body{
width: 100%;
height: 100%;
background-size: cover;
display:-webkit-box;
-webkit-box-pack:center;
}

.big_wrapper{
width:1100px;
}

header{
border-bottom:2px solid blue;
margin:0;
padding:2px;

}

header>ul>li{
display:inline-block;
padding:0 5px;
}

header>ul>li>a{
text-decoration:none;
}

Nathaniel Mafemba
August 23, 2015 · Public

This is the code that is not working for me, i don't know what i have missed, the login system is not working:

HTML







Choose a Country
Botswana
Lesotho
Namibia
South Africa
Swaziland
Zambia
Zimbabwe


List your Business
Post your Advert
Sign up


Log in ▼








Forgot Your Password?


Keep me signed in


Create New Account











CSS

#header{
color:#2c2c2c;
font-size:14px;
}

#header nav ul li{
padding:8px 12px 8px 8px;
display:inline-block;
white-space:nowrap;
}

li{
background:none;
}

a:visited{
color:#1f1f1f;
}

a{
text-decoration:none;
}

a:-webkit-any-link{
cursor:auto;
}

#header nav{
text-align:right;
}

@media(max-width:767px;)

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

fieldset {
margin: 0;
padding: 0;
border: 0;
}

input:focus,textarea:focus {
outline: none;
}

body {
font-family: Arial, Helvetica, sans-serif;
color: #444;
background-color: #eee");
margin: 0;
font-size: 12px;
}

/*----------------------*/

.cf:before, .cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}

.cf {
zoom:1;
}

/*----------------------*/

header {
padding: 8px 10%;
border-bottom: 1px solid #444;
background-color: #444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(top, #444, #111);
background-image: -moz-linear-gradient(top, #444, #111);
background-image: -ms-linear-gradient(top, #444, #111);
background-image: -o-linear-gradient(top, #444, #111);
background-image: linear-gradient(top, #444, #111);
-moz-box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
-webkit-box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
}

/*----------------------*/

nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #000;
border-bottom: 1px solid #444;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

nav li {
float: left;
}

nav #login {
border-right: 1px solid #444;
-moz-box-shadow: 1px 0 0 #222;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
}

nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #d79800;
text-shadow: 0 1px 0 #444;
}

nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}

nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
background: #222;
color: #efefef;
}

nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #444, #000);
background-image: -moz-linear-gradient(top, #444, #000);
background-image: -ms-linear-gradient(top, #444, #000);
background-image: -o-linear-gradient(top, #444, #000);
background-image: linear-gradient(top, #444, #000);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}

nav li #login-content {
right: 0;
width: 250px;
}

/*--------------------*/

#inputs input {
background: #efefef;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #222222;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #efefef inset;
-webkit-box-shadow: 0 1px 1px #efefef inset;
box-shadow: 0 1px 1px #efefef inset;
}

#inputs input:focus {
background-color: #fff;
border-color: #bf4c24;
outline: none;
-moz-box-shadow: 0 0 0 1px #efefef inset;
-webkit-box-shadow: 0 0 0 1px #efefef inset;
box-shadow: 0 0 0 1px #efefef inset;
}

/*--------------------*/

#login #actions {
margin: 10px 0 0 0;
}

#login #submit {
background-color: #bf4c24;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d46a15), to(#bf4c24));
background-image: -webkit-linear-gradient(top, #d46a15, #bf4c24);
background-image: -moz-linear-gradient(top, #d46a15, #bf4c24);
background-image: -ms-linear-gradient(top, #d46a15, #bf4c24);
background-image: -o-linear-gradient(top, #d46a15, #bf4c24);
background-image: linear-gradient(top, #d46a15, #bf4c24);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #222222;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #efefef;
}

#login #submit:hover,
#login #submit:focus {
background-color: #d79800;
background-image: -webkit-gradient(linear, left top, left bottom, from(#bf4c24), to(#d46a15));
background-image: -webkit-linear-gradient(top, #bf4c24, #d46a15);
background-image: -moz-linear-gradient(top, #bf4c24, #d46a15);
background-image: -ms-linear-gradient(top, #bf4c24, #d46a15);
background-image: -o-linear-gradient(top, #bf4c24, #d46a15);
background-image: linear-gradient(top, #bf4c24, #d46a15);
}

#login #submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#login #submit::-moz-focus-inner {
border: none;
}

#login label {
float: right;
line-height: 30px;
}

#login label input {
position: relative;
top: 2px;
right: 2px;
}

Javascript

$(document).ready(function(){
$('#login-trigger').click(function() {
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');

if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});