WordPress.org

Support

Support » Themes and Templates » [Resolved] General CSS Questions

[Resolved] General CSS Questions

  • here is my current css

    .coach {width:310px; padding:5px; height:120px; float:left;  text-align:center; background:#eee; /*border-radius:8px;*/ border:1px solid #ccc; margin:0 8px 8px 0;}
    
    .coach img {float:left; height:118px; width:90px; border-radius:8px; box-shadow:0px 2px 3px #888888; margin-right:5px}
    
    .coach img a {float:left; border:none; padding:0;}

    so the code above displays a business card style listing for all coaches on the coach page. When a user clicks the image, they are taken to the coach’s bio page. On the bio page, I want to maintain just the img class with rounded corners. What is the best method to do this?

    I found this explanation on stackoverflow:

    a .someclass
    Selects any (descendant of an 'a' tag) that has a class of 'someclass'
    
    <a href="#example">
        <span class="someclass">...</span>
    </a>
    While
    
    .someclass a
    Selects any (descendant of a tag with a class of 'someclass') that is an 'a' tag.
    
    <div class="someclass">
        <a href="...">...</a>
    </div>
    And
    
    a.someclass /* Note absence of spaces */
    Selects any 'a' tag with a class of 'someclass'.
    
    <a href="..." class="someclass">...</a>

    When I use my current code, the image on the bio page strips the rounded corners.

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Resolved] General CSS Questions’ is closed to new replies.
Skip to toolbar