twitter bootstrap - Responsive Gallery: overlayed captions will not line up to edges of images -

-

i putting simple responsive gallery using twitter-bootstrap.

i have captions appear overlayed onto images. should aligned bottom, right corners of each image.

i cannot them align, exceed edges of images.

html

    <div class="container">  <div class="row ">   <ul>          <li class="col-md-8 image">           <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />           <div class="desc">             <h2>caption text here</h2>           </div>         </li>   </ul> </div>

css

    ul {   list-style-type: none;   }  img {   padding-bottom: 20px; }  div.desc{     background-color: #000;     bottom: 0;     color: #fff;     right: 0;     opacity: 0.5;     position: absolute;     width: 80%;     padding: 0px; }  .image {   width:100%;   padding:0px;   }

you can see example here although due being embedded on jsfiddle appears switching small screen mode:

but can still see how captions exceed image edges.

i captions line image edges.

from can tell, captions aligning width of twitter-bootstraps .col-md-8 class. has padding create column gutter.

the solution postion margin values

for this, using negative(-) pixel in margin-top position

    <div class="container">  <div class="row ">   <ul>          <li class="col-md-8 image">           <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />           <div class="desc">             <h2>caption text here</h2>           </div>         </li>         <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpgg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>        <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>   </ul> </div>  <div class="row">   <ul>       <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>       <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>       <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>   </ul> </div>

css:

ul {  list-style-type: none;  }  img {  padding-bottom: 20px; }  div.desc{     background-color: #000;  margin-top: -72px; /*this trick*/ color: #fff; opacity: 0.5; width: 80%; } .image {  width:100%;  padding:0px; }

Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more