Need a little assistance.
Click here and scroll down to Print Marketing block...those 4 blocks have to be side by side but the 4th one is going down for some reason...
Here is the block of code for that area
<div class="eleven columns bottom-4">
<h3 class="title">Print Marketing</h3>
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1a.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
<!-- item 2 -->
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1b.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
<!-- item 3 -->
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1a.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
<!-- item 4 -->
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1b.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
</div>
CSS is as follows..
.container .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
}
.container .five.columns {
width: 280px;
}
.container .eleven.columns {
width: 640px;
}
I have tried many things on it. Even gave them an inline style which doesnt work either...Any ideas on this because all of them have the same class that is applied to them but one block whacks all of the rest.
Let me know thanks.
You could always try to nest the divs within a table, if you're trying to align them to a grid like that.
On the third div block, you need to add clear:left; (either inline or via a class).
Related
i have 4 different icons and based on which icon i hover i want to change the background image in a div. The html is like so
<div class="col side">
<i id="icon1"></i>
<i id="icon2"></i>
<i id="icon3"></i>
<i id="icon4"></i>
</div>
<div class="col">
<img src="img1" id="img1" class="content" alt="" />
<img src="img2" id="img2" class="content" alt="" />
<img src="img3" id="img3" class="content" alt="" />
<img src="img4" id="img4" class="content" alt="" />
</div>
So when i hover icon1 i want to display img1 and so on. I know how to do it with jquery/javascript but is it possible with pure css?
it is not possible but try with adding background image on hover to each icon
#icon1:hover
{
background: url("path to img1");
}
like wise add this to all icons but i think it will result in bad alignment on hover
You can try some thing like
.content {
display: none;
}
#icon1:hover + #img1{
display: block; // or inline-block
}
#icon2:hover + #img2{
display: block;
}
#icon3:hover + #img3{
display: block;
}
#icon4:hover + #img4{
display: block;
}
It can be done with changed html-structure as someone has already mentioned in the comments. For example,
.content {
display: none;
}
#icon1:hover ~ .col img#img1 {
display: block;
}
#icon2:hover ~ .col img#img2 {
display: block;
}
<div class="col side">
<i id="icon1">First Icon</i> <i id="icon2">Second Icon</i>
<div>Images:</div>
<div class="col">
<img src="https://themcrazycats.files.wordpress.com/2020/11/1ce50-b8480db4-5bda-4912-84e4-3f8d79cae545.jpeg?w=400&h=200&crop=1" id="img1" class="content" alt="" />
<img src="https://themcrazycats.files.wordpress.com/2020/11/a66f0-4c055b18-860a-46b6-95a2-967b72e3547b.jpeg?w=400&h=200&crop=1" id="img2" class="content" alt="" />
</div>
</div>
The key here is to make possible usage of css ~ selector by placing .col inside .side. Why? There is no parent selector as of now in css as pointed out here.
HTML :
<a href="">
<img class="center" src="">
</a>
CSS :
.center { display: block; margin: 0 auto; }
That centers the image, but the problem is any extra white-space around the image is also clickable. Is there a way to fix that?
(Images vary in size)
You could just wrap a div around it and center the that div rather than the image itself.
<div class="center">
<a href="">
<img src="">
</a>
</div>
And then add a style definition for the div.
.center { margin: 0 auto; }
The only option I see would be putting the anchor in a div (non -clickable, with the size and style of your current anchor) and sizing the anchor based on the image:
HTML:
<div class="container">
<a href="" class="anchor">
<img src="http://placehold.it/350x150" />
</a>
</div>
CSS:
.container {
width: 100%;
text-align:center;
}
JSFIDDLE:
http://jsfiddle.net/Atumra/0jncgxkb/
How about doing this
<a href="" class="center">
<img src="">
</a>
For better understanding I'm updating the entire question.
I'm using bootstrap 3 and the carousel component, however, one of the pages of the carousel contains an image that needs to be positioned in the bottom of the section tag without resizing the container.
Here is the code I'm using:
<section id="header-slider" class="section carousel slide" data-ride="carousel" style="padding-bottom: 0;">
<!-- Start Slider Navigation -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#header-slider"></li>
<li data-slide-to="1" data-target="#header-slider" class=""></li>
</ol>
<!-- End Slider Navigation -->
<div class="carousel-inner">
<div class="item row active">
<div class="col-xs-5 hidden-sm">
<img src="..." style="margin-top: -40px">
</div>
<div class="col-xs-7">
<h1>...</h1>
<p>...</p>
</div>
</div>
<div class="item row">
<div class="col-xs-8">
<h1>...</h1>
<p>...</p>
</div>
</div>
</div>
</section>
Here is a running page with the problem: www.remotepark.com.br
You may see that after transitioning to the second page on carousel component, it is resized.
How can I fix this keeping the height of the pages equal (actually all pages need to have the same height as page 2)?
Not sure if I completely understood..
but maybe give this a try and see if it accomplishes what you're aiming for.
<div style="width: 400px; height: 250px; position: relative;">
<div style="width: 400px; height: 150px">
<img src="..." style="width: 200px; height: 200px; position: absolute; bottom: 0;" />
</div>
</div>
Try changing your style.css from
.carousel .item {
padding-top: 50px;
height: 300px;
}
to:
.carousel .item {
height: 290px; /* the image height */
}
also remove:
style="margin-top: -40px" from the image in the first carousel item
Hi I am trying to create simple slider for displaying latest product on the page using Bootstrap 3 at This DEMO. I have 6 thumbnails in a gallery div which I would like to display only 4 of them in front view and slide to left to see two more. I used bootstrap
<ul class="list-inline">
<li>...</li>
</ul>
css to render a display: inline-block; list of my <li>s but I do not know why they are not fitting in one line and 2 last items displays at the buttom of the gallery box. BESIDES the first <li> looks taller (Even if I have only 4 <li>).
Now my questions are:
1 - Why The First item Looks taller than the rest?
2 - Why Items are not displaying in a line?
3 - Finally why the overflow: hidden; property in .gallery is not performing properly?
and here is my code:
.gallery {
margin: 0 auto;
overflow: hidden;
width: 100%;
position: relative;
max-height:325px;
}
<!-- About Section -->
<section id="ft" class="cbp-so-section cbp-so-init">
<div class="container cbp-so-side cbp-so-side-top">
<h4>Latest Features</h4>
<div class="row">
<div class="well gallery col-lg-12 col-md-12 col-sm-2 col-xm-1">
<ul class="list-inline">
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
</ul>
</div>
</div>
</div>
</section>
Playing a bit with Firebug, I found that the issue here is because of the following rule:
.list-inline > li:first-child {
padding-left: 0;
}
All the .list-inline > li elements have a padding-left:5px rule, expect the first child. Because of that missing padding in the first child, the img inside has 5px more width (because of the max-width:100%; rule).
If you set the width of the img in pixels, you will not have this issue.
Regarding the (2) question, the bootstrap grid system requires that in one row the number sum of the col-sm-* is 12. You need to change in from col-sm-3 to col-sm-2 to have all 6 items in one line.
Regarding the (3) question, I am not sure what exactly you are expecting to see.
EDIT 2: See this link for a CSS fix http://bootply.com/111878
.gallery {
margin: 0 auto;
overflow: hidden;
width: 100%;
position: relative;
max-height:310px;
}
.list-inline img.img-responsive {
height: 233px;
width: 233px;
}
I'm building a navigation box with 3 rows and 3 columns of images. My target was to add some text below each image. I came across 'figcaption' today and although it seams like the perfect tag, i can't seam to get it to display properly.
The problem
The images display properly 'inline' until I add the 'figcaption' tags. The text appears in block (i assume), below each image which is great.. but it also forces the next image onto a new line (Even though inline block has been applied to the parent container '').
The html that i'm using goes as follows..
<section class="menu">
<h1>Menu</h1>
<br /><br />
<div>
<img src="img/image.png"><figcaption>Caption</figcaption>
<img src="img/image.png"><figcaption>Caption</figcaption>
<img src="img/image.png"><figcaption>Caption</figcaption>
</div>
***Div repeated twice***
</section>
And here is the css
.menu div {
padding: 0;}
.menu li a{display: inline;}
.menu a img{
width:32.1%; height:auto;
}
Here is a Fiddle
Thanks
According to MDN, <figcaption> needs to be inside a <figure> tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
Here's an updated HTML structure:
<section class="menu">
<h1>Menu</h1>
<br />
<div>
<figure>
<a href="">
<img src="http://placekitten.com/100/100">
</a>
<figcaption>Caption</figcaption>
</figure>
<figure>
<a href="">
<img src="http://placekitten.com/100/100">
</a>
<figcaption>Caption</figcaption>
</figure>
<figure>
<a href="">
<img src="http://placekitten.com/100/100">
</a>
<figcaption>Caption</figcaption>
</figure>
</div>
</section>
and associated css:
.menu div {
padding: 0;}
.menu figure {display: inline-block;
width:100px;
}
.menu a img{
height:auto;
}
http://jsfiddle.net/DHM46/5/