?
Solved

Position CSS bullet list on my page.

Posted on 2006-05-14
13
Medium Priority
?
1,695 Views
Last Modified: 2008-01-09
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.
0
Comment
Question by:Quetysis
  • 5
  • 3
  • 2
  • +3
13 Comments
 
LVL 5

Expert Comment

by:PhilHow
ID: 16679195
Yoi show code is be better for help you.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16679393
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
 

Author Comment

by:Quetysis
ID: 16679840
#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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:Quetysis
ID: 16679841
As requested....code entered above.  Let me know if you need anything else....
0
 
LVL 8

Expert Comment

by:KennyTM
ID: 16680757
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16681039
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
 
LVL 8

Expert Comment

by:radnor
ID: 16682097
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16682605
> 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
 
LVL 8

Expert Comment

by:radnor
ID: 16682661
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
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 2000 total points
ID: 16683203
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 16695144
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16702250
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
 

Author Comment

by:Quetysis
ID: 16704630
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month16 days, 5 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question