Reference this fiddle: http://jsfiddle.net/exGnZ/
Hi, I'm trying to reproduce a table of contents with an unordered list and leader dots. Unfortunately, when there's a long line of content, the formatting breaks down. Does anyone know how to get Chapter 2 in the image below to appear on the same line as the dots?
Here's the code I've got at the moment:
http://jsfiddle.net/exGnZ/
I'm also pasting it here:
<div>
<ul id="toc">
<li><span>Introduction</span> Chapter 1</li>
<li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming</span> Chapter 2</li>
<li><span>Sun breaks</span> Chapter 3</li>
<li><span>Lost and confused</span> Chapter 4</li>
<li><span>The pot of gold</span> Chapter 5</li>
<li><span>Nom nom nom</span> Chapter 6</li>
</ul></div>
And the CSS:
div {padding:10px;}
#toc {
list-style: none;
margin-bottom: 20px;
}
#toc li {
background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom left;
overflow: hidden;
padding-bottom: 2px;
}
#toc a,
#toc span {
display: inline-block;
background: #fff;
position: relative;
bottom: -4px;
}
#toc a {
float: right;
padding: 0 0 3px 2px;
}
#toc span {
float: left;
padding: 0 2px 3px 0;
}
How about this: http://jsfiddle.net/exGnZ/40/
Best I could manage in the time I had.
Here is my crack at it: JSFiddle
The only downside of this technique is that it requires a fixed width to the right side (100 pixels, in this case) to work, but it's a minor trade-off.
My two pence worth is here.
I used relative positioning instead of floats and added a pseudo element after the spans to prevent underlapping(?) the links if the width of the ul is reduced.
Related
I was wondering how to remove the vertical space between a unordered list and div. I know it's possible with using - margins, but I have a feeling that isn't really a clean method.
This is my code:
.menu {
list-style-type: none;
background-color: #660066;
}
.menu li {
display: inline;
padding-left: 40px;
padding-right: 40px;
}
.div {
width: 100%;
height: 500px;
background-color: #660066;
}
<nav>
<ul class="menu">
<li>Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
</nav>
<article class="div">
In this case your ul simply has standard margin on top and bottom. margin: 0; solves this.
jsfiddle
ul{
margin: 0;
}
Always do a reset like shown below for both UL and LI. That way spaces will only be present when you apply them by yourself.
ol, ul {
margin: 0;
padding: 0;
}
Click here to see why it is important to set a reset.
You have to set up your position since you are going to move in close proximity to the original location your position will be relative from there you move can move it up or down , it should look like this
.div
position:relative;
bottom:30px;
Neither googling nor browsing in SO helped me - hope someone here can solve this :
I have the following html :
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
and css
ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}
the "hook.png" image is 32x35 px - but whenever I create list items, text (e.g. ABC...) will always be shown below the image. Tried line-height and those 100% thingies - but neither worked out.
Any quick help :/ ?
Try some variation of
ul{
background-image: url(../img/hook.png);
background-repeat: no-repeat;
background-position: 95% 50%;
}
Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I'd say.
<html>
<head>
<style>
ul
{
list-style-image:none;
}
li
{
color:#FFFFFF;
font-size:16px;
text-shadow: 0em 0.13em 0.13em #2A2A2A;
font-family:Helvetica,Arial,Sans-Serif;
font-weight:normal;
line-height:35px;
margin-bottom:5px;
padding-left: 36px;
background-image: url('../img/hook.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>
Never seen any of our designers try to use the list-style-image when implementing custom icons for list, I guess this is why :)
If I have understood your problem is text seems bellow the baseline?
Try to set beelow property for your text:
padding-bottom
I came up with something like that, which may save u some time
HTML:
<ul class="rozcestnik">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
CSS:
.rozcestnik {
list-style-type: none;
padding: 0;
margin: 2.5em 2em 0;
}
.rozcestnik li:before {
background: url("icon.png") no-repeat scroll 50% 50% transparent;
content: " ";
display: block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}
.rozcestnik li {
position: relative;
padding-bottom: 5px;
padding-left: 5px;
}
According to custom list-image, you'll probably just need to customize the top and size ":before" and padding of "li".
It works across all major browsers and the application IE8 and more.
So basiclly I'm trying to add a custom thumbnail on my website. I'm using the <ol> and styling it in css such as..
ol {
counter-reset: none;
margin: 0px;
padding: 0px;
list-style-image: url('{image:thumbNail}');
position: relative;
right: 20px;
}
But i want to position this without affecting my other text within the <ol>. how can i achieve this so i dont effect the text but just positon the thumbnail? Help will be appreciated thanks.
Here is a fidle: http://jsfiddle.net/enn5r/
<ol class="thumnails">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
ol.thumbnails li{
padding:5px 0px 5px 25px;
border-bottom:1px solid #DDD;
background:transparent url(/icons/clock.png) no-repeat 5px 7px;
}
You should remove position:relative; to ol list and give it position:absolute; and align it using left and top CSS attributes. But this all will work properly if the parent tag of ol has position:relative; applied. You can also get it to work using position:relative; but that wont be the proper way as it would shift the elements on different screen resolutions.
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'm trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items.
The actual HTML is as follows:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
The current CSS is as follows:
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
Between each menu item I want a small image as a vertical divider, except that I don't want a divider shown before the first item and I don't want a divider shown after the second item.
The end result should look something like this:
Item 1 | Item 2 | Item 3 | Item 4 | Item 5
Just replacing the pipe with an actual image.
I've tried different ways - I've tried setting the list-style-image property, but the image didn't show up. I've also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.
Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:before is great!). But this is by far the cleanest and most proper way to do this, at least in my opinion it is.
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li:not(:first-child):before {
content: " | ";
}
Now just use a simple unordered list in HTML and it'll populate it for you. HTML should look like this:
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Support</li>
</ul>
</div><!-- navigation -->
The result will be just like this:
HOME | ABOUT US | SUPPORT
Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It's all automated and works great!
try this one, seeker:
li+li { border-left: 1px solid #000000 }
this will affect only adjecent li elements
found here
This can also be done via CSS:pseudo-classes. Support isn't quite as wide and the answer above gives you the same result, but it's pure CSS-y =)
.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }
OR:
.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }
See: http://www.quirksmode.org/css/firstchild.html
Or: http://www.w3schools.com/cssref/sel_firstchild.asp
I think your best shot is a border-left property that is assigned to each one of the lis except the first one (You would have to give the first one a class named first and explicitly remove the border for that).
Even if you are generating the <li> programmatically, assigning a first class should be easy.
A simpler solution would be to just add #navigation ul li~li { border-left: 1px solid #857D7A; }
.last { border-right: none
.last { border-right: none !important; }
This works fine for me:
NB I'm using BEM/OCSS SCSS Syntax
#navigation{
li{
&:after{
content: '|'; // use content for box-sizing
text-indent: -999999px; // Hide the content
display: block;
float: right; // Position
width: 1px;
height: 100%; // The 100% of parent (li)
background: black; // The color
margin: {
left: 5px;
right: 5px;
}
}
&:last-child{
&:after{
content: none;
}
}
}
}
I do it as Pekka says. Put an inline style on each <li>:
style="border-right: solid 1px #555; border-left: solid 1px #111;"
Take off first and last as appropriate.