|
CSS - Spacing Between Bullets In A List
I have this:
Code:
li {
line-height: 25px;
}
Which does sort of what I want. What I really want is for the spacing between bullets to be 25px and the line spacing within a bulletted point to be normal .. is there a way to do that? Similar TutorialsHello, What is the best way to adjust the vertical spacing between bullets? I tried inserting a br tag inbetween the li tags, but that isn't "valid" XHTML. So for now I'm using the margin-bottom property... Code:
li {
margin-bottom:20px;
}
Any suggestions? I need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. What the hack? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must: - wrap around a floated element - have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements) I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas? Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out? Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!) Code snippet is posted below. Cheers. from stylesheet: .bulletList li { margin-bottom: 1.5em; padding-left: 0.75em; list-style-image:url(../images/hsdmini.jpg); color: #547A98; } from page: <table width="100%" > <tr> <td align="left"> <ul class="bulletList"><strong> <li>Credit cards accepted</li> <li>Cheques accepted</li> <li>Delivery to europe</li> <li>40,000 products in store!</li> </strong> </ul> </td> </tr> </table> Hi, I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong. How can I remove the circle bullets from the expanding menus on this page ? Thanks Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS? I've tried something like this.. Code:
#ulist ul{
list-style: none;
}
#ulist li a{
list-style: square;
}
the list Code: <ul id="ulist"> <li><a href="#">Element 1</a></li> <li><a href="#">Element 2</a></li> <li><a href="#">Element 3</a></li> <li><a href="#">Element 4</a></li> </ul> But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element. If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it? Cheers, Fozzy For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time. Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav. Below is code I'm using to troubleshoot: Code:
<ul><li><a href="#">dog</a></li>
<li><a href="#">cat</a></li>
<li class="here"><a href="#">fish</a></li>
<ul>
<li><a href="#">trout</a></li>
<li><a href="#">angel</a></li>
<li><a href="#">salmon</a></li>
</ul>
<li><a href="#">turtle</a></li>
<li><a href="#">elephant</a></li>
</ul>
Code:
li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}
If a user is on the page fish, they will see that bullet point to page salmon. Any recommendations? Hi, I am new to css and have written a code for a list menu in my page and i have added an image for instead of selecting the default bullets in css (ie. square, circle etc. so now my problem comes it looks perfect in Firefox browser but in IE 6 & 7 the position of the bullet image changes . In firefox it shows the bullet besides the text written and it is centered and perfect as i need but in IE 6 and 7 the image of the bullet moves up and sticks to the text instead of maintaining some distance with the text. i am providing u the link of my page below: r-interactive.net/clients/reed%5Fcss/ Also i am mentioning the css code which i have used for the list menu below : Css : Code: ul#listmenu {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #959595;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-indent: 5px;
list-style-type: none;
list-style-image: url(../images/main_images/img_industry_bullet.gif);
list-style-position: inside;
}
ul#listmenu li {
list-style-image: url(../images/main_images/img_industry_bullet.gif);
margin-top: 0;
margin-right: 0;
margin-left: 0;
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 0.5em;
padding-left: 0;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #207EC9;
clear: both;
}
Html : Code: <ul id="listmenu"> <li> Jewelry Industry</li> <li> Aluminium Industry</li> <li> Electronics Industry</li> <li> Pharmaceutical Industry</li> <li> Oil & Gas Industry</li> <li> Cosmetics Industry</li> </ul> Help is always appreciated. Hi, I was wondering if it's possible to space out seperate blocks of text within a <ul> element? So for instance: Code: <ul> <li>Caption1 Caption2 Caption3</li> </ul> In that code I want to have each word spaced out a set amount. I guess I'm basically trying to emulate table rows, but I can't use tables for what I'm trying to do. Hi there guys, This is a pretty specific problem to my website, but I can't seem to find out why part of my navigation list moves down when an element is shown by Javascript in IE. So I can't plug in a url into this post, so I suppose I'll just explain the problem. I have a list navigation with images, and within one of the list elements is another nested list. When I click on the link that then uses JS to display the subnavigation, the link below that shifts down something like four pixels when its not supposed to, and I couldn't fix it by playing with CSS for some reason, but I'm assuming the problem is hidden in there somewhere. I've been trying to resolve this for a couple days; if anyone could help me out, I'd really appreciate it! I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using: Code: <h3 class="blue_title">Bob Smith</h3> <p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since 1999.</em></p> <br /><br /><br /> <p> </p> <h3 class="blue_title">Edgar Jones</h3> <p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since 2005.</em></p> <p> </p> Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings. Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table. Thanks. (p.s. - I am using joomla for this site but I don't think that's relevant to this question.) Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent. Any suggestions? Is there a way to decrease a default spacing between bullet and text in <ul>? Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines. This is the first time I've ever not been able to hack around something. I am about to pull my hair out trying to figure out what i wrong with my bulleted menu in CSS. If you look at this page you will se that the arrow bullet for the list is aligning in the middle of a nested UL: http://www.porphyriafoundation.com/about-the-apf/scientific-advisory-board How on earth do I get that stupid little arrow to move up next to the parent item?! If you know the solution I will kiss you through the internet! Here is the CSS: Code: http://dev.porphyriafoundation.com/modules/system/system-menus.css?A
li.expanded (line 11)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
}
ul.menu li (line 8)
{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0.5em;
}
http://dev.porphyriafoundation.com/themes/apf_one/apf_one.css?A
#block-menu-primary-links ul.menu, #block-menu-primary-links li.leaf, #block-menu-primary-links li.collapsed, #block-menu-primary-links li, #block-menu-primary-links .item-list ul, #block-menu-primary-links .item-list ul li (line 135)
{
list-style-position: outside;
list-style-image: none;
list-style-type: none;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
background-color: #ffffff;
width: 173px;
}
#block-menu-primary-links .block-inner li.abouttheapf ul li.expanded (line 394)
{
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0pt;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 16pt;
}
Here's a quicky before the weekend (FINALLY!!!)... Is there a way to detect if a user clicks on a bullet (or the entire LI tag)? I have this list, but I would like the browser to react differently when clicking on the LI text vs. the LI bullet icon. I've read about putting the icon in background and then moving the text, and this seems to work except for a bug concerning text wrapping... so please don't suggest that... I might be dreaming here... but the forums are usually very resourceful so why not!! Thanx a ton. Olografix Hi, Im just learning css and notice that alot of elements such as navigation can be done using bullet points. Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent? my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it? Code: .nav {
height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
line-height:30px;
}
.bul-sec {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-position: outside;
list-style-image:url(images/bullets/sec.gif);
line-height:30px
}
or is there a better way to do this? Thanks! Hi there, I have a menu system which uses <UL> etc, but it displays the bullet point. Is there a way to remove these bulllets? Many thanks! Hi, I have a problem with a menu. I use joomla 1.5 and I create a sprite CSS menu as follow: Code:
ul.menu-central {
width: 970px;
display:inline;
}
ul.menu-central li {
display:inline;
}
ul.menu-central li a {
display: block; float:left; margin-left:5px; height: 80px;
background-image: url((URL address blocked: See forum rules)); text-indent: -9999px;
}
ul.menu-central .item67 a {
width: 150px; background-position: -10px -9px;
}
ul.menu-central .item72 a {
width: 150px; background-position: -170px -9px;
}
ul.menu-central .item97 a {
width: 150px; background-position: -330px -9px;
}
ul.menu-central .item79 a {
width: 150px; background-position: -490px -9px;
}
ul.menu-central .item98 a {
width: 150px; background-position: -650px -9px;
}
ul.menu-central .item99 a {
width: 150px; background-position: -810px -9px;
}
a { outline: none; }
In IE the bullets of the list are hidden, instead in Firefox are visible. I try to put: list-style:none and list-style-type: none in the css code, but nothing has happened. Someone could you know how can I hide the bullets also in Firefox? Thank you Please go to http://hometown.tmhdesign.com See the list on the right site with the check mark bullets. Scroll up and then back down and they disappear. I came across this today and realized I didn't have a nice clean answer for how to handle it. A client was editing a page where text was wrapping around an image. Something like this: Code: <div style="border: 1px solid blue; float: left; width: 100px; height: 200px">image</div> <p>This is some text.</p> <ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> She asked why the bullets weren't appearing. Sure enough, the bullets appear underneath the float, not next to it. Now I could enclose the bullets and the paragraph in a div and give that div some left padding, but this is a free form text page where she should just be able to type and have the text flow around the floated element. I shouldn't have to manually tweak styles on elements just so she can have bullets show up in the right place. Is there an easy CSS method to make the bullets appear in the right place whether they're next to a floating element or not? Hi, I have a list of items a bullet on the left --> check.gif (13 X 12) and I'm totally new with CSS... but my check aligns ok only with IExplorer, firefox doesn't. here is my code... Code: #myul
{
color: #000000;
font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
list-style-position: outside;
margin-left: 15%;
margin-right: 15%
}
#myul li
{
color: #0076a3;
font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-image: url(images/check.gif);
}
Code: <ul id="myul" class="listObj"> <li class="style16">Test item 1</li> <li>Checks all devices</li> <li>Verifies ....quality, ....resolution, precision/accuracy</li> <li>Compares current imagesbla bla bla bla bla bla bla bla bla some more below.........................ok thanks</li> </ul> PLEASE NOTE that I want the check align on top, sometimes the text lenght makes it move, I don't want that to happen. Can you help Thanks, my first post here |
|||||||