SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 75
  1. #26
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It may be necessary in order to increase the selector's specificity, to make the declaration override another declaration in another rule that affects the same element(s). For instance, if you had another rule like this,
    Code CSS:
    .section ul {list-style-type:square}

    If your ul with class="nobullet" resides in an element with class="section", your declaration (2) will have no effect, whereas declaration (1) will, provided that the rule appears later in the style sheet.
    Er. For the CSS don't you mean "ul.section"? Because <ul class="section" wouldn't be correct for what you had (or maybe I'm just tired).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  2. #27
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    Er. For the CSS don't you mean "ul.section"?
    No.

    Let's say you have these CSS rules,
    Code CSS:
    .section ul {list-style-type:square}
    .nobullet {list-style-type:none}

    Then you have this markup,
    Code HTML4Strict:
    <div class="section">
      <ul class="nobullet">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
      </ul>
    </div>
    Your list items will have square markers, even though the list has class="nobullet". The reason is that the first rule has higher specificity (0,0,1,1) than the second (0,0,1,0).

    In this case you could change the selector in the second rule to ul.nobullet to increase its specificity to 0,0,1,1. Since the second rule comes after the first rule, it will be applied.

    My point was that one reason for including an explicit type selector in this type of rules is to increase the selector's specificity.
    Birnam wood is come to Dunsinane

  3. #28
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If they were bad enough to put .ul_nobullet, they'd probably have .ol_numbers

    I include the element type if I'm using it on a particular tag... much easier when scanning the stylesheet quickly. I also have everything upfront, so I know whether I need to re-use that class or not however, which is a different scenario to not knowing what'll be on other pages.

  4. #29
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sleep deprovation. I thought that the HTML was set up like <ul class="section">.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #30
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just on another note, I often use more than one class on the body tag when I am styling menu lists. The list can be the same html on each page but styled differently on each page by using those classes. Very handy.

  6. #31
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hello A(a)rem, nice to see you came over here. Love my post count?

    Anyway shouldn't just one class on <body> be sufficient? Why would you need 2 or more classes for a page?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #32
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They can be used independently for different things. For instance, one class can be used to describe the subsection of the site where the page is (for highlighting the current nav menu item) while another can indicate whether the page has a column of related information.
    Code HTML4Strict:
    <body class="news related">
    Code CSS:
    .home #home,
    .news #news,
    .about #about
    {
      /* style for current nav menu item */
    }
     
    #wrapper {margin:0 0 0 12em}
    .related #wrapper {margin-right:14em}

    Doing this with a single class will require several different classes (six for the simple three-section site in my contrived example) and will lead to severely and unnecessarily bloated CSS.
    Birnam wood is come to Dunsinane

  8. #33
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    They can be used independently for different things. For instance, one class can be used to describe the subsection of the site where the page is (for highlighting the current nav menu item) while another can indicate whether the page has a column of related information.
    Yes, that's what I use it for. Nicely put. It's so beautifully efficient, I love this method.

  9. #34
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    Love my post count?
    Yes, yours is much bigger than mine. Happy?
    I'm figuring to spend more time here, where there are more experts, thus more to learn. And besides, I live round the corner from SP and know some of its people, so it makes sense to use it.

  10. #35
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In all the coding sites I've done I have never done classes on body tag. I used to find it redundant..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #36
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It just allows for come very efficient coding. Look at the Happy Cog site, for example. Click on News, for example, and on the news page the News tab is white. Yet the menu code remains the same. Doing this means you can use php includes on menus, yet have a menu styled differently on each page.

  12. #37
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes lol. I love this more because I can act myself, not a 60 year old man. Hell there are like 4 Kravvitz's here.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #38
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Aarem View Post
    It just allows for come very efficient coding. Look at the Happy Cog site, for example. Click on News, for example, and on the news page the News tab is white. Yet the menu code remains the same. Doing this means you can use php includes on menus, yet have a menu styled differently on each page.
    I use simple PHP to add a class to the current page item.

  14. #39
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    I use simple PHP to add a class to the current page item.
    Yes, that's another option. How do you set it up? I haven't done it before.

  15. #40
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Aarem View Post
    Yes, that's another option. How do you set it up? I haven't done it before.
    Two options.

    Function
    PHP Code:
    <?php
        
    function currentPage($page) {
            
    $file basename($_SERVER['SCRIPT_NAME']);
            
    $file substr($file0, -4);
            if(
    $file==$page) echo ' class="current"';
        }
    ?>
    Basically, gets the page name, strips the .php, then if the page called is the current page it echos class="current".

    <li<?php currentpage('index'); ?>><a href="index.php">home</a></li>

    Name

    At the top of every page give it a name. Such as $page="about". Then call it in the menu:

    <li<?php if($page=="about") echo ' class="current"'; ?><a href="#">About</a></li>

    Works nice for simple sites. I always use PHP includes for easy maintainability. Not the best solution for anything that's big as it's all done manually, in that case a CMS is better.

  16. #41
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great answer! Thanks so much rochow. I'm still learning PHP, but will digest this bit by bit. The name option looks closest to the CSs option, but on first inspection, looks even simpler. Well done!

  17. #42
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whats the differenence between these two ?

    ul.nobullet {...}

    .nobullet ul {...}

    Im confused

  18. #43
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,146
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    first selects all unordered lists with a class name equal to nobullet. The second selects all unordered lists that are a descendant of any element with a class name nobullet.

    <ul class="nobullet">
    </ul>

    <div class="nobullet">
    <ul
    </ul>
    </div>

  19. #44
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    whats the differenence between these two ?

    ul.nobullet {...}

    .nobullet ul {...}

    Im confused
    ul.nobullet means that a <ul> has a class of nobullet.

    Example: <ul class="nobullet">

    .nobullet ul means that a parent element of <ul> has a class of nobullet.
    Example: <div class="nobullet"><ul>....</ul></div>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #45
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    .nobullet ul means that a parent element of <ul> has a class of nobullet.
    To be specific, it means that an ancestor of the <ul> has a class of nobullet. It can be the parent, a grandparent, a grand-grandparent, etc.
    Birnam wood is come to Dunsinane

  21. #46
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's just my way of talking, I always say parent element when I refer to an acestor.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #47
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just thought I'd clarify things, in case someone who doesn't talk the way you do happens to find this thread some time in the future.
    Birnam wood is come to Dunsinane

  23. #48
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Ottawa, Canada
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've never used this before, and I totally forgot that I was able to do this!
    Hopefully I can implement this the next time I'm coding something up!

    Thanks for reminding me! :P

  24. #49
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I never say ancestor element because trying to remember grandparent element, etc would confuse me. I KNOW what I mean by parent element so if in the future you hear me talking like this treat it as a speaking disorder .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  25. #50
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    trying to remember grandparent element, etc would confuse me.
    How do you refer to your own grandparents then? Mom and Dad?


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
  •