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>
Related
I have a carousel faq, there are some boxes with different questions and answers, so the boxes are not the same size as you can see above:
My code is this one:
<section id="faq" class="shadow-lg">
<div class="container text-center">
<h3 class="font-weight-light">Faq</h3>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="col carousel slide w-100" data-ride="carousel">
<div class="row carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">pergunta</h4>
<p class="card-text">resposta</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">pergunta</h4>
<p class="card-text">resposta</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
css:
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
#faq{
padding-bottom: 80px;
}
#faq h3{
padding-top: 50px;
padding-bottom: 50px;
}
#faq .card{
border-color: #216869;
min-height: 400px;
}
#infos, #contato, #faq, #planos{
font-family: Montserrat-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
I want the boxes to be at the same height, regardless of the size of the questions. Basically, I want all the boxes to be the same height as the largest.
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 not very good in CSS, and so I don't know how to solve my problem. I've a grid images (you can see at https://i.imgur.com/88yDcbN.png). As you can see the first image (I selected) has useless white space below.
How can I move the image below so that there are 50px difference?
Actually I use these classes for my box:
col-sm-6 col-md-4
I'm using bootstrap as you can see.
The other divs inside the col-sm-6 col-md-4 have the right height.
Thank you for your help!
Example box:
<div class="_00d7">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-id="11" data-score="4380" class="_4180">
<a class="eac1">
<img src="images/E8wfc3V4Azc.jpg">
</a>
<div class="_96ae">
Punteggio immagine: <b>4380</b>.
</div>
</div>
</div>
</div>
</div>
CSS:
._00d7 ._4180 {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
}
._00d7 .eac1 img {
border-radius: 4px 4px 0 0;
vertical-align: middle;
border-style: none;
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
height: auto;
}
(sorry for classes names, I'm using react)
For that particular layout (a Mansonry-like layout) Bootstrap4 give you a solution: use Card columns: https://getbootstrap.com/docs/4.0/components/card/#card-columns.
I give you an example. This is only a start point, you can customize as you want.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="_00d7">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card-columns">
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/500">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/250">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/100">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Be careful: the images order is vertical:
1 4 7
2 5 8
3 6 9
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
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.