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 avoid text selection in web page using css?

    How to center an unordered list?

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How to combine components in HTML header

    How can I set a css property to tags with specific attribute?

    How can I rotate(or change) background image using CSS and Javascript

    How to add -moz & -o prefixes to code containing only -webkit tags

    How to make images to go out of the div when width is over the max-width?

    How to fix and re-arrange fixed position divs

    How to get drop down menu sub lists to line up vertically

    How to get these timestamps, which come after in the html, to float right on the same line

    How to re-animate CSS3 animations on class change

    How do I stylize ::selection in IE8? [duplicate]

    How should i improve my jQuery click funciton?

    How to change class of all children with jquery?

    How to remove shadow from slider backround using Html/Css?

    How can I make a filter like this? [closed]

    How to get the min-height of the object when its parent is set to display none?

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to make my words not go under my picture in css

    How to make flexbox grid images responsive

    How to make the css asset follow a certain order in symfony2 projetcs

    How to create double, dotted underline for text in css

    How to change the value depend on css animation?

    How to arrange subchild in the horizontal menu

    How can i repeat the image rollover and have multiple aligned underneath on my website?

    how to show product info after image in bigger zoom levels

    how to improve this CSS layout which look like a table [closed]

    How do I override a (css) metaclass property using a GreaseMonkey script?

    How can I “hack” the Thunderbird Lightning extension to fully color categories