CSS - List - Adjust Spacing Between Bullet And Text.

ok i have a list that has style:none. this list is a link.. now whenever a user wants to hover over it i want to add a pointer (arrow perhaps) on the left of the list...

Code:

#menu li  {
list-style:none;
}
#menu a, #menu a:visited {
	text-decoration:none;
	color:#0033FF;
}
#menu li a:hover {
list-style-image:url(images/pointer.jpg);
}
#menu a:hover {
	
	background-color:#0033FF;
	color:white;
	font-weight:bold;
}

now html
Code:

<ul>
		<li><a href="home.php">Home</a></li>
</ul>

Hi

I've been trying make an <a> anchor nested within a <li> list tag appear on the same row as the bullet, with no avail.

It's hard for me to explain exactly, so I've uploaded two images:

This is how I'd like the list items to appear, substract the extra list item which I have no idea why it appears the
Image 1


This is how the list items appear:
Image 2


Here's the HTML:
Code:

    <div id="primary-sidebar">
      <div class="shadow">
        <div class="tlc"></div>
        <div class="trc"></div>
        <h2 class="box-title">
          Games list
        </h2>
        <div class="box-content-lhz">
          <ul id="games-list">
            <li>
              <a href="/intersection.html?anarchy_online">Anarachy Onlins</a>
            </li>
            <li>
              <a href="/intersection.html?Aion">Aion</a>
            </li>
            <li>
              <a href="/intersection.html">Aries Online</a>
            </li>
            <li>
              <a href="/intersection.html">Cabal Online</a>
            </li>
            <li>
              <a href="/intersection.html">Eve Online</a>
            </li>
            <li>
              <a href="/intersection.html">Guild Wars</a>
            </li>
            <li>
              <a href="/intersection.html">Harrier</a>
            </li>
            <li>
              <a href="/intersection.html">Jaxsos' world</a>
            </li>
            <li>
              <a href="/intersection.html">Kal Online</a>
            </li>
            <li>
              <a href="/intersection.html">Lemmings</a>
            </li>
            <li>
              <a href="/intersection.html">Leiviathan Online</a>
            </li>
            <li>
              <a href="/intersection.html">Party Online</a>
            </li>
            <li>
              <a href="/intersection.html">World of Warcraft (US)</a>
            </li>
            <li>
              <a href="/intersection.html">World of Warcraft (EU)</a>
            </li>
          </ul>
        </div>
        <div class="blc"></div>
        <div class="brc"></div>
      </div>
    </div>

Here's the CSS
Code:

ul {
	padding-left: 2em;	
	list-style: square;
}
#games-list {
	list-style-image: url("/_images/bullet1.gif");
	list-style-position: inside;
	margin: 0px;
	padding: 0px;
}
#games-list li {
}
#games-list a{
	font-weight: bold;
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #424547;
	text-decoration: none;
	display: block;
	background: url(/_images/sprite-list.png) top left no-repeat;
	padding: 5px;
	padding-left: 20px;
}
#games-list a:hover{
	background-position: left -40px;
	color: #00a2ff;
}

I'd appreciate anyway help at all, as this has been on my mind for a while.

when using unordered lists, is there any way to get more than 3 different bullet designs as you go into deeper nests? after the 3rd nest, the same bullet design is used over and over again.

My page http://www.doylecompanylaw.com/doyle.html uses images for the bullets along the left navigation bar. They display perfectly in Opera and Firefox but position themselves too far up in IE. Anyone got any ideas on how to fix this problem? Thanks in advance.

Hi all,

Probably easy, but I'm stumped...

At this test page, I have now included a little horizontal image spacer image IN the list on the right. You'll notice that it has a bullet just like the text links do.

I want the image right where it, preferably with no space above or below it between the "Resume" & "I Can Help" links. If I close the UL tag after Resume, then re-open it before I Can Help, the gap is too big. So I threw the image directly into the list!

But I gotta kill the bullet.

How?

CSS FILE.

Thanks!

Chris

Hello,

I've created a menu by using an unordered list. Some of the list's items have submenus which is done with another unordered list nested inside the first. So my menu/list would look something like this:

( XX = the bullet image )

Code:

XX Item 1
XX Item 2
XX Item 3
      XX Item 3-1
      XX Item 3-2
XX Item 4

I was wondering if it is possible to use a different bullet image for the nested/indented unordered list? So the menu/list would now look like:

( XX and ZZ = the bullet images )

Code:

XX Item 1
XX Item 2
XX Item 3
      ZZ Item 3-1
      ZZ Item 3-2
XX Item 4

My existing code is:

Code:

<ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li>Item 3
         <ul>
          <li><a href="#">Item 3-1</a></li>
          <li><a href="#">Item 3-2</a></li>
          </ul>
        </li>
        <li><a href="#">Item 4</a></li>
        </ul>

And my existing ul CSS is:

Code:

ul {
	list-style-position: outside;
	list-style-type: square;
	margin-left: 18px;
	margin-bottom: 0px;
	padding: 0px;
	list-style-image: url(/graphics/layout_05/list_bullet.gif);
	margin-top: 0px;
	margin-right: 0px;
}

Thank you for any and all help!

I've used bullet image for a list but it give more indent then i want to use. I've checked the padding and marging for the other DIV ID's and set all to zero but also there is more indent in the left side. How is it possible to reduce the left indent for the list?

Code:

.test1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 15px;
	color: #003366;
	text-align: left;
	list-style-image: url(bullet1.gif);
	border: 1px solid #000099;
	list-style-position: outside;
	width: 150px;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#test2{
	width:215px;
	background-image: url(1bg-menu-v-mid.gif);
	background-repeat: repeat-y;
	border: thin solid #000066;
	float: left;
}

Hi again, fellas.

I have another annoyance. I've added some bullets that I want text right next to. I can't get the text to line up directly next to the bullets.

I've bordered the two problem div's to make it easier. Could ya'll have a look, please and tell me what is wrong?

http://www.bartlett-family.net/test2

Thanks!

Chris

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?

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.

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?

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&nbsp;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&nbsp;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.)

I am presently new at CSS, and I need help with this little problem.

Basically, I am creating a design and on Photoshop I have the following..

jerrytavares[dot]com/phpform/ex1.gif

Then when I convert it into HTML i have this..

jerrytavares[dot]com/phpform/ex2.gif

Now I need help spacing out the checkmark/rss image from the text. What is the best and easiest way to do this with CSS?

Thanks,
Peter

Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following.

I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell.

But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below:

|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|


Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other.