Basic question classes and li

HTML & CSS
1

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


<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:


#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

2

Why the extra div?

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


<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:


#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.


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:


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

Paul,

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

Thanks,
Mathilde

4

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

5

This is what I have (and not working)


		<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)


/* 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


/* 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

6

<ul id=“contaclist”>

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

7

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

8

You still have contaclist in your code and not contactlist.


<ul id="contaclist">

It should be:


<ul id="contactlist">

In your global rule you have:


ul {
  list-style-image: none;
}

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

You probably meant to do:


ul {
  list-style: none;
}
9

:headbang:

Yes I looked at css and not html.

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

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.

10

The path is here:


li.telephone {
  background:[B] url("../i[/B]mages/icons/icon-post.png") no-repeat scroll 0 0 transparent;
}

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

11

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

12

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.

13

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)

14

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.

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

15

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:


ul#contactlist li {
  float: left;
 [B] margin: 5px 10px 5px 0;[/B]
 [B] padding-left: 25px[/B];
  text-align: left;
  [B]width: 139px;[/B]
}
[B]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;
}
[/B]
etc...
16

Paul,
Really thanks
Mathilde