Develop Reference

Increase/decrease DIV and PROGRESSBAR Value CSS/JS - positioning elements

I want to create simple donation option using CSS/JS and HTML.
I have this photo of how it supposed to look like:
Plus button should increase donation, while it's increasing, the progressbar should be changing too. Same with minus button with decreasing value.
I thought that it would be easier, but I have problems on the beginning,
The main problem for me is positioning elements, so I would apprecieate if someone give me instructions or send me to a good tutorial about positioning. I am total beginner.
Here's where I stuck for now:
var donate = parseInt(document.getElementById(donate_nr).innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
}
.col1{
float:left;
width: 10%;
margin: 10px 10px 10px 10px;
position:f
}
.col3{
float:right;
width:10%;
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div></div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div></div>
</div>

Instead of float you can use flex for the layout you can find a complete tutorial on mdn flexbox
var donate = parseInt(document.getElementById('donate_nr').innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 45px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.columnWrapper{
display:flex;
align-items:center;
}
.col1{
width: 10%;
padding:5px
}
.col2{
width:90%;
}
.col3{
width:10%;
padding:5px
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div>
</div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div>
</div>
</div>

You will need to create an extra div for the progress bar which has position: absolute within your divContainer, and you will need to give this a position: relative value to allow the child to be absolutely positioned within it. Then you can add a line of code to your JS functions to give the progress bar a percentage width whenever the donation amount changes.
<div class="divContainer">
<div id="donate_nr" class="donateValue">10</div>
<div class="progressBar"></div>
</div>
// CSS:
.divContainer {
position: relative;
// etc.
}
.progressBar {
position: absolute;
left: 0;
bottom: 0;
height: 20px;
background-color: red;
}
// JS:
// In both `increaseDonate()` and `decreaseDonate()`, call this at the end
// to set the width of the progress bar by percentage:
const progressBar = document.querySelector('.progressBar');
progressBar.style.width = `${donate / 750 * 100}%;`

Trying to implement a JQuery script (inexperimented)

I'm trying to implement a JQuery script to a php file, but so far it didn't work.
I'm very new to web programming (a couple weeks old) and this is my first real use of JQuery.
Here is part of what i want to do with this :
I'm trying to get the opacity of a span element gradually go from 1 to 0 for a login menu. The exact same thing as here.
And this is what i did : /** nevermind, not enough reputation for images **/
I have a some problems with this menu but my priority is to get that javascript to work. It is supposed to reduce the opacity to 0 of the icons in front of "username" and "password" (i'm just trying to have it work on password for now) but it doesn't.
This login form is part of my header.php and going to be all over the website.
Here are my codes (javascript / part of the css / part of my header.php) :
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
And so far when i load my page nothing happens regarding theses icons, while they are supposed to vanish the same way as in the exemple i linked (and i'm guessing the submit button wouldn't either so i didn't bother going farther).
So what did i miss here ?
Thank you ! Any help is appreciated, hope there is enough information and if not i will provide more.
-Apatik
edit1 : my whole script.js looks like this :
$(document).ready(function(){
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
})

You're attaching an action to an element with the class login:
$(".login").submit(function(){
....
But nothing in your html has that class
Also, based on your comment where you said it works here but not in your own website, you may well have forgotten to include jQuery library - its done automatically here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit: Your code is in an external file called script.js which is fine, but that code executes immediately. It needs to execute once the DOM has loaded, therefore change script.js to look like
$(function(){
// existing code here
});
That is a shortened version of
$(document).ready(function(){
// existing code here
});
Either way will ensure your code only executes after the DOM has loaded.

You have to put focusin/focusout events on inputs not on the parent.
$( "#mdp input" ).focusin(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
}).focusout(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>

you use $( "#mdp" ).focusin(function(){}); on the id #mdp but your input field has the id #txt_mdp.
Try this
$( "#txt_mdp" ).focusin(function(){ ... });
instead.

It is quite easy to solve your problem, and I suggest two ways:
Javascript
I have simplified your JS to make it work (if I deleted anything of other purposes, well, put that back). I added a class to the group that contains the icon and the input, and then bind on focus and blur events, like this:
$(".fadeicon input").focus(function() {
$(this).next().animate({opacity: 0})
}).blur(function() {
$(this).next().animate({opacity: 1})
});
I have used the standard focus and blur events on your input elements, and then select the next element to fade in or out. Your icons' HTML now look like this:
<div class="fadeicon">
<input type="text" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
The reason I added a class to the group is so you can easily select where you want this to take effect.
CSS
However, there is an even better way that rquires no javascript! It is a just css solution and it is two lines long:
.fadeicon input + span { opacity: 1; transition: opacity 400ms; }
.fadeicon input:focus + span { opacity: 0; }
Again, I used the fadeicon class to make it easily targeted, but as long as you can target them you can do this with CSS!
Examples
Here a jquery snippet:
$( ".fadeicon input" ).focus(function() {
$( this ).next().animate({opacity: 0})
}).blur(function() {
$( this ).next().animate({opacity: 1})
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant" class="fadeicon">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp" class="fadeicon">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
Heres the CSS snippet (example):
.fadeicon input + span {
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
opacity: 1;
}
.fadeicon input:focus + span { opacity: 0;}
<div class="fadeicon">
<input type="text">
<span>Fade me out</span>
</div>

css elements won't align right

I have this CSS:
#top-nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
text-align:right;
background: #eeeeee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width:100%;
}
#top-nav li {
float: left;
}
#top-nav #customer-login, #top-nav #reseller-login {
border-right: 1px solid #666666;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
#top-nav #reseller-login {
border-right: 1px solid #666666;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
#top-nav #customer-login-trigger, #top-nav #reseller-login-trigger {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #666666;
text-shadow: 0 1px 0 #fff;
}
#top-nav #customer-login-trigger, #top-nav #reseller-login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#top-nav #customer-login-trigger:hover, #top-nav #reseller-login-trigger:hover,
#top-nav #login .active {
background: #fff;
}
#top-nav #customer-login-content, #top-nav #reseller-login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
text-align:left;
z-index: 999;
background: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
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;
}
#top-nav li #customer-login-content, #top-nav li #reseller-login-content {
right: 0;
width: 250px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login #submit {
background-color: #d14545;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
background-image: -webkit-linear-gradient(top, #e97171, #d14545);
background-image: -moz-linear-gradient(top, #e97171, #d14545);
background-image: -ms-linear-gradient(top, #e97171, #d14545);
background-image: -o-linear-gradient(top, #e97171, #d14545);
background-image: linear-gradient(top, #e97171, #d14545);
-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 #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}
#login #submit:hover,
#login #submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
background-image: -webkit-linear-gradient(top, #d14545, #e97171);
background-image: -moz-linear-gradient(top, #d14545, #e97171);
background-image: -ms-linear-gradient(top, #d14545, #e97171);
background-image: -o-linear-gradient(top, #d14545, #e97171);
background-image: linear-gradient(top, #d14545, #e97171);
}
#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;
}
but i can't get the links to align right
here is a fiddle with the full code:
http://jsfiddle.net/F7Kdy/

EDIT: This works but reverses the order of the lis. Use Jay Harris' answer.
You just need to set your lis to float:right like so:
#top-nav li {
float: right;
}
Even if their parent ul is set to float: right, they need to be set that way as well.

Remove the float attribute, since you are aligning it by the parent. And make sure the elements are inline with display: inline-block.
Note: if you add float: right;, you will change the order of the listed elements. thus making everything backwards.
#top-nav li {
display: inline-block;
}
JSFIDDLE

Make the
#top-nav li {
float: right;
}
Updated fiddle

Navigation bar/menu not showing in customised colors with Safari (Correct colors in other browsers)

I've made a navigation bar/menu for my website, and I have customised the colors in the CSS. It works fine on IE, Chrome and Firefox. But when it comes to Safari, the navigation bar shows in its default colors! If anyone can help me with this, I would appreciate it greatly.
Internet Explorer, Firefox, Chrome:
http://tinypic.com/view.php?pic=2gtygrc&s=5
Safari:
http://i39.tinypic.com/2eltloi.png
The HTML:
<li>Hjem</li>
<li>Portfolio</li>
<li>Om</li>
<li>Andet</li>
<li>Kontakt</li>
The CSS:
nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
float:left;
}
nav a {
float:left;
padding: .8em 1.5em;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6;
background: #000000;
background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
background: -o-linear-gradient(#f5f5f5, #c1c1c1);
background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
background: linear-gradient(#484747, #2c2c2c);
}
nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #000000;
background: -moz-linear-gradient(#fac754, #f8ac00);
background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
background: -webkit-linear-gradient(#fac754, #f8ac00);
background: -o-linear-gradient(#f5f5f5, #f5f5f5);
background: -ms-linear-gradient(#f5f5f5, #ff0000);
background: linear-gradient(#e20000, #720000);
}
nav a:active {
-moz-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
box-shadow: 0 0 5px 5px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
nav li:last-child a {
border-right: 0;
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
}

nav ul {
margin: 80px 0 20px 0;
padding: 0em;
float: left;
list-style: none;
background: #1A1A1A;
background: rgba(26,26,26,.2);
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
box-shadow: 0 1px 0 rgba(26,26,26,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
You've got background twice once as hex the other as rgba, I think you only need one.

distinguish one page from other in html

I think the title is misleading..as i couldnt think of an appropiate title.
I have 4 webpages which i want to demo..
[page1] [page2] [page3] [page4]
What I want is.. on top of all my pages.. have like 4 of these "buttons" (or something else)
When I am on page 1..page 1 button is bold and rest of the three are light..
When I am on page 2.. page 2 button is bold and so on..
And that each of them link to each other.
Any suggestions

<style>
button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #123d54;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#afd9fa 0%,
#588fad);
background: -webkit-gradient(
linear, left top, left bottom,
from(#afd9fa),
to(#588fad));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
button.current {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#faafaf 0%,
#d11919);
background: -webkit-gradient(
linear, left top, left bottom,
from(#faafaf),
to(#d11919));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
</style>
<a href="/page1.html">
<button class="current">Demo Page 1</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 2</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 3</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 4</button>
</a>
copy the above at the top of each page you have, for the first page, the button class should be current, for the second one the second button should be current and so forth.
The buttons were generated CSS3 buttons for illustration purposes