Need help with text blocks

HTML & CSS
1

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

The color in those columns is provided by a horizontally
repeating background image. Wasteful design.

A better structure would be:


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


.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

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:


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