SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with text blocks

    Hi,

    I used CSS design code (but not text) for 3 yellow/green text blocks from this site http://www dot moldtampa dot us/ halfway down page

    So, how and where do I add the appropriate CSS class defs to my site div id="mold-removal-highlights" & <span class="mold-facts">
    so it looks like like the blocks on that site.

    Please show me where I change code to control colors of these text blocks

    My site is www dot phoenixmoldremoval dot net and it uses the MystiqueR3 WP theme and these text blocks are on the homepage.
    I need to be able to have the text blocks in two colors like the moldtampa site.


    Any advice appreciated

    George

  2. #2
    SitePoint Enthusiast cgCody's Avatar
    Join Date
    Jul 2012
    Location
    Arizona, US
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The color in those columns is provided by a horizontally
    repeating background image. Wasteful design.

    A better structure would be:
    Code:
    <div class="wrapper">
       <div class="column">
          <h2>heading</h2>
    
          <ul>
             <li>list item</li>
             <li>list item</li>
             <li>list item</li>
          </ul>
       </div>
    
       <div class="column">
          <h2>heading</h2>
    
          <ul>
             <li>list item</li>
             <li>list item</li>
             <li>list item</li>
          </ul>
       </div>
    
       <div class="column">
          <h2>heading</h2>
    
          <ul>
             <li>list item</li>
             <li>list item</li>
             <li>list item</li>
          </ul>
       </div>
    </div>
    Then in your CSS, just style .column, .column h2, etc,
    with your desired effect.

    I'll get you started:

    Code:
    .wrapper {
       width: 0; /* Adjust to contain your side-by-side columns. */
    }
    .column {
       float: left;
       margin: 0; /* Adjust to your design. */
       width: 0; /* Adjust to your design. */
       background-color: green;
       overflow: hidden;
       border-radius: 10px;  /* note CSS3 properties are not fully supported. */
    }
    
    .column h2 {
       margin: 0;
       background-color: yellow;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As mentioned above the code for that section is a bit outdated and has no structure. You should be using heading tags (as shown above) and not spans for your headings. There is also no need to nest spans inside the list items. You can apply classes direct to the list item if needed - although you don't really need classes on each list anyway as you can target via context.

    If all the above has gone over your head then a quick fix would be to add this css:

    Code:
    .post-details table{border-spacing:10px}
    .post-details table td{
    background:red;
    }
    
    .mold-concerns{
    display:block;
    background:yellow;
    min-height:3em;
    margin:-10px -10px 0;
    padding:10px;
    position:relative;
    zoom:1.0;
    }
    However, you really should go to a more suitable structure as shown by cgCody above.


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
  •