SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Basic question classes and li

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dancing-mathilde View Post
    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..}

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

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

    Thanks,
    Mathilde

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dancing-mathilde View Post
    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.

  5. #5
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    <ul id="contaclist">
    Is that the real code or a typo as you have spelled contactlist incorrectly?

  7. #7
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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;
    }

  9. #9
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    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.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  11. #11
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #13
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by ScallioXTX; Apr 2, 2011 at 12:04. Reason: Fixed code tag

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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...

  16. #16
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Really thanks
    Mathilde


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •