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;
I'm not sure how to build a horizontal list that looks like this:
Here are the rules:
There is an unlimited number of items in the list.
Each item should be on a single line and not wrap to a 2nd line.
Multiple items can be on a single line if there is space for them to fit
If multiple items are on a single line, they should be separated by a divider
The divider looks like a bullet, but it could be an image
Need it to work in modern browsers as well as IE8+
The thing I'm not sure how to do is to make the bullets appear only between items, and not also before or after each row of items.
For those of you who don't have to worry about IE8, this is as simple as:
ul li { list-style: none; display: inline; }
ul li:after { content: " \00b7"; }
ul li:last-child:after { content: none; }
This solution matches all of OP's requirements, except IE8 compatibility (that was 2013).
Simple markup. No JavaScript. No :last-child
Link to CodePen
ul {
display: inline-block;
padding: 0;
margin: .5rem;
text-align: center;
background-color: #fff;
}
li { display: inline; }
li a { white-space: nowrap; }
li:after {
content: " ";
letter-spacing: 1em;
background: center center no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=);
}
body { background-color: #D3D3D3; }
<div id="d">
<ul>
<li><a>Profile Image</a></li>
<li><a>Name</a></li>
<li><a>Activity Information</a></li>
<li><a>Distance</a></li>
<li><a>Pace</a></li>
<li><a>Points Earned</a></li>
</ul>
</div>
<div style="width: 20rem"><script>document.write(d.innerHTML)</script></div>
<div style="width: 10rem"><script>document.write(d.innerHTML)</script></div>
For almost all browsers, you can use the CSS3 selector last-child instead of JavaScript:
ul li { display: inline; white-space: pre; }
ul li:after { content: " \00b7 "; }
ul li:last-child:after { content: ""; }
The white-space: pre stops wrapping within list items (because usually you want it to wrap between list items), and is a hack that allows you to increase the space between list items by adding spaces on the second line.
u00b7 ⋅ (MIDDLE DOT) is the standard unicode character for interpuncts, but you could also use u2022 • (BULLET), u2b24 ⬤ (BLACK LARGE CIRCLE), U+2043 ⁃ (HYPHEN BULLET), or any other unicode character you choose.
Note that some characters may not be supported on all systems.
Here is a further improved version. I kept getting an inconsistency at certain page widths where two bullets would be missing rather than just the last one. i.e.
link1 · link2 · link3 link4
link5 · link6
I think the issue was that removing the last bullet separator could itself affect the text flow if the page width was just right. The new script locks the original text flow by adding and removing literal line breaks.
I have the same script to run every time the screen is resized so you don't get stuck with awkward line breaks.
<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>
<body onresize="processBullets()" onload="processBullets()">
<ul>
<li>Harvard Medical School</li>
<li>Harvard College</li>
<li>Harvard Medical School</li>
<li>Harvard College</li>
<li>Harvard Medical School</li>
<li>Harvard College</li>
<li>Harvard Medical School</li>
<li>Harvard College</li>
</ul>
<body>
<script>
function processBullets() {
var lastElement = false;
$("br").remove(".tempbreak");
$("ul li").each(function() {
$(this).removeClass("nobullet");
if (lastElement && lastElement.offset().top != $(this).offset().top) {
$(lastElement).addClass("nobullet");
$(lastElement).append('<br class="tempbreak" />');
}
lastElement = $(this);
}).last().addClass("nobullet");
}
</script>
If you don't mind creating a PNG image (with transparent background) of the bullet (or other separator), then you can use a natural space between the list items painted with this as the background.
Where the list items wrap onto the next line, the space---and thus its background---won't be rendered.
This avoids layout issues relating to the space taken up by the separator, as well as avoiding any Javascript/jQuery, taking advantage of the browser's own layout engine to do the work. You can adjust the space for the separator with the word-spacing attribute.
You'll need to ensure there is no other whitespace within the markup that might otherwise be used as the natural space. You could use a higher-res image than the 5x5 here, in conjunction with background-size, so that it still looks ok when zooomed, but note IE8 doesn't support scaling of background images. The other drawback is that if you want to change the colour you'll have to edit the PNG.
FIDDLE
Code based on modifying #bleuscyther's answer:
CSS :
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul .separator {
word-spacing: 1.1em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
HTML :
<ul>
<li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li><span class='separator'>
</span><li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li><span class='separator'>
</span><li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li><span class='separator'>
</span><li>Harvard Medical School</li><span class='separator'>
</span><li>Harvard College</li>
</ul>
user2511031's solution is almost ideal... it's just not a valid HTML. There should not be any SPAN outside LI, inside UL.
But it doesn't mean that there is no really ideal solution. I found one!
No need to put the spans allover and clean white-spaces in the markup. Place the needed space into the ":after" pseudo element content, apply the background image to it.
It does the same!
ul { max-width: 700px; padding: 0; text-align: center; }
ul li { display: inline; white-space: nowrap; }
ul li:after {
content: " ";
word-spacing: 2em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
Here's the Fiddle
I just used text-indent to successfully style a bulleted list as follows:
HTML:
<ul class="horizontal">
<li>Payment</li>
<li>Check</li>
<li>Direct Deposit</li>
</ul>
CSS:
ul.horizontal li {
list-style-type:disc;
float: left;
text-indent:-4px;
margin-right:16px;
}
In the simplest of ways, all you would require is setting text-align: center on the ul and display: inline-block on li in your stylesheet.
You can use an image as a separator if you wish by leveraging the :after pseudo class on li.
Here's an example.
http://jsfiddle.net/caramba/tSnnP/
<div>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
<ul>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
<li><span class="icon bull"></span>xxx</li>
</ul>
</div>
<style type="text/css">
div {
white-space: nowrap;
width: 100%;
}
span {
display:inline-block;
margin:0 5px;
}
ul {
text-align:center;
}
ul li {
display:inline;
margin:20px;
}
.hide {
display:none;
}
.icon {
position:relative;
display:inline-block;
background-position:-1000px -1000px;
background-image:url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
background-repeat:no-repeat;
background-size:5px 5px;
width:5px;
height:5px;
}
.icon {
background-position:0px 0px;
top:-2px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:first-child').children('span').addClass("hide");
});
</script>
ul li {
display: inline;
text-align: center
}
.separator {
display: inline-block;
background-color: black;
width: 5px;
height: 5px;
border-radius: 45px;
vertical-align: middle;
}
<ul>
<li>item 1</li> <div class='separator'></div>
<li>item 2</li> <div class='separator'></div>
<li>item 3</li> <div class='separator'></div>
<li>item 4</li> <div class='separator'></div>
<li>item 5</li>
</ul>
You can also build this in JavaScript using a loop and concatenating a new li for x amount of list items but seeing as your post doesnt say anything about a dynamically generated list I'll leave it just as this for now.
<table>
<tr>
<td>
<ul>
<li>First menu item</li>
</ul>
</td>
<td>
<ul>
<li>Second menu item</li>
</ul>
</td>
<td>
<ul>
<li>Third menu item</li>
</ul>
</td>
</tr>
</table>
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.
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.
I have applied ie PNG from here: http://www.twinhelix.com/css/iepngfix/
So I can use transparent PNG background images in my CSS. It works on divs but the problem is when I give a transparent background to unordered list (ul) it doesn't work.
Here is the markup:
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<p>© 2009 Your Name</p>
</div>
And here are relevant parts of the stylesheet:
/* IE PNG fix */
img, div, ul { behavior: url('/css/iepngfix/iepngfix.htc') }
#footer {
width: 876px;
margin: 0 auto;
background: none;
text-align: center;
line-height: 1.5em;
font-size: .8em;
}
#footer ul {
padding: 40px 0 13px;
background: url('wrapper-bottom.png') center top no-repeat;
}
#footer p {
padding-bottom: 15px;
}
I also tried adding background: transparent; to the #footer div but with no success. Other PNG images applied to divs work but under the wrapper-bottom.png there is a grey background (#333) which is a background of most website content areas but I specifically declared background: none; for the #footer so there should be none :(
EDIT: Actually when I don't specify height for the #footer div, the whole footer has grey background...
EDIT: I actuallly managed to solve this myself few minutes after I posted this. I used a very ugly hack though:
#footer {
height: 0;
}
#footer ul {
height: 30px;
}
This seems to work in all IE versions.
Try using Unitpng Fix.
Its easy to implement and works with background png too...
Check out this link