Community Forums › Forums › Archived Forums › Design Tips and Tricks › paragraph and custom class padding
- This topic has 3 replies, 2 voices, and was last updated 10 years, 5 months ago by Susan Nelson.
-
AuthorPosts
-
November 21, 2013 at 4:04 pm #74788TracyMember
within a page of my website I am using the Genesis Easy columns plugin to create 3 columns on a full width page. In these columns I have created a class to style boxes that will contain an image header and then paragraph and list content. I want to have padding around my paragraph so it doesn't bump up against the side of the box but I don't want the padding around my image. I keep styling this and it looks fine and then when I do something else and look at the html it reverts back and places <p></p> tags around everything.. my columns ie; [one-third-first] and my images. why is this and can someone help me please. I don't know how to upload an image here.
I have installed the TinyMCE plugin so I can view this html. I keep removing the tags and updating.
<p>[one-third-first]</p><div class="box"><p><img class="aligncenter size-full wp-image-161" alt="massage-head" src="http://mirrahairlounge.com/wp-content/uploads/2013/11/massage-head.jpg" width="270" height="130" /></p><h3>Massage</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p><ul><li>Back Massage - $25<br /> <em>25 minutes</em></li><li>Body Massage - $55<br /> <em>60 minutes</em></li></ul></div><div class="box"><p><img class="aligncenter size-full wp-image-175" alt="facials_head" src="http://mirrahairlounge.com/wp-content/uploads/2013/11/facials_head.jpg" width="270" height="130" /></p><h3>Facials</h3><p>Ladies and gentlemen too! Relax with a cleanse and tone & mask. A relaxing facial massage, hot towels and moisturizer. 50 minutes</p><ul><li>Aromatherapy Facial - $60.00</li></ul></div><p>[/one-third-first][one-third]</p><div class="box"><p><img class="aligncenter size-full wp-image-163" alt="AdjWaxing-head" src="http://mirrahairlounge.com/wp-content/uploads/2013/11/AdjWaxing-head.jpg" width="270" height="130" /></p><h3>Waxing</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><ul><li>Brow - $15.00</li><li>Lip - $10.00</li><li>Chin - $10.00</li><li>Half Arm - $25.00</li><li>Full Arm - $30.00</li><li>Half Leg - $35.00</li><li>Full Leg - $50.00</li><li>Bikini - $28.00</li><li>Back - $40.00 and up</li></ul></div><p>[/one-third][one-third]</p><div class="box"><p><img class="aligncenter size-full wp-image-165" alt="eyes-head" src="http://mirrahairlounge.com/wp-content/uploads/2013/11/eyes-head.jpg" width="270" height="130" /></p><h3>Tinting</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><ul><li>Lash Tint $20.00<br /> <em>Gives your lashes more depth</em></li></ul></div><div class="box"><p><img class="aligncenter size-full wp-image-176" alt="nails_head" src="http://mirrahairlounge.com/wp-content/uploads/2013/11/nails_head.jpg" width="270" height="130" /></p><h3>Hand Care</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div><p>[/one-third]</p>
And this is my custom box style
.box{ border-radius: 5px; box-shadow: 0 1px 2px #ccc; background-color: rgba(206,132,133,0.5); height:auto; width:270px; margin-bottom: 20px; margin-top:0px; padding-top:0px; } .box p{ padding:10px; } .box ul li{ list-style-type: none; margin: 0 0 0 30px; padding: 0; } .box img{ margin-bottom:0; padding-bottom:0px; } .box h3{ text-align:center; color:#800000; font-size:24px; font-weight:bold; line-height:normal; margin:0; padding:0; }
November 25, 2013 at 4:45 am #75485Susan NelsonParticipantHi Tracy,
I think when you switch back and forth between the Visual and Text editors, code can get stripped out or changed like what you're seeing happen. Since you're already adding custom classes to your boxes, you could just go ahead and type the code for the columns, too.
Something like this:
<div class="one-third first box">
Your info here.
</div><div class="one-third box">
Your info here.
</div><div class="one-third box">
Your info here.
</div>Let me know if you need help with it and I'll be happy to explain further. 🙂
November 25, 2013 at 1:01 pm #75546TracyMemberSusan, thankyou very much for your reply. I did actually get it to work but honestly at the moment don't remember what I ended up doing. Thanks anyways
November 25, 2013 at 1:02 pm #75547Susan NelsonParticipantI'm glad you got it working! 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.