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!
Related
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
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;
}
A site I'm creating is showing the front page exactly as its supposed to do in both Chrome and Safari, but when I test in Firefox the menu isn't showed correctly.
- All browsers are the latest versions and on a mac.
Here's a screenshot comparing Firefox and Safari, respectively!
And here's the css-code I use for the menu, pardon the mess.
nav {
width: 650px;
height: 220px;
margin: 10px auto;
}
nav ul {
list-style: none;
margin: 0 auto;
display: block;
}
nav ul li {
margin: 10px;
display: inline-block;
height: 100px;
line-height: 200px;
}
I've tried with different methods, but this messes up the menu in the working browsers.
Here's the HTML code for the nav-bar, as per request:
<nav>
<ul>
<li><h2>Cykler</h2></li>
<li><h2>Service</h2></li>
<li><img src="images/logo.png" name="logo" alt="Søgaard Cykler" width="220" height="200"></li>
<li><h2>Info</h2></li>
<li><h2>Kontakt</h2></li>
</ul>
</nav>
And here is a link to the functioning code on jsfiddle: http://jsfiddle.net/DaCqS/
It's best to avoid line-height for positioning elements. Margins are much more effective. Get rid of the line-height and try using a
margin-top:100px;
on either the nav or the ul.
EDIT: Now that I see your HTML... Since the big center logo is stylistically different from the four buttons, you should keep their CSS selectors separate. None of your current CSS is able to differentiate between these four buttons and the big center logo. A quick and easy way to fix this is to add this style:
nav ui li h2 {margin-top:100px;}
Ok so I've floated the the <li> and used the margin-top:100px for the h2.
try this and let me know if that fixes it http://jsfiddle.net/hfxKW/
Does this work for you? http://jsfiddle.net/WWkWw/
.top-menu{
background-image:url('foo/logo.png');
height:22px;
}
.left{
float:left;
}
.right{
float:right;
}
.top-menu li{
margin:60px 10px 10px 10px;
height:100px;
}
HTML:
<nav>
<ul class="top-menu">
<li class="left"><h2>Cykler</h2></li>
<li class="left"><h2>Service</h2></li>
<li class="right"><h2>Info</h2></li>
<li class="left"><h2>Kontakt</h2></li>
</ul>
</nav>
So what I need help with, is how do I remove the newline after a <li> and or <ul>
This is my css:
#ranks li {
background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }
and this is the html:
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
EDIT:
Demo : /removed/
You have a few options:
#ranks li {
float: left;
}
This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,
#ranks li {
display: inline-block;
}
Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:
#ranks li {
display: inline;
}
Which will treat the list items like any other inline element (such as <span> or <a>).
There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out margin, and padding.
Demo: http://jsbin.com/iconud/edit#html,live
Look Out Ahead!
You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:
<ul id="ranks"><li>
Index</li><li>
Contact</li><li>
Portfolio</li>
</ul>
Or have them all inline, a little less discernible:
<ul id="ranks">
<li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>
This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):
<ul id="ranks">
<li>Index
<li>Contact
<li>Portfolio
</ul>
Multiple Lists Inline Too!
From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:
#ranks,
#specs {
margin: 0;
padding: 0;
display: inline-block;
}
#ranks li,
#specs li {
display: inline-block;
border: 1px solid #CCC;
padding: 5px 10px;
}
Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:
<ul id="ranks">
<li>Index</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
<ul id="specs">
<li>Foo</li>
<li>Bar</li>
</ul>
This results in both lists, and their items, being displayed in a horizontal fashion.
Demo: http://jsbin.com/iconud/2/edit
with some css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
updated as comments: with display:block
ul li{ display:inline;} do the trick?
<li> by default is display:block;
if you give it display:inline; or diplay:inline-block; that should remove the linebreak
This is a basic example of horizontal UL's
HTML
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<span class="clearFloats">
CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/
Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.