CODEWITHSUNDEEP
htmlcsstwitter-bootstrapblogs
Sharan Mohandas
Sharan Mohandas

Reputation: 871

Blog List Div - Solve the CSS

I have created the CSS for Listing the Programs (Like a Blog List). However there's some problem with my code which i couldn't correct. Given Below are the piece of code

<div class='customHeight'>
  <div class='container'>
    <div class='row'>
      <div class='col-sm-3 custom'>
        <img src='images/thumb_yoganidra.jpg' class='myImage' height='100'>
        <div class='dateHolder1'>".$c_dur."
          <br>Days</div>
      </div>
      <div class='col-sm-9 custom2'>
        <div class='row '>
          <h2>".$row['program']." |  ".$row['info']."</h2>
        </div>
        <div class='row bottomGap'><i class='fa fa-map-marker fa-lg'></i><font size='+1' color='#9E5E00'><em> Venue : Karama & Deira</em></font> / <i class='fa fa-calendar'></i><font size='3' color='#663333'> Starts : ".$sta."</font>  <i class='fa fa-calendar'></i><font size='3' color='#663333'> Ends : ".$end."</font> 
        </div>
        <div class='row bottomGap'>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
        </div>
        <div class='row'>
          <a href='viewprogramme.php?id=".$row[' pid ']."' role='button' class='btn btn-margin btn-warning  '><i class='fa fa-info-circle fa-lg'></i> &nbsp;View Programme</a><a href='#' role='button' class='btn btn-margin btn-success  '><i class='fa fa-check-circle fa-lg'></i> &nbsp;Apply</a>
          <a
          href='viewprogramme.php?id=".$row[' pid ']."' role='button' class='btn btn-margin btn-info  '><i class='fa fa-clock-o fa-lg'></i> &nbsp;Schedule</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS for the Same

*
.bottomGap{ margin-bottom:5px; }

.custom {
    background-color: #ccc;
    height:200px; 
}
.custom2 {
    padding-left:30px; 
}

.customHeight{
 height:200px;
 margin-bottom:20px;   

}
.dateHolder1{
    height:80px;
    width:50px;
    background-color:#F29300;
    padding-top:10px;
    text-align:center;
    position: absolute; 
}
.imgbox{
    height:200px;
    width:200px;
}

#myImage {
    zoom: 1;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: 100%;
    max-width: 100%;
}

I want the blog image to Fill in the container (ie col-sm-3 : Bootstrap CSS). But it exceeds the column. Also i would like to overlay the dateHolder1 on the image.

I am posting a screenshot of the current one enter image description here

What I Need to Have enter image description here

What it looks like when i use large images. It exceeds the bootstrap col-sm-3 div even though i set width = 100%. How could i fill the container with the image (No problem if zoomed, but would like to maintain aspect ratio) enter image description here

Upvotes: 0

Views: 163

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://www.bootply.com/vF54XVWRVn

you will need to make the following changes

.custom {
  background-color: #ccc;
  height:200px; 
  padding:0; /** add padding to remove extra space **/
  position:relative; /** for aligning date **/
}

/** addding height for image **/
.custom img{
  width:100%;
  height:100%;
}

.dateHolder1{
  height:80px;
  width:50px;
  background-color:#F29300;
  padding-top:10px;
  text-align:center;
  position: absolute; 
  top:0; /** for aligning top **/
  left:30px; /** for aligning top **/
}

Upvotes: 0

Stef
Stef

Reputation: 341

Firstly, you need to use the graphic as background (rather an an image) in the div you want it to fill.

And then since I assume you want to make repeatable dynamic blog list items, you can add the background image as an inline style.

So, CSS add..

.custom {
background-size: cover;
}

HTML change...

...
<div class='col-sm-3 custom' style="background-image: url('images/thumb_yoganidra.jpg');"  >
     <div class='dateHolder1'>".$c_dur."
      <br>Days</div>
</div>
...

Upvotes: 1

Related Questions