I'm attempting to create a horizontal navigation bar in CSS. I'm using the CSS from this page and it seems to be working fine:
http://css.maxdesign.com.au/listamatic/horizontal27.htm
...but if you hover over any of the links in the example, theres a small gap on the left side of each element just before the vertical white bar. I'm having the same problem with my nav bar. Is there a way to remove this space? Or is there a better way to create a centered horizontal nav bar?
Thank you!
<ul id="navlist">
<li id="active"><a id="current" href="#">Item one</a></li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li>
</ul>
Remove all new lines between <li> elements. The new line in the code is interpreted as a space, that's the problem, it's not styling.
also you can add style:
#navcontainer ul li a {
margin-left:-3px;
}
Related
I'm using twitter-bootstrap for a menu and can't seem to figure out what's up with the message counter span I'm trying to get to float to the right – seems to work in Chrome (bottom) but shoots it down to a new line in FF (top). If I reduce width of the span to 0, it stays on same line, but then is off the edge of the menu.
Any suggestions would be much appreciated!
Here's the code: http://codepen.io/anon/pen/lGeJz
<ul class="dropdown-menu">
<li>Dashboard</li>
<li>Messages<span class="counter">(306)</span></li>
<li>Account</li>
<li>Logout</li>
</ul>
CSS: .counter {float: right;}
^^ this is what's happening in the actual page – trying to get counter right aligned...
Remove the float:right;.
You could create the following css class:
.dropdown-menu span.counter {
position:relative;
}
etc.
If you were to align the text left, and the counter right.. I would create two inline div's and float one left, and the other right.
I am using twitter bootstrap 2.3, I need the menu to be aligned to the right and also need the anchor to have a diferent widt, depending on the size of the world inside the anchor.
With next code, it's working, I leave empty columns with offset class, but not sure it there is a better to achieve the same result with another technique.
What I don't know how to do it is get the same "empty space separation" between each li, each li having a different width.
<div class="row_fluid">
<ul class="menu_logged span7 offset5">
<li class="span1 offset6"><a>Test</a></li>
<li class="span1"><a>Medium phrase</a></li>
<li class="span1">123</li>
<li class="span1">Hello World</li>
<li class="span2">Back</li>
</ul>
</div>
Any help?
Thank you
I have the basics of my navigation menu set up by floating three divs left within a #nav div that is centered using margin:auto;.
Only one of these nav menu options requires a drop down menu. I'm assuming that I'd have to bring the drop down menu out of normal flow so that it doesn't move the other floated objects.
This is my first project so I'm just trying to conceptually wrap my head around how to position this menu. I'm afraid that if I do a position relative with pixel values the menu might not show up under the original link depending on the user's screen size/resolution.
The red X marks the location of where the drop-down should appear.
Should this un-ordered be nested under the portfolio list item, or should it be a separate un-ordered list that is somehow positioned under the portfolio link? I'm afraid that if it's nested it might knock the bottom-border down with it?
I can post code, but I'm sort of at a loss on where to begin here. Looking for a push in the right direction!
Thanks
This is generally done this way:
<ul class=menu id=leftLinks>
<li>about</li>
<li>portfolio
<ul class=submenu>
<li>Submenu item</li>
</ul>
</li>
</ul>
.menu > li {
position: relative;
}
.submenu {
position: absolute;
left: 0;
top: 100%;
}
I am unable to get :hover to function on my footer links. Does this have to do with z-index?
Thank you!
URL: http://bonusest.com/clients/republican_committee/
The problem is that your main div with id page-wrap is ontop (overlapping) of your footer so the links in the footer cannot be clicked.
Seems the .links and .contact divs don't contain any actual links - you need to wrap them in anchor tags like in your main navigation.
As for the .social div, this should work:
<h4>Find Us</h4>
<ul>
<li id="facebook">facebook</li>
<li id="twitter">twitter</li>
<li id="picassa">picassa</li>
</ul>
You'll want to keep the text-indent:-9999px to hide the text. To add a hover state, simply target #facebook:hover
I have organized a menu. Its HTML is as follows:
<ul class="topmenu">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<ul>
This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;.
It's css is:
.topmenu {
list-style:none;
margin:0;
padding:0;
}
.topmenu li {
float:left;
}
This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left.
I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease.
Any one know of any solution?
Here is the solution without using width:)
display: inline is supported fine by all versions of IE. It's inline-block that isn't supported completely in IE 6 and 7 (source).
This should be solvable by simply switching to display: inline.