This is my first time posting a question here.
I am working with twitter bootstrap on a website design. I have to create the navigation menu such that the items listed there will be separated with pipeline. I have found another similar question here - Add a pipe separator after items in an unordered list unless that item is the last on a line and I used that, but the items are not separated as they are supposed to.
What I need to get: http://prntscr.com/4br2lb
After implementing the code from the post I found here I get this: http://prntscr.com/4br2yj
Here is my code:
HTML:
<div class="navbar navbar-default navbar-static-top header-menu">
<div class="collapse navbar-collapse navHeaderMenuCollapse">
<ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;">
<li>HOME</li>
<li>AUTO</li>
<li>LIFE</li>
<li>HEALTH</li>
<li>BUSINESS</li>
<li>MORE...</li>
</ul>
</div>
</div>
CSS:
ul li {
float: left; }
ul li:after {
content: "|"; padding: 0 .5em; }
Thank you in advance!
Why not use a border for each li except the last instead? E.g:
Demo Fiddle
ul li:not(:last-child) {
border-right:1px solid grey;
margin-right:20px;
padding-right:20px;
}
Otherwise, you will likely need to add positioning to your :after psuedo elements or change the display to inline-block - though its hard to say without being able to replicate your issue with the provided code.
switching the a tags to inline blocks fixed it
div.navbar a {
display: inline-block;
}
ul li:after {
content: "|";
}
ul li:last-child:after {
content: "";
}
jsfiddle demo
Related
As ul doesn't support a list with a dash, I create a class dash that deletes list-style and inserts an en-dash in front as follows.
<style>
ul.dash{list-style:none}
ul.dash>li:before{content:"\2013"}
</style>
And I write the following code.
<ul><li>This is a sentence.</li></ul>
<ul class="dash"><li>This is a sentence.</li></ul>
<ul style="list-style:circle"><li>This is a sentence.</li></ul>
<ul style="list-style:square"><li>This is a sentence.</li></ul>
Here I'd like to exactly align these four lists. All but the second are fine as native. I tried to micromanage the padding and margin settings but couldn't find the default numbers. Thanks.
I don't think(best of my knowledge) there is any way to set it perfect align. but here i try to set it with position:absolute; you can check below fiddle...
ul.dash{list-style:none;}
ul.dash>li:before{content:"\2013";margin-right: 10px;}
ul {
position: relative;
float: left;
width: 100%;
}
li {
position: absolute;
}
.dash li {
left: 23px;
}
<ul><li>This is a sentence.</li></ul>
<ul class="dash"><li>This is a sentence.</li></ul>
<ul style="list-style:circle"><li>This is a sentence.</li></ul>
<ul style="list-style:square"><li>This is a sentence.</li></ul>
and also you can do it by set every bullets in ul.dash>li:before.
Thanks!
Here is my code: http://jsfiddle.net/DFN5y/
As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
</ul>
<ul id="nav" style="float:right;">
<li>Sign up</li>
<li>Login</li>
</ul>
You could set them inline by making ul as inline-block element
ul {
display: inline-block;
}
but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
<li class="right">Sign up</li>
<li class="right">Login</li>
</ul>
#nav li {
display: inline-block;
padding-left: 40px;
}
.right{
float: right;
}
or you could float them without class e.g.
#nav li:nth-child(3),
#nav li:nth-child(4) {
float: right;
}
or even simpler by moving just third element e.g.
#nav li:nth-child(n+3) {
float: right;
}
FIDDLE
your #nav is having 100% width and does not have float, thats why its taking complete space till right edge.
#nav {
float: left;
padding-left: 100px;
}
Fiddle
Try:
ul li {
display: block;
float:left;
padding-left: 40px;
}
Just add this to your CSS :
ul{ display : inline-block;}
And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.
Have a look at this fiddle.
Basically i have changed the original in 4 ways:
replaced the id nav, which had been issued twice, by a class of the same name
distinguished between the first and the second nav-ul in css formatting
moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
all nav-ul being displayed as inline-block to assue verticla alignment.
You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.
http://jsfiddle.net/DFN5y/17/
ul li:nth-child(3){
padding-left: 20%;
background: red;
}
I want a css hover effect to last on all sections of a particular list item but it seems like there is added margins on the bottom and left and right of the list item that I can't seem to get rid off. I know this is probably a pretty basic css question but I have a JSFiddle here: http://jsfiddle.net/y2497/
I was using bootstrap to get my base css but I don't think that is affecting it.
My Code is:
#navbar {
padding-bottom: 0px;
margin-bottom: 0px;
}
#nav_container li {
list-style-type: none;
display: inline-block;
margin: 0px 20px 0px 20px;
}
#nav_container li:hover {
background: #333;
}
#nav_container li a {
display: inline-block;
color: #00;
padding: 10px;
}
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="nav_container">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
You are using inline-block on your li tags. What you need to do is apply float:left; and display:block; . Then apply a clearfix to the UL. Inline-block treats elements similar to how text is handled and includes line-height and spaces.
I have a nav ul li:after definition in a css like:
nav ul:not(.first) li:after {
margin-left: 10px;
content: '';
color: #bbb;
}
But to get rid of the not(.first), because it is affecting other "nav" in the page...
I want to apply the properties to a specific nav ul, li:after, the others nav are fine, only this I want to apply this style:
<nav>
<ul>
<li id="all">All</li>
<li id="web">WEB</li>
<li id="print">DesignD</li>
<li id="illustration">Illustration</li>
</ul>
</nav>
Is it possible? How to do it?
Normally I'd suggest using the style attribute but sadly I doesnt really work with :later.
So as already mentioned you will have to work a class or an id and then targeting it in css.
I'm pretty sure I know what your taking about, but forgive me if I'm wrong. You would like to apply those styles to just the first li?
In that case you should call out
nav ul:first-child li:after {
margin-left: 10px;
content: '';
color: #bbb;
}
I have a pagination output which is show within . An example is posted here: http://jsfiddle.net/6N4bD/1/
The ul is wrapped around 2 divs
1st div is 550 width
2nd div called "paginationDiv" basically wraps the ul around
The ul has list-style: none. What I am trying to do is make it float right, but it keeps appearing as a block. I have tried quite a few things but nothing seems to work. If I add a width to the paginationDiv then it works but it's not accurate because it will never be fixed width
Here is what it looks like:
<div class="parentDiv">
<div class="paginationDiv">
<ul id="paginationLinks">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
That's the html code
Here is the css:
div.parentDiv {
width: 550px;
}
div.paginationDiv {
float: right;
}
#paginationLinks ul {
border: 0;
padding: 0;
margin: 0;
}
#paginationLinks li {
list-style: none;
}
I have posted an example here: http://jsfiddle.net/6N4bD/1/
What seems to work is adding display: inline; to the li elements.
http://jsfiddle.net/XFdqT/ has a demo of this.
give float:left to #paginationLinks li and then see the result