I am trying to align images horizontally but there is a weird cascading down effect. How can I solve this?
HTML (Drupal)
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
</div>
</div>
</div>
CSS
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
Image
hi as you said here is the solution may be what you want please look out the code
.view-content{
display:block;
}
.views-row{
float:left;
margin:5px;
padding:5px;
border:1px solid grey;
}
.views-field.views-field-title {
text-align: center;
}
.field-content img {
width: 150px;
height: 200px;
}
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://www.iconpng.com/png/stickers/books.png" alt="Smiley face">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Books-2-icon.png" alt="Smiley face">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/simple-black-square-icons-culture/126872-simple-black-square-icon-culture-books3-stacked.png" alt="Smiley face">
</a>
</div>
</div>
</div>
</div>
and here is the demo working code of this code
DEMO
You should wrap your Book html (title, link, image) in one div. And set float to that div wrapper. Like this:
<div class="book">
<div class="book-title">Up Country</div>
<div class="book-image"><img src="#1" alt="" /></div>
</div>
<div class="book">
<div class="book-title">The Quest</div>
<div class="book-image"><img src="#2" alt="" /></div>
</div>
<div class="book">
<div class="book-title">Radiant Angel</div>
<div class="book-image"><img src="#3" alt="" /></div>
</div>
And the book div will have this style:
.book {
float: left;
}
You don't have to put many "classes" and "divs". It can make you more confused and if you don't remove them, you have to put many properties in your classes. I think the codes below will solve your problem.
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
.views-field {
float:left;
}
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
</div>
</div>
Add following css code snippet into your code:
.views-row.views-row-1.views-row-odd.views-row-first {
display: inline-block;
}
Example Code
<!DOCTYPE html>
<html>
<head>
<style>
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
.views-row.views-row-1.views-row-odd.views-row-first {
display: inline-block;
}
</style>
</head>
<body>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this is what you are looking for :P
Output screenshot :
Added different image url for each image tag.
Related
I'm trying to align the arrow to the center with respective to the circle
How can I change the arrow direction to down arrow when it's in mobile view, So that the order of the image will be like one below other pointed with downwards arrow.
Below is the code which I have tried
img {
width: 32px;
height: 32px
}
.icon-holder {
background-color: #2E51FF;
width: 75px;
height: 75px;
border-radius: 75px;
line-height: 75px;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid p-4">
<div class="row text-center">
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
<p class=" text-muted font-weight-bold">Properties Listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">₱ 4.5 MN. </h2>
<p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
<p class=" text-muted font-weight-bold">Token Traded Volume</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
<p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
</div>
</div>
</div>
I have restructured the div and added some bootstrap classes. Please adjust spacing accordingly. Hope it'll help you
img {
width: 32px;
height: 32px
}
.icon-holder {
background-color: #2E51FF;
width: 75px;
height: 75px;
border-radius: 75px;
line-height: 75px;
}
#media only screen and (max-width: 600px){
h1.arrow {
transform: rotate(90deg);
}
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid p-4">
<div class="row text-center">
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
<div class="d-flex align-items-center">
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<div>
<h1 class="arrow">></h1>
</div>
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
<p class=" text-muted font-weight-bold">Properties Listed</p>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder">₱ 4.5 MN. </h2>
<p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col ">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
<p class=" text-muted font-weight-bold">Token Traded Volume</p>
</div>
<div class="col my-auto">
<h1 class="">></h1>
</div>
<div class="col">
<h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
<div class="icon-holder mx-auto">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
</div>
<h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
<p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
</div>
</div>
</div>
you can use media query for arrow to rotate
#media only screen and (max-width: 600px) {
.arrow-image {
transform: rotate(90deg)
}
}
to center it you can use
display: block;
margin: auto;
I have a page with preview of images. All images are different size, but preview should be all square.
/* This is the CSS code which sets automatic height: */
.preview-img {
width: 100%;
height: auto;
object-fit: cover;
}
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/01-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/02-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image3">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/03-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
</div>
How can I set the height of an image according to it's width, without using pixels?
.preview-img {
width: 100%;
padding-bottom: 100%;
height: 0;
object-fit: cover;
}
This should work on all major browsers.
If you can use javascript,
window.addEventListener("resize", function(e) {
var element = document.getElementsByClassName("preview-img");
mapElement.style.height = mapElement.width;
});
I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.
CSS
.image-center {
display: inline-block;
vertical-align: middle;
position: relative;
}
HTML
<div class="row">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
This CSS will be responsive for any devices. It will center horizontally and vertically.
.col {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="row imageCenterAlign topAlign">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row imageCenterAlign">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
css:
.imageCenterAlign{
display: flex;
justify-content: center;
align-items: center;
}
.topAlign{
top:50%;
}
The best way to accomplish this would be to use flexbox imho.
HTML:
<div class="group">
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x110/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
<img src="https://fakeimg.pl/150x80/?text=Hello" />
<img src="https://fakeimg.pl/150x70/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x115/?text=Hello" />
<img src="https://fakeimg.pl/150x90/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>
CSS:
DIV.group {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
align-content:stretch;
}
I will recommend you to use the display:flex, you just need to create an horizontal class and a vertical class an assign it to the divs of the image depending of the orientation you want to give it.
It's easy and simple, I write you the snippet, you just need to change the margins, and I also changed the image.
div.horizontal {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 15px;
}
<div class="row horizontal">
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
</div>
<div class="row horizontal">
<div class="col vertical">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col vertical">
<img class="center-block " width="150" src="imagery/6.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
Hope it helps you.
don't know about bootstrap but if you use normal CSS
apply this class to the child container
position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,
I'm working on a CSS photo gallery in CSS only and I've got a problem. I try to do a lightbox with 5 elements (pictures) and it worked perfectly. But when I want to add some new pictures, it doesn't work anymore and I don't know why. It's just like the last picture was displayed in full size in front of the other elements from the page (but with hidden property). So I see the page but I can't click the links...
Here is the code :
#GalleryContent {
height: 817px;
margin-top: 100px;
margin-left: 55px;
}
#gallery a {
text-decoration:none;
}
#gallery .item {
width: 200px; height: 200px; overflow: hidden;
float: left;
border: 5px solid #000;
margin: 5px;
box-shadow: 1px 1px 1px 1px #d8c4a3;
}
#gallery .item a {
overflow: hidden;
}
#gallery .item a img {
height: 100%;
align-self: center;
}
.lightbox {
/** Hide the lightbox */
opacity: 0;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9999;
width: 100%;
height: 90%;
top: -100%;
left: 0;
color:#333333;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.lightbox:target {
/** Show lightbox when it is target */
opacity: 1;
outline: none;
top: 0;
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 500px;
margin: auto;
padding: 20px 30px 20px 30px;
background-color: #000;
box-shadow: 0px 1px 26px -3px #000;
font-family: 'IM Fell English', serif;
color: #FFF;
}
.lightbox .title {
margin: 0;
padding: 0 0 10px 0px;
border-bottom: 1px #ccc solid;
}
.lightbox .content {
display: block;
position: relative;
}
.lightbox .close {
display:block;
float:right;
margin-top: -10px;
text-decoration:none;
font-family: 'Helvetica', sans-serif;
font-size: 0.8em;
color: #FFF;
border: 1px solid #FFF;
padding: 0px 3px 2px 3px;
}
.lightbox #legend {
padding-bottom: 10px;
margin-top: -10px;
}
.clear {
display:block;
clear:both;
}
/* back and previous buttons */
.lightbox .next,
.lightbox .prev,
.lightbox .close {
display:block;
text-decoration:none;
}
.prev {
float:left;
color:#FFF;
padding-top: 12px;
}
.next {
float:right;
color:#FFF;
padding-top: 12px;
}
.close {
float:right;
}
.clear {
display:block;
clear:both;
}
<div id="GalleryContent">
<section id="gallery">
<section class="item">
<a href="#img1">
<img src="images/galerie/voltigeurs-1.jpg">
</a>
</section>
<section class="item">
<a href="#img2">
<img src="images/galerie/voltigeurs-2.jpg">
</a>
</section>
<section class="item">
<a href="#img3">
<img src="images/galerie/voltigeurs-3.jpg">
</a>
</section>
<section class="item">
<a href="#img4">
<img src="images/galerie/voltigeurs-4.jpg">
</a>
</section>
<section class="item">
<a href="#img5">
<img src="images/galerie/voltigeurs-5.jpg">
</a>
</section>
<section class="item">
<a href="#img6">
<img src="images/galerie/voltigeurs-6.jpg">
</a>
</section>
<section class="item">
<a href="#img7">
<img src="images/galerie/voltigeurs-7.jpg">
</a>
</section>
<section class="item">
<a href="#img8">
<img src="images/galerie/voltigeurs-8.jpg">
</a>
</section>
<section class="item">
<a href="#img9">
<img src="images/galerie/voltigeurs-9.jpg">
</a>
</section>
<section class="item">
<a href="#img10">
<img src="images/galerie/voltigeurs-10.jpg">
</a>
</section>
<section class="item">
<a href="#img11">
<img src="images/galerie/voltigeurs-11.jpg">
</a>
</section>
<section class="item">
<a href="#img12">
<img src="images/galerie/voltigeurs-12.jpg">
</a>
</section>
</section>
</div>
<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img1">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">1</div>
<div class="content">
<img src="images/galerie/voltigeurs-1.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img2"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img2">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">2</div>
<div class="content">
<img src="images/galerie/voltigeurs-2.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img1"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img3"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img3">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">3</div>
<div class="content">
<img src="images/galerie/voltigeurs-3.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img2"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img4"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img4">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">4</div>
<div class="content">
<img src="images/galerie/voltigeurs-4.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img3"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img5"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img5">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">5</div>
<div class="content">
<img src="images/galerie/voltigeurs-5.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img4"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img6"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img6">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">6</div>
<div class="content">
<img src="images/galerie/voltigeurs-6.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img5"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img7"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img7">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">7</div>
<div class="content">
<img src="images/galerie/voltigeurs-7.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img6"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img8"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img8">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">8</div>
<div class="content">
<img src="images/galerie/voltigeurs-8.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img7"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img9"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img9">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">9</div>
<div class="content">
<img src="images/galerie/voltigeurs-9.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img8"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img10"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img10">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">10</div>
<div class="content">
<img src="images/galerie/voltigeurs-10.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img9"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img11"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img11">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">11</div>
<div class="content">
<img src="images/galerie/voltigeurs-11.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img10"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img12"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img12">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">12</div>
<div class="content">
<img src="images/galerie/voltigeurs-12.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img11"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img1"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
Thanks a lot for your help.
May be you want something like this.
*{
margin:0;
padding:0;
}
#gallery{
border:1px solid red;
margin:auto;
width:500px;
padding:5px;
height:800px;
}
#thumbs{
width:150px;
height:150px;
border:1px solid green;
padding:5px;
float:left;
margin:5px;
}
#thumbs img{
width:100%;
height:100%;
}
.lightbox{
visibility:hidden;
opacity:0;
position:fixed;
top:0;
left:0;
background-color:rgba(72,73,74,1);
height:100%;
width:100%;
}
.lightbox:target{
visibility:visible;
opacity:1;
transition:opacity 2s;
}
#outer{
background-color:#FFF;
width:min-content;
height:400px;
margin:auto;
margin-top:30px;
box-shadow:0px 0px 35px #000000;
padding:10px;
}
#inner img{
max-height:500px;
max-width:800px;
}
.lightbox a{
text-decoration:none;
font-size:20px;
color:#666;
}
#cross{
float:right;
}
#next{
float:right;
}
<div id="gallery">
<div id="thumbs">
<img src="img1.jpg"/>
</div>
<div id="thumbs">
<img src="img2.jpg"/>
</div>
<div id="thumbs">
<img src="img3.jpg"/>
</div>
<div id="thumbs">
<img src="img4.jpg"/>
</div>
<div id="thumbs">
<img src="img5.jpg"/>
</div>
<div id="thumbs">
<img src="img6.jpg"/>
</div>
<div id="thumbs">
<img src="img7.jpg"/>
</div>
<div id="thumbs">
<img src="img8.jpg"/>
</div>
</div>
<div class="lightbox" id="lightbox1">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img1.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox2">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img2.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox3">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img3.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox4">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img4.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox5">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img5.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox6">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img6.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox7">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img7.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox7">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img7.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
<div class="lightbox" id="lightbox8">
<div id="outer">
<p id="title">Image
X</p>
<div id="inner">
<img src="img8.jpg"/>
</div>
<p>Next
Previous</p>
</div>
</div>
Please check this videos:- https://www.youtube.com/watch?v=q7ZhOczh35A & https://www.youtube.com/watch?v=82SwGTvM_DU
Folks,
I'm trying to build with bootstrap. Following this basic markup:
<div class="container">
<header class="row">
</header>
<div class="row">
<div role="main" class="col-md-8">
</div>
<aside role="complementary" class="col-md-4">
</aside>
</div>
<footer class="row">
</footer>
</div>
I created the following page:
http://clubedebeneficiosunilife.com.br/thumbs-promocoes-logadoTest2.php
The problem that the thumbs were 'stretched' occupying all available space. I wish it were that displayed:
http://clubedebeneficiosunilife.com.br/main-col-side-bar.png
That is, the 'main' column in a notebook or desktop occupying 75% of the screen and 'terras' column containing the sidebar should occupy 25% of the width.
Only within the column 'main' I need to be displayed 4 thumbs (as print). I've tried everything
I'm already on my knees asking for help. Does anyone know how to solve?
Thank you in advance.
before thumbnail class just add class col-md-3 class then it will give you the exact result
.thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
min-height: 165px;
padding: 4px;
transition: all 0.2s ease-in-out 0s;
}
<div class=" col-md-3">
<a class="thumbnail" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">-->
</a>
</div>
add this style to your website
.thumbnail {
display: inline-block;
margin-right: 20px;
width: 22%;
}
Try This
CSS
.thumbnail{
border:0;
}
.thumbnail img{
border:1px solid gray;
}
HTML
<div class"container-fluid">
<div class="row">
<aside role="complementary" class="col-md-4">
</aside>
</div>
<!--<div role="main" class="col-md-8 thumb">-->
<div role="main" class="col-md-8 col-lg-4 thumb">
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
</div>
<!--<div class="col-lg-12 col-md-12 col-xs-12 thumb">-->
<aside role="complementary" class="col-md-4">
<div class="arrowlistmenu"> <h3 class="headerbar">Categorias</h3>
<ul> <li class="arrowlistmenu">Academias</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=2">Artigos
Esportivos</a></li> <li>Automotivo</li>
<li>Alimentação</li>
<li>Compras</li>
<li>Beleza</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=7">Educação
e Cultura</a></li> <li>Informática</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=9">Lazer
e Entretenimento</a></li> <li>Medicina e Saúde</li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=11">Móveis
e Decoração</a></li> <li>Serviços</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=13">Viagem
e Turismo</a></li> </ul>
</div> </aside>
<!--</div>-->
</div>
</div>