How to move left margin in leaf

By 205 CTT on 4 Jan 2007 at 00:33 UTC

Hi
Can anybody help me explain how to remove the left bullet margin in the leaf theme.
I have succelfully removed the default bullets/images, by following css

li.leaf {
list-style-image: none;
list-style-type: none;
background: url("plus.gif") no-repeat left top;
background-position: 0 .2em;
padding-left: 1.5em;

However the empty space from the bullets are still standing there??? and I cant remove it.
Now I have an emty left margin, then my plus.gif and then my tekst/link.

How do I get rid og this left margin?

I want to have my tekst/link to start without this default left margin.
I have tried to overule it in css by margin-left and padding-left etc. but it dosnt help....

Can anyone help ..thanks!

Comments

hi there

Chill35 commented 4 January 2007 at 01:36

Weird. Can you show us the code for the list, not just the list items ?

Does the list has padding or margin on the left ?
Try to set both values if they haven't been set.

Are you using a background image because you want to fine-tune the position of your own bullet,
and not use list-style-image: url(plus.gif) ?

By the way, to get valid CSS, you need to remove these quotes around the file name. It is simply url(plus.gif). It is counterintuitive but that's that.

Also your padding-left should be set using pixels, not ems, because the size of your gif will always be the same, even when your text will be resized. (Using ems for the image position vertically is perfect though.)

I have tried to overule it in css by margin-left and padding-left etc.

On what element, the list or the list item, and in what *.css file ? Use CSS specificity.

Caroline

Here is the code for the

205 CTT commented 4 January 2007 at 08:22

Here is the code for the page.tpl.php
All <> has been replaced by () to show the code rather than having it displayed as php. How do I post only the code so it dosnt display???

(div class="block block-user" id="block-user-1")
(h2 class="title")Navigation(/h2)
(div class="content")
(ul class="menu")
(li class="leaf")(a href="/drupal/?q=node/1")link1(/a)(/li)
(li class="leaf")(a href="/drupal/")link2(/a)(/li)

(/ul)
(/div)
(/div)

I have tried to set the margin and padding every where that would make sence to me i.e. block-user, block-user. li, menu, menu. li etc. but without any luck.

Yes I am using the (plus.gif) to set my own background bullets and fine tune the positioning. I tried list-style-image: url(plus.gif), but then I coulnt get the position right. However by this the empty left margin is gone.

Ok, thanks I will remove the quotes.
Ok, thanks I will change from em to px when defining padding-left for my link/text (dont know the difference between px and em, that would be another post)

I have tried to overrule the empty left margin in my theme style.css
I tried to find the right place to do it, but havent found it yet. I tried the ones listed above.

It should be mentioned that I am new to this,however the code for the empty left margin space must be hidden somewhere....

Thanks.

In style.css

Chill35 commented 4 January 2007 at 14:31

In style.css,

Maybe you can put the CSS at the bottom of the page, the CSS that you typed in your first post. At the bottom of the page so that it gets more specificity. And add the three rules below :

li.leaf {
list-style-image: none;
list-style-type: none;
background: url(plus.gif) no-repeat left top;
background-position: 0 .2em;
padding-left: /*width of picture here in pixels*/
margin-left:0px;
}
ul.menu {
margin-left:0px;
padding-left:0px;
}

To display code on Drupal.org, put your code between <code> and </code>
If it's php, use <?php and ?>

Let us know.

Caroline

THANK YOU!!

205 CTT commented 4 January 2007 at 17:59

THANK YOU!!! thank you thank you - that solved it. I put ul. menu margin-left and padding-left to -5px and then the empty bullet space was gone and away. Great!!!!

So many thanks for kind help :-)

One last thing - could you explain me what the difference is of px and em?

Thanks
Regards Jakob

Great stuff

Chill35 commented 4 January 2007 at 18:54

Sure I can help. By the way I am glad that negative margin got rid of that space there...

Now pixels end em.

Pixels is fixed. It will give you a fixed width, height or size that will not change when you resize text in the browser. Exception to this that I know of is Firefox that will resize text for which a font-size in pixels has been specified, if the "user" resizes the text from the browser's menu.

Em is a little more complicated...

- em is the same as percentage : 1.2em is equal (means the same as) 120%.
- em (and percentage) is something that is inherited

In addition to the browser's initial font size setting, ems can inherit size information from containing tags. A type size of .9em would make text about 14 pixels tall on most browsers with a 16 pixel base size. But if you have a <p> tag with a font size of .9ems, and then a <strong> tag with a font size of .9ems inside that <p> tag, that tag's em size isn't 14 pixels, it's 12 pixels (16 x .9 x .9). So keep inheritance in mind when you use em values.
From CSS Missing Manual (readable on Safari). (Most excellent book.)

That's for text.

When em is used for width, height and positioning (top, left...etc.) it is relative to the text size in that element.

For example, let's say that for some element... (for example, a div element), we use this rule :

height: 20em;

Here is what CSS Missing Manual says (bold is my emphasis) :

Pixels are, well, pixels. They [...] create an exact width or height that doesn't change. An em is the same as the text size for the styled element. Say you set the text size to 24px; [one] em for that style is 24px, so if you set the width to 2em, then it would be 2x24 or 48 pixels. If you don't set a text size in the style, the em is based on the inherited text size.

So in in our example, if the text size is 20px inside that div element, and the height of the div element is 20em, then its height in the browser will be 20px times 20 = 400px.

I am sort of in a rush now, so I will come back with examples later...