Trying to get ul and li to perform a certain way

+2 Jacob Beck · March 8, 2015
So I am trying to make a nav bar that has 1 item on the left edge and the rest on the right edge

<!------------ Extra Menu ------------>
<nav class="extra_menu">
<ul class="horizontal_style">
<li><p>Cyber Interactive Studios</p><li>
<li class=""><a href="#">Forums</a><li> <li>|</li> 
<li><a href="#">Create Profile</a><li> <li>|</li>
<li><a href="#">Blog</a><li> <li>|</li>
<li><a href="#"></a><li> 

.extra_menu {
position: relative;
width: 100%;
border-bottom: 1px solid #009cff;
background: url(../img/menu_box.png);

.extra_menu ul {
display: inline-block;
list-style: none;
margin: 0px;
overflow: hidden;

.extra_menu li {
font: 16px "Times New Roman", Times, serif;
display: inline-block;
padding: 0px;
margin: 0px;
list-style: none;

I can make the lists appear as a table, but with my navs being relative it cause gaps and i would then have to set  padding's and margins and it would throw off my px settings and cause problems for mobile browsers.

I can use float right but then my list becomes 0px from the top. I can then set a padding-top property to all the elements at the top.

 I just feel there is a better way of going about this, but cannot find the info.

Any one else have an idea.

Post a Reply


Oldest  Newest  Rating
0 Jacob Beck · March 8, 2015
Dude that looks nice. I have Boostrap. I haven't used it yet because it interferes with my code. I pan to re write my code for mobile devices once I finish my website. In the process though try to make it as mobile friendly as possible before hand.
+1 Roman Smirnov · March 8, 2015
Look at my website
This is the code for the navbar

All the CSS for it is in the Bootstrap 3 framework. 
+1 Jacob Beck · March 8, 2015
never mind, I got the table working. I forgot to make padding and margin 0px on the table class and now no gaps from the table.
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.