How do I create a border inside of a post?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Kyle Numann

    (@kyle-numann)

    11 years, 5 months ago

    Well, you could add this html using the html editor (instead of the visual editor)

    <div class="video_callout">
    <div class="callout_text">
    <span class="label">Video Duration</span>
    <span class="duration">60 Minutes</span>
    </div>
    <div class="callout_image">
    <img src="http://www.mysite.com/image.jpg">
    </div>
</div>

    And then style it with css such as this

    .video_callout {
height:150px;
width:300px;
border-top:3px solid black;
border-bottom:3px solid black;
}
.callout_text {
width:50%;
text-align:center;
}
.callout_image {
width:50%;
}
.callout_text span.label {
font-style:italic;
color:black;
}
.callout_text span.duration {
color:red;
}

    Thread Starter jennifer2010

    (@jennifer2010)

    11 years, 5 months ago

    Thank you for the response, Kyle!

    I implemented the above directions but unfortunately the outcome was not that good 🙁

    It looks like this now:
    http://img716.imageshack.us/img716/2823/newlb.jpg

    Here’s my css code:

    .video_callout {
height:150px;
border-top:3px solid;
border-bottom:3px solid;
border-color: #b2b2b2;
}
.callout_text {
width:50%;
text-align:left;
}
.callout_image {
width:100%;
text-align:right;
}
.callout_text span.label {
font-style:italic;
font-size:40px;
color:black;
}
.callout_text span.duration {
color:red;
font-size:40px
}

    Any ideas!?

    Thanks so much!

    UPDATE: I fixed it (for the most part) using float:left on text and float:right on image – thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I create a border inside of a post?’ is closed to new replies.