0

Hello,

I am trying to style the admin navigation: Navigation Admin Backend

How to create such navigation admin style? The box is seperated for each item. So far I only know how to create a one-long-bar navigation style.

Please help. Thanks in advance.

4
Contributors
3
Replies
27
Views
4 Years
Discussion Span
Last Post by Nmalik1
0

If you apply a style of display:inline-block, set the width and add a margin-right or margin-left to the hyperlink tags this should do it.

Edited by paulkd: plural for tag

0

There's a few ways to create that "gap". You can also apply padding on the <li> elements. For example..notice padding-right: 10px on the ul#nav li selector below.

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
ul#nav {
list-style:none;
position:relative
}

ul#nav li {
display:inline;
float:left;
position:relative;
padding-right: 10px;
}

ul#nav a {
text-decoration:none;
padding:10px 0px;
width:100px;
background:#ff0000;
color:#ffffff;
float:left;
text-align:center;
border:1px solid #ababab;
}

ul#nav a:hover {
background:#ababab;
color:#ff0000;
}
</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>
</body>
</html>

7f47dd2f33d1a083a5733816ed0bd723

0

Jorge has show a simple coding try it you will make it, if you face any proble let us know. Daniweb community will help you.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.