MVC How make a logout button


Tags: html,css,asp.net-mvc-4

Problem :

First CSS isnt my strong skill. Im following this example to create my menu bar

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active

First I try put it on jsFiddle but doesnt look the same

I can make the green selected change when user select different button. Can change between Login and Username when user is authenticated.

In my View I change it to something like:

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#Login">Login</a></li>
  <li> <a href="#Logout" style="color: red">Welcome Administrator Logout</a> </li>
</ul>

But doesnt stay on same line and doesnt look to good. Any suggestion on how improve my UI? Make it stay on same line or change the approach?

enter image description here

Current CSS:

<style>
body {
  background-color: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>


Solution :

I improve the style using a door image.

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li style="float:right"><a href="#about">Login 
      <img src="http://i66.tinypic.com/25oxgxz.jpg" border="0"></a></li>
  <li style="float:right"><a href="#Logout" style="color: red">Welcome Administrator
      <img src="http://i64.tinypic.com/157n953.png" border="0"></a></li>
</ul>

JSFiddle

enter image description here


    CSS Howto..

    How to change the background image of input button with jquery

    How to use external css file to style a javafx application

    How to dynamically allocate block of text using css?

    CSS Background Color Not Showing

    How to make empty div one line height using CSS?

    How to add a style only to certain elements of a list via CSS

    How to create the + button with CSS?

    CSS: How do I assign one class to multiple elements?

    How can I set the body color of a web page to the current width and height of the monitor?

    How to fit HTML table row to its content

    How do I inspect CSS pseudo classes with firebug?

    How to hide a
    item with CSS?

    can't find out how to create a css selector for yahoo stocks page

    How to check if svg element supports css transform

    How can I append the images from this JSON file properly into the correct divs

    How can I request a CSS attribut in HtmlUnit?

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    How can add atribute to css of page on page load event

    JavaFX editable tableview: How to change size and css of the TextField inside of TableCell?

    How to make CSS flex properties compatible with older browsers?

    How to adjust navbar to a fixed width in Twitter Bootstrap?

    Codeigniter--add “active” css class to link, how to?

    How can I create a CSS arrow, which scales to the size of the containing div?

    How to measure the amount of time an animation took place using JavaScript

    How to reflow DIV boxes in CSS to stick to bottom right?

    How to style LI to show quotes in a ticker

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How do I make my links appear as images, and have them change with hover and so on?

    Chrome Developer Tools: How to find out what is overriding a CSS rule?