Basic question classes and li

**dancing-mathilde** · Mar 31, 2011 05:03

Something I always mix is the styling of a ul list:

HTML Code:

<div id="contactlist">
<ul>
<li class="tel">text</li>
<li class="tel-int"><a href="">text</a></li>
<li class="facebook"></li>
</ul>
</div>

That was the most simple part

Now the css:

Code:

#contactlist {
                  width:348px;
                  padding:0;
                  margin:0;
                  }

#contactlist ul {here styling}  

#contactlist li.tel {here styling}

What with li a ?

Is the above css in the right way?

What when I want to make the link as well?

Thanks for the help

**Paul O'B** · Mar 31, 2011 06:18

Originally Posted by dancing-mathilde

Something I always mix is the styling of a ul list:

HTML Code:

<div id="contactlist">
<ul>
<li class="tel">text</li>
<li class="tel-int"><a href="">text</a></li>
<li class="facebook"></li>
</ul>
</div>

That was the most simple part

Why the extra div?

If there is no special reason for it then lose it.

Code:

<ul id="contactlist">
    <li class="tel">text</li>
    <li class="tel-int"><a href="">text</a></li>
    <li class="facebook"></li>
</ul>

Unless each list item is different then lose the classes on the list also.

Now the css:

Code:

#contactlist {
                  width:348px;
                  padding:0;
                  margin:0;
                  }

#contactlist ul {here styling}  

#contactlist li.tel {here styling}

What with li a ?

Is the above css in the right way?

What when I want to make the link as well?

Thanks for the help

With the id now on the ul you can start with.

Code:

ul#contactlist {
    width:348px;
    padding:0;
    margin:0;
    list-style:none;
}

I use ul#contactlist rather than #contactlist to remind me when looking at the stylesheet that this element is a ul and not a div. (I would never use div#contactlist though.)

Then:

Code:

#contactlist li{styles etc..}
#contactlist a{styles etc..}

**dancing-mathilde** · Mar 31, 2011 06:24

Paul,

Yes I have to give every <li> a class because of a different background image as icon.

Thanks,
Mathilde

**Paul O'B** · Mar 31, 2011 07:03

Originally Posted by dancing-mathilde

Paul,

Yes I have to give every <li> a class because of a different background image as icon.

Thanks,
Mathilde

Then that's fine and just target the anchor via the lists class if it needs to be different from other anchors also.

**dancing-mathilde** · Mar 31, 2011 07:41

This is what I have (and not working)

HTML Code:

		<div class="rt-module-surround">
					<div class="rt-module-inner">
						<div class="module-content">
		                	<ul id="contaclist">
<li class="telephone">phone number</li>

<li class="telephone-int">phone numbers</li>
<li class="fax">lorum ipsum</li>
<li class="email">lorum ipsum</li>
<li class="form">lorum ipsum</li>
<li class="facebook">lorum ipsum</li>
<li class="twitter">lorum ipsum</li>
<li class="linkedin">lorum ipsum</li>
<li class="youtube">lorum ipsum</li>
</ul>							<div class="clear"></div>

						</div>
					</div>

The css (for first li class= telephone)

Code:

/* Extra Contact List right column */
#contactlist ul {width:348px;float:left;link-style-type:none;margin:0;padding:0;}
#contactlist li.telephone {float:left;width:45%;margin:10px 10px 10px 0;padding:0;text-align:left;background-image:url(media/system/images/telephone.png) no-repeat;}

Mathilde

Code:

/* Extra Contact List right column */
ul#contactlist {width:348px;float:left;link-style-type:none;margin:0;padding:0;}
#contactlist li.telephone {float:left;width:45%;margin:10px 10px 10px 0;padding:0;text-align:left;background-image:url(media/system/images/telephone.png) no-repeat;}

edit: coding

**Paul O'B** · Mar 31, 2011 08:51

Is that the real code or a typo as you have spelled contactlist incorrectly?

**dancing-mathilde** · Mar 31, 2011 09:04

That was a typo

Really not understand why it is not working.

1. Cannot remove ul standard list with list-style-type:none;

2. Cannot make the icons work as well

the files located:
/public_html/templates/rt_panacea_j15/images/icons/here the png files
/public_html/templates/rt_panacea_j15/css/here css file i am using

sent you pm with url

**Paul O'B** · Mar 31, 2011 09:38

You still have contaclist in your code and not contactlist.

Code:

<ul id="contaclist">

It should be:

Code:

<ul id="contactlist">

In your global rule you have:

Code:

ul {
  list-style-image: none;
}

There is no default image so that rule is not needed.

You probably meant to do:

Code:

ul {
  list-style: none;
}

**dancing-mathilde** · Mar 31, 2011 10:10

Yes I looked at css and not html.

Still I get crazy from the background image. It is not loading at all.

Code:

ul#contactlist {width:348px;float:left;list-style:none;margin:0;padding:0;}
li.telephone {float:left;width:50%;margin:10px 10px 10px 0;padding:0;text-align:left;background-image:url(images/icons/icon-post.png) no-repeat;}
li.telephone-int {float:left;width:50%;margin:10px 10px 10px 0;padding:0;text-align:left;background-image:url(media/system/images/telephone.png) no-repeat;}
li.fax {float:left;width:50%;margin:10px 10px 10px 0;padding:0;text-align:left;background-image:url(media/system/images/fax.png) no-repeat;}

What I missed here? I changed the url(path to png) in all possible ways. Really not see what I can do more.

**Paul O'B** · Mar 31, 2011 10:43

The path is here:

Code:

li.telephone {
  background: url("../images/icons/icon-post.png") no-repeat scroll 0 0 transparent;
}

You needed to go back a directory as per your other images.

**dancing-mathilde** · Mar 31, 2011 11:20

LOL

When I change the css in the css files, the changes not visible.

When in Firefox and webmastertols/edit css => changes visible. When I close this again, the icons gone again .....???????????

+ in css on server the scroll is with spaces after no-repeat
In firefox edit css, the scroll is no-repeatscroll

Mathilde

**Paul O'B** · Mar 31, 2011 11:59

Don't use edit css to check the path use Firebug. Edit css does something to the path.

You just need the correct path to the file as I have shown above. As long as the image exists then it will be shown.

You already have other styles using the same path so just copy the format from the other styles in the same css file.

**dancing-mathilde** · Mar 31, 2011 12:10

Thanks,

Finally working, seems also some problem with the joomla css files. They not uploaded well.

I removed the scroll in the coding. Not know what that is doing and also could not get the space in the file between no-repeat and scroll.

Hope I can manage from here

Mathilde (thanks again)

**dancing-mathilde** · Apr 1, 2011 01:28

Good morning,

some info about the sizes:

width of box to work in : 348px
img. sizes 16px * 16px

List has to end up in two columns with break after 5th <li>

Two the same CSS lines gives a different look.

Code:

li.telephone {float:left;width:179px;margin:5px 10px 5px 0;padding:0;text-align:left;background:url("../images/icons/telephone.png") no-repeat 0 0 transparent;}
li.telephone-int {float:left;width:179px;margin:5px 10px 5px 0;padding:0;text-align:left;background:url("../images/icons/telephone.png") no-repeat 0 0 transparent;}

How I calculate the width for two columns:

1/2 of 348px - (img width + margin) Here is 179 - (16+10)
text is over image and cannot move it. (or the server is renewing files real slow)

Probably I focus at the wrong piece of CSS

Thanks
Mathilde

**Paul O'B** · Apr 1, 2011 13:02

HI,

You have 348px width to play with which means each half needs to fit inside 174px. Inside that 174px width you need to make room for 25px left padding and 10px right margin which means the list must be 134px wide at most.

Don't define all properties over and over again as the list uses the same properties for each but only the image changes.

e.g.Do this:

Code:

ul#contactlist li {
  float: left;
  margin: 5px 10px 5px 0;
  padding-left: 25px;
  text-align: left;
  width: 139px;
}
li.telephone {
  background: url("../images/icons/telephone.png") no-repeat scroll 0 0 transparent;
}
li.telephone-int {
  background: url("../images/icons/telephone.png") no-repeat scroll 0 0 transparent;
}

etc...

**dancing-mathilde** · Apr 1, 2011 14:32

Paul,
Really thanks
Mathilde

User Tag List

Thread: Basic question classes and li

Thread Tools

Display

Basic question classes and li

Bookmarks

Bookmarks

Posting Permissions