CODEWITHSUNDEEP
css
user2864778
user2864778

Reputation: 333

Menu with buttons on left and right

I know this is a pretty stupid question, but I'm struggling to get this working and no success so far. I made a CSS menu using one online website that generate it for free. So the first challenge was to put some icons before each option, this one I got success. But now, I want to put some buttons on the right side. Let-me show you the css code for the menu:

@charset 'UTF-8';
/* Starter CSS for Flyout Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li #cssmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-family: Helvetica;
  line-height: 1;
}
#cssmenu {
  width: auto;
}
#cssmenu ul {
  zoom: 1;
  background: #547a65 url(/img/pattern.png) top left repeat;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #354d3f;
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu a,
#cssmenu a:link,
#cssmenu a:visited {
  padding: 15px 20px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 -1px 1px #161f1a;
  border-right: 1px solid #354d3f;
}
#cssmenu a:hover {
  color: #161f1a;
  text-shadow: 0 1px 1px #69987e;
}
#cssmenu li {
  float: left;
  border-right: 1px solid #5e8972;
}
#cssmenu li:hover {
  background: #4a6b58 url(/img/pattern.png) top left repeat;
}
#cssmenu li:first-child {
  border-left: none;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

#cssmenu li#homeicon a{
    background: url(/img/home.png) no-repeat;
    background-position: left;
}

#cssmenu li#cardicon a{
    background: url(/img/card.png) no-repeat;
    background-position: left;
}

#cssmenu li#billingicon a{
    background: url(/img/billing.png) no-repeat;
    background-position: left;
}

#cssmenu li#ticketicon a{
    background: url(/img/tickets.png) no-repeat;
    background-position: left;
}

Ok, as you can see, the last 4 ID selectors is to put an icon before the button's text. But all the buttons are on left side. I want to make some buttons like: LogOut, User Settings on the right corner. The HTML to make the menu is:

<html>
<head>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body id="home">
<div id='cssmenu'>
<ul>
   <li id="homeicon" class='active'><a href='index.html'><span>Home</span></a></li>
   <li id="cardicon"><a href='#'><span>Information</span></a></li>
   <li id="billingicon"><a href='#'><span>Billing</span></a></li>
   <li id="ticketicon" class='last'><a href='#'><span>Tickets</span></a></li>
</ul>
</div>
</body>
</html>

I'm pretty beginner in this language, so I'm sorry for the silly question. Thank you!

Upvotes: 0

Views: 1157

Answers (2)

Jon P
Jon P

Reputation: 19772

If you want to avoid classes you can use the nth-last-child selector: http://css-tricks.com/almanac/selectors/n/nth-last-child/ and float right

#cssmenu ul :nth-last-child(-n+2)  {float:right;}

Demo

Better Demo With Border Fixes

If you're using ID's you could also use those to float right.

Upvotes: 1

b_uk_happy
b_uk_happy

Reputation: 478

Give the right items a class and float them right. For example see this fiddle: http://jsfiddle.net/8Ena2/

#cssmenu ul li.right {float:right;}

Upvotes: 0

Related Questions