17 replies [Last post]
golteb
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2005-01-28
Posts: 8
Points: 0

Guys, I'm new in css. PLease help

How can we make the second and the succeeding lines the same indentation as the first line? and also remove the space above the list.

Thanks.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 4 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

bullets

Do you mean you have a sublist in a list?

as in:

<ul>
<li> item one </li>
  <ul>
    <li> subitem one </li>
  </ul>
<li> item 2 </li>
</ul>

As for removing the space around it, try this:

ul {
margin: 0;
padding: 0;
}

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

bullets

The default is for each line of a li is to be indented the same. Can you be more specific about the test case?

Set the list margin-top and margin-bottom to 0 to eliminate the space above and below the list. Keep in mind the margins of those elements above and below the list.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

golteb
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2005-01-28
Posts: 8
Points: 0

bullets

thanks for the quick reply guys.

say i have a list of sentences

* the quick brown fox
jumps over the lazy dog
* blah blah black sheep
was hit a car

the 2nd line should be indented too.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

bullets

It is by default. If you're getting different results, you've changed something.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 4 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

bullets

I have a feeling you're not using the <ul> - am I correct?

If you're doing it the hard way (ie just typing it in), then the browser will ignore your spaces:

* item one
carries on here
* item 2
here also

will display the same as:

* item one
   carries on here
* item 2
   here also

Verschwindende wrote:
  • CSS doesn't make pies

golteb
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2005-01-28
Posts: 8
Points: 0

bullets

yes that is the default style of bullets but i want to elliminate the spaces around it, setting the top and bottom will do but on the left side it still has spaces

thanks for the reply by the way.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

bullets

Then set ul's margin (for IE) and padding (for Moz) to 0. That removes all indention and top and bottom spacing. You can now reset things to your heart's content Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 7 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

bullets

Setting

list-style-position: outside;

Should do what I think you want it todo.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

bullets

briski wrote:
Setting

list-style-position: outside;

Should do what I think you want it todo.Yeah, that's the default; which is why I suggested that something had been changed.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 7 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

bullets

It's a fair point you make Laughing out loud

For some reason when I posted I was under the impression that different browsers had different defaults - I think it was a moment of madness, I can only assume I have got used to some browsers (*cough* IE *cough*) doing things differently and blame that.... Wink

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

bullets

There are a lot of things left to the browser's discretion, and some that have defined defaults.

http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position

'list-style-position'
Value: inside | outside | inherit
Initial: outside <<---- the default
Applies to: elements with 'display: list-item'
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bullets

Blimey, got the eyesight of a hawk have we Gary.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

bullets

While studying the adverts (see, I can speak Brit) for Lasik surgery, Hugo wrote:
Blimey, got the eyesight of a hawk have we Gary.
I merely wrapped the spec in <pre></pre> tags to maintain formatting.

Keeping in mind that Tony set the base font at 76%, what do you have as the font family and size for your monospace? My default is "courier new" at 13px. It was "courier", but I found that to be more difficult to read—especially on some sites where the owner is a young whipper-snapper who thinks a 12px font is large enough for anyone, and my monospace shrinks to 10px. (Tongue feeling your ears burning, Tony?)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

golteb
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2005-01-28
Posts: 8
Points: 0

bullets

thanks guys. I'm a complete newbie. I tried placing

list-style-position: outside;

but it doesnt work. my css looks like this.

ul { margin: 0; padding: 0; }

li {list-style-position: outside; }

spaces on the left are gone and the bullets are gone too.

what's missing?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

bullets

Now do this since you want the bullets;

ul {
    margin: 0;
    padding: 0;
    padding-left: 40px;
    list-style-position: outside;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

golteb
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2005-01-28
Posts: 8
Points: 0

bullets

WOW, thanks man. whew!

we finally got it! thanks again. and to all of you guys here in css forum, thanks!!!

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 7 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

bullets

The combination of zero margins/padding and list-style-position outside will indeed result in the bullets not appearing as they are being displayed outside the visible box.

Re-apply some left margin or padding should get them to come back again. as it will give space for them to appear

say

ul
{
margin-left: 20px
}

The reason to reset everything it to make sure you know where you are and that there are no different defaults being used by differnet browsers.