Professor estou um um problema quando eu quero colocar 6 imagens só que em bloco e centralizado na pagina eu ja tentei o display block display table e ele até vai mais ele não fina no zoom 100% da pagina ele fica bom só no 90% vc pode me ajudar
Solucionado
Professor estou um um problema quando eu quero colocar 6 imagens só que em bloco e centralizado na pagina eu ja tentei o display block display table e ele até vai mais ele não fina no zoom 100% da pagina ele fica bom só no 90% vc pode me ajudar
hoje, com a Alura e o Google Gemini
Fala aí, Guilherme! Tudo certinho, cara? =)
Eu não sou o professor, mas posso tentar ajudá-lo. =)
Você pode postar o seu código aqui, para darmos uma olhada? Aí vamos trabalhando em cima dele até resolvermos seu problema!
Mas minha primeira ideia é justamente o display: block nos elementos... Se você quer que eles fiquem um em baixo do outro...
HTML:
<div>
<img ...>
<img ...>
<img ...>
<img ...>
<img ...>
<img ...>
</div>CSS:
img {
display: block;
}Mas você disse que isso não rolou, né? =|
Posta aí e a gente vê, pode ser? =)
Fábio
(CSS)
@charset="utf-8";
body{
font-family: Tahoma, sans-serif;
}
.headerGroup{
position: relative;
border-color: #3498db;
/* CROSS BROWSERS */
/* Para browsers que não suportam gradientes */
/* Ver Prefixr CSS */
background: -webkit-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Para Safari 5.1 até 6.0 */
background: -o-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Para Opera 11.1 até 12.0 */
background: -moz-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Para Firefox 3.6 até 15 */
background: linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Sintaxe Standard (pode ser a última) */
margin-top: -5px;
min-height: 0px;
width: 100%;
padding-top: 70px;
padding-bottom: 70px;
font-size: 10px;
}
.container{
position: absolute;
margin-top:-20px 0px 0px auto;
margin-left: -20px;
}
.rodape{
background-color: #333333;
color: white;
padding: 30px;
object-position: center;
clear: both;
}
.Roda{
display: inline-table;
padding: 10px;
position: relative;
width: 30%;
}
.headerGroup a{
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2pt;
}
.menuHeader{
float: right;
margin-right: 10%;
}
.menuHeader li{
display: inline;
padding: 10px;
}
.tit01{
margin-top: 10px;
margin-left: 10%;
font-size: 13px;
position: absolute;
}
.content{
margin:auto;
padding-top: 39px;
padding-bottom: 40px;
text-align: center;
background-color: #e6e6e6;
text-indent: 30px;
width: 100%;
}
.content blockquote{
padding-left: 20%;
padding-right: 20%;
width: 50%
}
.caixa{
display: inline-table;
}
}
.caixa-imagem{
width: 100%;
display: inline-table;
}
figure.foto-legenda{
border:solid 3px #fff;
width: 50%;
position: relative;
box-shadow: 2px 2px 2px #111;
float: left;
}
figure.foto-legenda figcaption{
position:absolute;
top: 0;
color: #fff;
opacity: 0;
transition: opacity 1s;
width:100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
figure.foto-legenda:hover figcaption{
opacity: 1;
}(HTML)
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta name="description" content="Página de Portfólio da Empresas Fulano"/>
<title>Minha Página</title>
<link rel="stylesheet" type="text/css" href="assets/css/estilo.css">
</head>
<body>
<div class="container"><!--começo dos elemento que pega a pagina toda-->
<header><!--inicialização do cabeçalho-->
<hgroup class="headerGroup txtPortfolio"><!--grupo de cabeçalho iniciando aqui-->
<div class="tit01">
<a href="pagina_inicial.html">Certificados</a>
</div>
<ul class="menuHeader"><!--barra de navegação começando aqui-->
<li><a href="#">portfólio</a></li>
<li><a href="#">sobre mim</a></li>
<li><a href="#">contato</a></li>
</ul><!--barra de navegação finalizando aqui-->
</hgroup><!--grupo de cabeçalho finalizando aqui-->
</header><!--finalização do cabeçalho-->
<div class="descricao">
<div class="content">
<h1> Ola sou Guilherme!</h1>
<blockquote>Olá meu nome é guilherme,é um imenso prazer de estar­por meio dessa página me apresentado,­eu adoro praticar natação e artes marcial esse são os meus principais hobbies</blockquote>
</div>
</div>
<section class="caixa-imagem"> <!--sessaõ de imagem começa aqui-->
<div class="caixa">
<figure class="foto-legenda"><!--primeira imagem começa aqui-->
<img src="assets\img\port01.jpg" alt="Uma tela com pontos quadrados azuis."/>
<figcaption> Agência Web </figcaption>
</figure><!--final da primeira imagem-->
<figure class="foto-legenda"><!--segunda imagem começa aqui-->
<img src="assets\img\port02.jpg" alt="Tela com quadrados amarelos. "/>
<figcaption> Site Institucional </figcaption>
</figure><!--final da segunda imagem-->
</div>
<div class="caixa">
<figure class="foto-legenda"><!--terceira imagem começa aqui-->
<img src="assets\img\port03.jpg" alt="mais uma foto"/>
<figcaption> Projeto pessoal </figcaption>
</figure><!--final da terceira imagem-->
<figure class="foto-legenda">
<img src="assets\img\port04.jpg" alt="quadrados roxos"/>
<figcaption> Site Promocional </figcaption>
</figure>
</div>
<div class="caixa">
<figure class="foto-legenda">
<img src="assets\img\port05.jpg" alt="quadrados mais azuis"/>
<figcaption>Projetos pessoais</figcaption>
</figure>
<figure class="foto-legenda">
<img src="assets\img\port06.jpg" alt="quadrados verdes"/>
<figcaption> Hotsite </figcaption>
</figure>
</div>
</section><!--final da segunda imagem-->
<footer class="rodape"> <!--rodapé do site inicializa aqui-->
<section class="Roda">
<h4>ENDEREÇO</h4>
<p>
Rua Baker Street 21B, Centro<br/>(11) 1234 5678 São Paulo, Brasil
</p>
</section>
<section class="Roda">
<h4>REDES SOCIAIS</h4>
<p>GitHub</p>
<p>Twitter</p>
<p>Facebook</p>
</section>
<section class="Roda">
<h4>SOBRE ESTE SITE</h4>
<p>O modelo deste site foi baseado em um tema cedido pelo site BlackTie.co.<br/As imagens ilustrativas do portfólio foram derivadas dos ícones disponíveis pelo Vecteezy sob licença Creative Commons BY-SA.</p>
</section>
</footer><!--finalização do rodapé-->
</div><!--finalização do elemento que pega a pagina toda-->
</body>
</html>
Vamos lá...
Se entendi corretamente, as imagens que você quer que fiquem empilhadas são as que estão dentro das figure com classe foto-legenda, correto?
Se for isso, acho que você terá que remover o float: left e adicionar o display: block, você chegou a tentar fazer isso? Como as imagens estão dentro de <figure>, não adianta mexer apenas nelas, você precisa mexer no elemento pai delas, sacou? =)
Fábio
Aliás, corrigindo...
Acabei de notar que suas <figure> estão aos pares, dentro de <div> com a classe caixa... Nesse caso, você pode usar o display: block nessas div... Isso deve fazer com que elas fiquem empilhadas duas a duas...
Fábio
então Fabio tbm tentei esses exemplos que vc me mostrou e não funcionou
Guilherme,
Que estranho... =|
Eu removi o código abaixo e funcionou:
.caixa {
display: inline-table;
}Você consegue mandar um print de como ficou o seu?
Fábio
Fabio eu conseguir aqui porem ele está preso ao zoom de 90 da pagina onde quando eu coloco ele no padrão 100% ele se quebra e fica em 2 coluna ola o meu css
@charset="utf-8";
body{
font-family: Tahoma, sans-serif;
}
.headerGroup{
position: relative;
border-color: #3498db;
/* CROSS BROWSERS */
/* Para browsers que não suportam gradientes */
/* Ver Prefixr CSS */
background: -webkit-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Para Safari 5.1 até 6.0 */
background: -o-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Para Opera 11.1 até 12.0 */
background: -moz-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Para Firefox 3.6 até 15 */
background: linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Sintaxe Standard (pode ser a última) */
margin-top: -5px;
min-height: 0px;
width: 100%;
padding-top: 70px;
padding-bottom: 70px;
font-size: 10px;
}
.container{
position: absolute;
margin-top:-20px 0px 0px auto;
margin-left: -20px;
}
.rodape{
background-color: #333333;
color: white;
padding: 30px;
object-position: center;
clear: both;
}
.Roda{
display: inline-table;
padding: 10px;
position: relative;
width: 30%;
}
.headerGroup a{
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2pt;
}
.menuHeader{
float: right;
margin-right: 10%;
}
.menuHeader li{
display: inline;
padding: 10px;
}
.tit01{
margin-top: 10px;
margin-left: 10%;
font-size: 13px;
position: absolute;
}
.content{
margin:auto;
padding-top: 39px;
padding-bottom: 40px;
text-align: center;
background-color: #e6e6e6;
text-indent: 30px;
width: 100%;
}
.content blockquote{
padding-left: 20%;
padding-right: 20%;
width: 50%
}
.caixa{
display: inline-table;
width: 30%;
}
.caixa-imagem{
width: 30%;
display: inline;
}
figure.foto-legenda{
border:solid 3px #fff;
max-width: 100%;
position: relative;
box-shadow: 2px 2px 2px #111;
float: left;
}
figure.foto-legenda figcaption{
position:absolute;
top: 0;
color: #fff;
opacity: 0;
transition: opacity 1s;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
figure.foto-legenda:hover figcaption{
opacity: 1;
}
Guilherme,
Acredito que isso possa estar acontecendo devido ao tamanho do seu monitor...
Eu testo aqui e ele funciona, ele só quebra em mais de uma coluna, no momento em que eu uso zoom abaixo de 50%;
Se for o caso, você pode tentar aumentar a largura dos elementos...
Fábio