Position CSS bullet list on my page.

Can't seem to find this one either.  I wish to define a specific position on the page for my CSS bullet list.  I tried using hspace and vspace but that didn't work.  However, I could have easily placed the hspace and vspace designation in the wrong place too.
QuetysisAsked:
Who is Participating?
 
GrandSchtroumpfConnect With a Mentor Commented:
add some background color to the <li> and you'll see that, for any "font-size" and "text-size":

In Firefox:  the distance between the right-side of the marker and the left-side of the background is always constant (something like 8 pixels).

If IE:  the distance between the left-side of the marker and the left-side of the background is always constant (something like 16 pixels).
0
 
PhilHowCommented:
Yoi show code is be better for help you.
0
 
GrandSchtroumpfCommented:
It's done with the 'marker-offset' property, but it's not well supported by current browsers...
If i remember correctly, Opera supports it...  IE6 does not support it for sure.
http://www.w3.org/TR/REC-CSS2/generate.html#markers
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
QuetysisAuthor Commented:
#benefitslist li { list-style-type: square;
                          color: #b1ac8c;
                          font-size: 14px;
}


                   <div id="benefitslist">
                        <ul id="benefitslist">
                          <li>We work very closely with our<br>customers from beginning
                              to end.</li>
                              <li>We work to complete your home in a<br>timely manner.</li>
                              <li>With the help of our own in-house<br>design team, you
                              can design<br> your custom home to fit your needs<br>and
                              wants!</li>
                              <li>If you have your own lot, we can<br>build on it.</li>
                              <li>20 years of experiance in construction.</li>
                        </ul>
                   </div>


0
 
QuetysisAuthor Commented:
As requested....code entered above.  Let me know if you need anything else....
0
 
KennyTMCommented:
Maybe you could tweak the "padding-left" property in the <li>'s to move the text a little bit to the right, e.g.

#benefitslist li { list-style-type: square;
                          color: #b1ac8c;
                          font-size: 14px;
                    padding-left: 2em;
}

you can also set that on <ul> to move the markers horizontally.

----

BTW, both your <div> and <ul>'s ID are "benefitslist". This is not allowed in the standards, and will cause confusion. (e.g. whether #benefitslist  means the <div> or the <ul>?) Rename the ID of the <div> to, e.g., "benefitslist_container", instead.
0
 
GrandSchtroumpfCommented:
padding does not modify the distance between the marker and the <li>'s content.
AFAIK, only 'marker-offset' does it (in browsers that support it).

I suggest you read the complete page http://www.w3.org/TR/REC-CSS2/generate.html.
Markers are not only for lists, they can be used for any element you want (like <h1>-<h6> for instance).
Too bad some browsers don't support that.
In the mean time, i guess you have to settle for the standard behaviour of lists.
0
 
radnorCommented:
Say what?!?  The margin left moves BOTH the marker AND list info.  Padding left moves just the list info.  Tested on both IE and FF.  

Try this:

<html>
<head>
<title>test</title>
<style>
li {
   margin-left:20px;    
   padding-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</body>
</html>
0
 
GrandSchtroumpfCommented:
> Say what?!?
Ok, that was arguably right...  i meant "<li>'s content" as the non-marker part of the <li>.
Should have been:  "padding does not modify the distance between the marker and the <li>".

The distance between the <li> and the marker remains constant and is usually a pixel value (does not change with the "text-size") which makes it impossible to correctly style bullet-lists in layout that allows for text-size changes.
0
 
radnorCommented:
What is this doing then.....  Not sure I am following exactly....  Please take a second a look at:

<html>
<head>
<title>test</title>
<style>
li.list {
margin-left:40px;    
padding-left: 4em;
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li class="list">one</li>
<li>one</li>
<li class="list">one</li>
</ul>
</body>
</html>
0
 
seanpowellCommented:
Hey...

========
padding does not modify the distance between the marker and the <li>'s content.
AFAIK, only 'marker-offset' does it (in browsers that support it).
========

Just wanted to note that the marker position (and the distance between the marker and the text) can indeed be controlled using the list-style-position property:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>bullet and text positioning</title>
<style>

.normal { background:#EEEEEE; list-style-position:inside; }
.special { background:#EEEEEE; list-style-position:outside; }
li { background:#FFFFCC; }

.one
{
      margin-left:0;
      padding-left:0;
}

.two
{
      margin-left:20px;
      padding-left:20px;
}

.three
{
      margin-left:40px;
      padding-left:40px;
}

</style>
</head>
<body>

<ul class="normal">
      <li class="one">one</li>
      <li class="two">two</li>
      <li class="three">three</li>
</ul>

<ul class="special">
      <li class="one">one</li>
      <li class="two">two</li>
      <li class="three">three</li>
</ul>

</body>
</html>

anyway - was just looking for an old piece of code I wrote a few years ago, and thought I'd stop in and say hi (and bi...) Looks like the TA is in good hands GS.

Sean
0
 
GrandSchtroumpfCommented:
Sean !!!!!!!!!!!!!
Great hearing from you after all this time.
> Looks like the TA is in good hands GS.
i'm definitely not as dedicated as you and cd& used to be.
i just answer some questions when i have time to spare but i don't pretend to supervise the whole TA.
i wish you good luck with your after-ee life.  and, even if i already said it before, thank you for the great lessons you taught me.
0
 
QuetysisAuthor Commented:
Thanks everyone!!  I appreciate all that you have said here.  I only wish I could give all of you the max point value for being so helpful.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.