Choose from our various pricing plans. There is a package for everyone!


how i make Navbar like this

View previous topic View next topic Go down

how i make Navbar like this

Post by tommycoo on Mon Aug 27, 2012 12:28 pm

how can i make navbar like this
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Re: how i make Navbar like this

Post by Eclipse on Mon Aug 27, 2012 2:56 pm

I already told you, it simple CSS and HTML




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Re: how i make Navbar like this

Post by Mati™ on Mon Aug 27, 2012 6:24 pm

Here to get you start...

The (x)HTML List:
Code:
<div id="nav">
  <ul>
   <li><a href="#">Forum</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Mailbox</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Sign Out</a></li>
        <li><a href="#">Sign In</a></li>
        <li><a href="#">Create Account</a></li>
      </ul>
  </div>

The CSS:
Code:
#nav {
    font-family: Tahoma,'Trebuchet MS',Arial,Sans-Serif;
    font-size: 13px;
    background: none repeat scroll 0 0 #6D84B4;
    border: 1px solid #3B5998;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
#nav ul {
    height: 34px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
    margin-right: 10px;
    margin-top: 4px;
}
#nav li a {
    border-bottom: 0 none;
    color: #FFFFFF;
    display: block;
    padding: 4px 10px 3px;
    text-decoration: none;
}
#nav li a:hover {
    color: #FFFFFF;
}

Try it yourself...

Code:
<!DOCTYPE html>
<html>
<head>

<style type="text/css">
/* Container */
div#container {
    margin: 150px auto;
    width: 940px;
}

#nav {
    font-family: Tahoma,'Trebuchet MS',Arial,Sans-Serif;
    font-size: 13px;
    background: none repeat scroll 0 0 #6D84B4;
    border: 1px solid #3B5998;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
#nav ul {
    height: 34px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
    margin-right: 10px;
    margin-top: 4px;
}
#nav li a {
    border-bottom: 0 none;
    color: #FFFFFF;
    display: block;
    padding: 4px 10px 3px;
    text-decoration: none;
}
#nav li a:hover {
    color: #FFFFFF;
}
</style>

</head>
<body>
<div id="container">
<div id="nav">
  <ul>
   <li><a href="#">Forum</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Mailbox</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Sign Out</a></li>
        <li><a href="#">Sign In</a></li>
        <li><a href="#">Create Account</a></li>
      </ul>
  </div>
</div>
</body>
</html>
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: how i make Navbar like this

Post by Mati™ on Mon Jan 14, 2013 3:24 pm

User inactive and seems not to need help. Closed.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Re: how i make Navbar like this

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum