1
How to place 2 images or more side by side, occupying 100% of the page?
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
.galeria {
background: #FFFFFF;
width: 100%;
height: 768px;
display: inline-block;
/*overflow: hidden;*/
}
.galeria .botoes {
display: none;
position: absolute;
}
.galeria .botoes a.anterior {
text-decoration: none;
width: 30px;
height: 130px;
float: left;
margin-left: 20px;
background-image: url(imagens/flechae.png);
background-size: 30px 130px;
}
.galeria .botoes a.anterior:hover {
text-decoration: none;
width: 30px;
height: 130px;
float: left;
margin-left: 20px;
background-image: url(imagens/flechaehover.png);
background-size: 30px 130px;
}
.galeria .botoes a.proximo {
text-decoration: none;
width: 30px;
height: 130px;
float: left;
margin-left: 20px;
background-image: url(imagens/flechad.png);
background-size: 30px 130px;
}
.galeria .botoes a.proximo:hover {
text-decoration: none;
width: 30px;
height: 130px;
float: left;
margin-left: 20px;
background-image: url(imagens/flechadhover.png);
background-size: 30px 130px;
}
.galeria ul {
list-style: none;
display: table;
position: relative;
width: 100%;
height: 768px;
}
.galeria ul li {
display: inline-block;
width: 100%;
height: 768px;
float: left;
}
.galeria ul li img {
width: 100%;
height: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="slider.css" rel="stylesheet" type="text/css">
<title>Slider Jquery</title>
</head>
<body>
<div id="galeria" class="galeria">
<div id="botoes" class="botoes">
<a href="#" class="anterior"></a>
<a href="#" class="proximo"></a>
</div>
<ul>
<li>
<img src="imagens/imagem1.jpg" alt="Imagem 1">
</li>
<li>
<img src="imagens/imagem2.jpg" alt="Imagem 2">
</li>
<li>
<img src="imagens/imagem3.jpg" alt="Imagem 3">
</li>
</ul>
</div>
</body>
</html>
Are you doing a right slider? Are you doing it based on some javascript? Because it seems to me that the problem actually also involves javascript, because it is he who creates the functionality and gives the characteristic of "slider". About the code, what would actually be the problem? It would just put 2 images at a time on the screen?
– celsomtrindade
I am using jquery, but I need to put the images as if it were display: inline-block, more accurate that the slider takes 100% of the page and when I put 100% the images are below each other and when I put in pixels they are right on each other’s side, that and doubt, thank you
– Leonardo Silva
The problem with this is that jQuery himself will be in charge of creating this structure for you, creating a "frame" where the images go through the "background". You already applied jQuery to create the slider?
– celsomtrindade
I was still not positioning the images to then apply the jquery. I’ll try to apply and see what happens, hopefully it works out, and thanks again for the tips :)
– Leonardo Silva
If it does not work, it will be some layout customization. Dai recommend that return, if the doubt persists.
– celsomtrindade
Okay I’m trying here!
– Leonardo Silva
There is the possibility to create the slider without jQuery yes, but by the html and css structure that he went through, it seemed to be depending on an external js, which he confirmed, so continuity in this line of reasoning.
– celsomtrindade
Use the vw and vh units to occupy the full size of the viewport with CSS... I edited your question, but consider adding what that 100% would be relative to horizontal or vertical and also adding Javascript code if possible.
– Rafael Kendrik
Thanks guys managed to put adjusting the css, now I will do jquery to be ready!
– Leonardo Silva
@Leonardosilva, prepare an answer with the solution of the problem or if it is not possible to consider removing the question.
– Rafael Kendrik