Jump to content
Stef's Coding Community
Sign in to follow this  
catfish

Div Classes And Padding

Recommended Posts

Hello, I'm trying to build these boxes using the div class and within the boxes an image header, a title and some text content. I want my image to be at the top of the box with no padding around it. I'm actually using wordpress but the silly editor window keeps putting paragraph tags in where I did not. Strange, it seems to look pretty good and all of a sudden it changes on me. Is this possible? Anyways here is my code that I'm using.

.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:6px 10px 4px 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;
}

 

[one-third-first]
<div class="box">

<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" />
<h3>Massage</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
<ul>
<li>Back Massage - $25
<em>25 minutes</em></li>
<li>Body Massage - $55
<em>60 minutes</em></li>
</ul>
</div>
<div class="box">

<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" />
<h3>Facials</h3>
Ladies and gentlemen too! Relax with a cleanse and tone & mask. A relaxing facial massage, hot towels and moisturizer. 50 minutes
<ul>
<li>Aromatherapy Facial - $60.00</li>
</ul>
</div>
[/one-third-first]

 

I keep removing the <p></p> but when I go back and view the html code I see this again. paragraph tags inserted around my columns and my images??

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...