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
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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
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