css menu

[willem008]

goede dag

Ik heb op mijn webwinkel een balk als menu, er staan nu drie knoppen links gefloat
nu wil ik er een aan toevoegen maar die wil ik rechts hebben (dus float right)

Hoe kan ik dat het beste aanpakken, kan je een <li> ook een class meegeven

http://service-netwerk.com

ik heb nu dit

html
<ul id="menuhorizon">
<li><a href="http://service-netwerk.com"><strong>Home</strong></a></li>
<li><a href="http://wlvdmeer.blogspot.nl" target="_blank" title="wl.v.d.meer blog"><strong>WebBlog</strong></a></li>
<li><a href="linkpartners.php"><strong>Linkpartners</strong></a></li>

<li><a href="#">Deze moet rechts</a></li>
</ul>

css

#menuhorizon {
list-style:none;
width:910px;
margin:10px auto 0px auto;
height:28px;
padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Background color and gradients */

background: #14285f;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}

#menuhorizon li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:1px;
border:none;
}

#menuhorizon li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menuhorizon li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}

#menuhorizon li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menuhorizon li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menuhorizon li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}

 

[royduin]

<ul id="menuhorizon">
<li><a href="http://service-netwerk.com"><strong>Home</strong></a></li>
<li><a href="http://wlvdmeer.blogspot.nl" target="_blank" title="wl.v.d.meer blog"><strong>WebBlog</strong></a></li>
<li><a href="linkpartners.php"><strong>Linkpartners</strong></a></li>

<li class="rechts"><a href="#">Deze moet rechts</a></li>
</ul>

En dan in de CSS toevoegen:

.rechts {
float: right;
}

 

[csshunter]

Ja, dat werkt feilloos.
Om de rechterknop niet te ver van de zijkant af te krijgen, kan je nog de normale {margin-right: 30px;} van de list-items weghalen:

.rechts {
    float: right;
    margin-right: 0;
    }

Wil je er méér aan de rechterkant, dan kan je een {margin-left: 30px;} toevoegen; dan zitten ze op dezelfde afstand van elkaar als de knoppen aan de linkerkant.

Met vriendelijke groet,
CSShunter