So I have an unordered list with custom bullet images. They are triangles pointing to the right at the list. I would like the point to be aligned with the vertical center of the first line of text in the list item. How can I achieve this?
This is what I am currently viewing:
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
main ul {
list-style-image: url(../img/bullet.png);
margin-top: 25px;
}
main ul li {
line-height: 35px;
}
The line-height doesn't seem to do anything.
you can use pseudo-element before \ after instead, take a look at this example below:
main ul {
margin-top: 25px;
}
main ul li {
list-style: none;
}
main ul li:before {
content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");
position: relative;
top: 10px;
left: -10px
}
<main>
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
</main>
It's really hard to actually provide you with finalized code without access to your image, but try merging the following code with your own. The first Padding value (currently 3px) should be the item you need to update.
li {
background: url(images/bullet.gif) no-repeat left top;
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
src: Adjust list style image position?
Related
I am trying to create a tree with indentations in pure CSS. I have been trying using something like:
ul.tree ul {
padding-left: 5px;
}
However I would like to have a separation between each item in the list. If I use the code above the separating bar gets indented as well so it's not too good.
Here is my current code (I do the indent directly in js, which I don't like): jsfiddle
Ultimately, I want to create something that basically looks like that:
Any idea how to do this in pure CSS? kudos for the simplest answers.
Simple with Multi-level Depth Support
UPDATED: Tweaked to accommodate hover
No extra HTML needed, no having to limit depth because of css selector chaining, as it supports any number of levels deep without having to adjust your css at all for those levels (no keeping track of "padding" to set on the next level deep).
This works well with only a two minor limitations (which I don't believe will factor into affecting you).
See fiddle demo.
Add a position: relative to your ul.tree, but keep all the child elements the default static position. Then change/add the following css:
ul.tree a {
display: block;
height:30px;
line-height: 30px;
padding-left: 15px;
}
/* this is making our bottom border, but sizing off the .tree ul width */
ul.tree a:before {
content: '';
height: 30px; /* match your <a> height */
position: absolute;
left: 0;
right: 0;
z-index: -1;
border-bottom-width: 1px;
border-bottom-color: lightgray;
border-bottom-style: solid;
}
ul.tree a + ul {
padding-left: 15px; /* this is your spacing for each level */
}
ul.tree a:hover:before {
background-color: #DDDDDD;
}
The limitations are that no child elements can have a position set and we are using a pseudo-element (which means it cannot be used for some other feature, but that is probably not an issue either).
For lists with unknown depths, I've used an absolutely positioned element for separating lines. It adds a little extra markup, but seems to work.
div.separator {
position:absolute;
left:0px;
right:0px;
border-top:1px solid lightgray;
}
<ul class="tree">
<li><a>Item1</a><div class="separator"></div></li>
<li><a>Item2</a><div class="separator"></div>
<ul>
<li><a>Item3</a><div class="separator"></div></li>
<li><a>Item4</a><div class="separator"></div></li>
<li><a>Item5</a><div class="separator"></div>
<ul>
<li><a>Item6</a><div class="separator"></div></li>
</ul>
</li>
</ul>
</li>
</ul>
http://jsfiddle.net/7u87c/20/
This CSS makes the link inside a nested li have a padding-left of 30px, and I add another nested li link have padding-left: 60px.
ul.tree li ul li a {
padding-left: 30px;
}
ul.tree li ul li ul li a {
padding-left: 60px;
}
http://jsfiddle.net/7u87c/5/
No extra markup and use of icon image.
Pretty simple and dynamic based on the content.
Sample HTML:
<ul class="tree">
<li><span>public</span></li>
<li><span>server.js</span></li>
<li>
<span>server</span>
<ul>
<li><span>webfs</span></li>
</ul>
</li>
<li><span>specs</span></li>
<li>
<span>src</span>
<ul>
<li>
<span>core</span>
<ul>
<li><span>CellAddress.js</span></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
ul.tree {
border-top: 1px solid grey;
}
ul.tree, ul.tree ul {
padding: 0;
margin: 0;
list-style: none;
}
ul span {
display: block;
padding-left: 25px;
border-bottom: 1px solid #666;
height: 25px;
line-height: 25px;
background: url("http://lorempixel.com/10/8/") no-repeat scroll 5px 8px transparent;
}
ul ul span {
padding-left: 35px;
background-position: 15px 8px;
}
ul ul ul span {
padding-left: 45px;
background-position: 25px 8px;
}
Please see example
Note: You can convert the spans into a tags
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to figure out how to style items in my ol. My goal is for the end result to have the ol horizontal with the numbers under left aligned under the li text.
Example of how end result should look:
Item Item Item Item Item
1 2 3 4 5
Here is one way of realizing this design using pseudo-elements to position a custom counter.
You can start with either an ordered or an unordered list:
<ol class="list">
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
<li>Durian</li>
</ol>
apply the following CSS:
.list {
counter-reset:itemcounter;
margin: 0;
padding: 0;
}
.list li {
border: 1px dotted gray;
margin-right: 30px;
float: left;
list-style: none;
}
.list li:after {
content:counter(itemcounter);
color:#000;
counter-increment: itemcounter;
display: block;
background-color: pink;
padding: 0px;
text-align: left;
padding-right: 5px;
}
Define a custom counter and position it in a pseudo-element li:after.
I floated the list items to get the horizontal menu but you can also use inline-blocks.
See demo at: http://jsfiddle.net/audetwebdesign/DgZvg/
Backwards Compatibility
The limiting design factor here is the custom counter, which is supported from IE8 going forward: http://caniuse.com/#feat=css-counters
Alternative For Older Browsers
For older browsers that don't support counters and generated content, you could try something like the following.
You need to add a wrapper element on your list content:
<ol class="list">
<li><p>Apples</p></li>
<li><p>Bananas</p></li>
<li><p>Cherries</p></li>
<li><p>Durians</p></li>
</ol>
and then apply the following CSS:
.list {
margin: 0;
padding: 0;
}
.list li {
list-style-position: inside;
border: 1px dotted gray;
margin-right: 30px;
padding-left: 5px; /* gives you some control... */
float: left;
padding-top: 20px;
line-height: 20px;
width: 100px;
position: relative;
}
.list li p {
height: 20px;
margin: 0;
position: absolute;
bottom: 20px;
left: 0;
}
In this case, you list-style-position: inside, and then define a two-line text region by specifying a line-height of 20px and padding-top of 20px. You also need to specify a width on the list items.
You then set the height to the inner wrapper and then use absolute positioning to offset the bottom by 20px.
This is much more work, a bit constrained because of the width and height lengths,
but it is a proof-of-concept.
See demo at: http://jsfiddle.net/audetwebdesign/PUH9V/
And here is my way, with CSS 2.x and cross browser :)
HTML
<ol>
<li><span>item</span></li>
<li><span>item</span></li>
<li><span>item</span></li>
<li><span>item</span></li>
<li><span>item</span></li>
</ol>
CSS
ol li {
position:relative;
min-width:100px;
padding:30px 0 0;
float:left;
}
ol li span {
position:absolute;
left:-30px;
top:0px;
}
Working: http://jsfiddle.net/shekhardesigner/fuLjk/
I used a span inside the li to position the text above the element. You may need to adjust the CSS to work better in your actual environment.
http://jsfiddle.net/j5Nbx/2/
HTML
<ol class="example">
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ol>
CSS
.example li {
float:left;
padding:10px;
}
.example:after{
content:"";
display:block;
clear:both;
}
.example li span {
position:relative;
left:-35px;
top:-20px;
}
I'm fairly new to CSS. I've been studying on how to put up a horizontal menu with CSS by the given example. The html source code is as follows:
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
and the style sheet is as below.
body {
background-color: #000;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
li {
float: left;
}
ul a {
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
}
ul a:hover {
color: #FFF;
}
All this code display the horizontal menu perfectly, but I don't quite understand on how it is organized.
My question is: why do we need to set the display property of the anchor that is contained in the <li> tag to "block"? I learned that the anchor tag itself is inline element naturally. Does this mean by doing so it give the anchor tag ability to be displayed as block? So, I we can treat them as block in setting background and padding?
any help would be very much appreciated.
Adding display:block to the <a> element is not mendatory, but one advantage of it is it will take the full size of his parent (<li>) if you specify one (specially the height).
Also, since you're applying a background to the link, it's always a good thing to display it as a block, since most of the time you need to specify an height.
I have an image in a list item I need floated. Everything looks fine in FF/6+. Webkit and IE, however, show the list icon on top of the image. When I try floating the list item itself, the icon simply vanishes. Is there a CSS way around this issue? I tried wrapping the content in a span, and still no solution. I've removed some of the text in order to lighten the code here.
<ul class="leftList">
<ul>
<li>Pillow menu to customize your night's sleep</li>
<li>Complimentary bathroom amenities</li>
<li><span class="special_needs_list_item"><a rel="tooltip nofollow" title="Tooltip - Lorem ipsum"><img src="http://teamsite-prod.rccl.com:8030/DOT/img/global/special_needs.png" alt=""></a> Some srooms in this category are wheelchair-accessible.</span></li>
</ul>
</ul>
#ccStateroomFeatures ul {
float: left;
width: 320px;
margin-left: 15px;
font-size: 12px;
}
#ccStateroomFeatures ul li {
margin-bottom: 5px;
}
#ccStateroomFeatures .leftList {
width: 490px;
float: left;
}
#ccStateroomFeatures .leftList ul,
#ccStateroomFeatures .rightList ul {
float: none;
margin-left: 15px;
width: auto;
}
#ccStateroomFeatures .leftList ul .special_needs_list_item {
margin:0 0 20px -15px;
padding-left:15px;
}
#ccStateroomFeatures .leftList ul .special_needs_list_item img {
float:left;
margin:3px 5px 0 15px;
overflow:hidden;
width:13px;
}
I'm not sure I understand what you're trying to do. Are you trying to have the image supplied be used instead of the list icon?
If so, you'll want to use list-style-type:none to deal with that. Then play around with the margins to get it to line up like you want.
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)