I want to display 2 columns of images using "float:left", and I dunno why the 3rd image is on the right.
See screenshot:http://dl.dropbox.com/u/72686/imagesFloat.png
See HTML:
<div class="field-item odd">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%202.png" title=""><br>
<span>description1</span> </div>
<div class="field-item even">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%203.png" title=""><br>
<span>description2</span> </div>
<div class="field-item odd">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%204.png" title=""><br>
<span>description3</span> </div>
<div class="field-item even">
<img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%205.png" title=""><br>
<span></span> </div>
see CSS:
.field-field-image .odd {
padding-right:20px;
}
.field-field-image .even {
padding-left:20px;
}
.field-field-image .field-item {
float:left;
}
thanks
It is on the right because there is room beside the first div.
Use clear: left on each element you want to start a new row.
Add margin-bottom:2px to the third image,see if the image goes anywhere. If not margin-bottom, margin-top then.
Related
I am working on Bootstrap website. I wanted to place text in the right side of the car. I am getting the output as:
I wanted to place text "hello" in the right side of the Car.
Code:
<div class="row text-center">
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt=""/>
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt=""/>
<figcaption>Hello</figcaption>
</figure>
</div></div>
CSS:
.main_auto {background:url(images/category/auto.gif) no-repeat;
background-size: 35% 75%;
}
.main_service {
width:254px;
height:136px;
float:left;
padding:20px 20px 0 90px;
}
I am new to Bootstrap.
You can use css position property. Declare image css position property as relative and text css position property as absolute.
Code:
<div class="row text-center">
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt="" class="img-disp" />
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure>
<img src="images/category/auto.gif" alt="" class="img-disp" />
<figcaption class="main_service">Hello</figcaption>
</figure>
</div>
</div>
CSS:
.img-disp{
position: relative;
}
.main_service {
position: absolute;
....
}
Than you can adjust your text position by adding top and left margin to .main_service class.
You can see result here : https://jsfiddle.net/8kcsryqy/
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag
How do I change the width of the <a> tag below exactly as the test_small.jpg image width?
<div class="row">
<div class="col-md-5">
<a class="fancybox thumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
</div>
<div class="col-md-7">
...
</div>
</div>
I tried using:
<a class="fancybox thumbnail" style="width: auto" href="/assets/images/gallery/test.jpg">
without success.
Thanks.
EDIT: http://www.bootply.com/PGsq7xJeOt
You could just add an auto width. You will need to specify display: block for this to take effect.
.fancybox.thumbnail {
display: block;
width: auto;
}
I'd add class to that a .. for example: .customThumbnail
HTML:
<a class="fancybox thumbnail customThumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
CSS:
a.customThumbnail {display: block; width: 200px;}
You can use any width here (within col-md-5), since your image is responsive - it will adjust.
Also, try resetting padding (as the "a" might have some padding around it).
a.customThumbnail {display: block; width: 200px; padding: 0}
Although, a JSFiddle would be the best :)
I have an active example on ToWho.
<div class="row">
<div class="col-md-5">
<a href="/assets/images/gallery/test.jpg">
<div class="content"> <!-- This div isn't necessary, but is helpful for organizing -->
<img class="img-responsive" src="test_small.jpg" alt="Small Images">
</div>
</a>
</div>
<div class="col-md-7"></div>
</div>
Why it's not working is hard to solve without a fiddle. The anchor shouldn't need anything special to make it take up the space of the div, especially since it's in a Bootstrap grid element.
Try to make a new class giving it width:100% or make it an inline style.
<div class="row">
<div class="col-md-5">
<img class="image-responsive" style="width:100%;" src="test_small.jpg"/> </div>
<div class="col-md-7">
...
</div>
</div>
I am sure there is a simple solution to it.. but I have some markup that is overlapping. I have a img.pull-left and a blockquote. The img is currently sitting in between the grey left border and the block quote. Markup is pretty simple:
<div class='container'>
<div class='row'>
<div class="entry-content clearfix">
<a class="pull-left" href="#noop" title="The first post">
<img width="70" height="47" src="logo-lw.png" class="inline attachment-thumbnail wp-post-image" alt="logo-lw"/>
</a>
<blockquote>
<p>Some Quote...</p>
</blockquote>
</div>
</div>
</div>
Here is a fiddle showing the issue
Add inline-block to the blockquote:
blockquote{
display: inline-block;
}
This is also a good use case for the bootstrap media object.
<div class="positions">
<div class="main" style="clear: both;">
<div class="mainC">
<a class="news" href="#"><img src="salad.jpg" width="105" alt="salad"/></a>
</div>
</div>
<div class="foot" style="clear: both;">
<h1 class="news">Salad</h1>
</div>
</div>
Is it possible to change the color of the "Salad" link, when the parent "positions" div is rolled over? Thanks in advance for any help.
Use Css psuedo class :hover:
.positions:hover h1.news a
{
color:red;
}
-- SEE EXAMPLE --