Discussoes de Programacao e Tecnologia

Preciso muito de uma ajuda

15 respostas
css
E
eddy_silva

Estou com um problema de formatação de img, estou seguindo uma vídeo aula desse cara ai: https://www.youtube.com/watch?v=DaD-eRasQ1A&t=1731s , e fiz do mesmo jeito que ele fez, so que na formatação da img o meu fica diferente do dele:

abaixo segue meu código:

image
image.png1280×720 62.9 KB

e segue minha minha pagina

image
image.jpg1280×720 153 KB

agora olha como fica a dele

image
image.jpg1280×720 249 KB

por favor me ajudem

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

15 Respostas

J
javaflex

Não temos como executar imagem pra poder verificar o problema. Posta em texto o código HTML, CSS e JS (se tiver).

E
eddy_silva 
#portfolio {

flex-direction: row;

flex-wrap: wrap;

}

#portfolio h2 {

width: 100%;

text-align: center;

}

#portfolio img {

width: 33%;

esse código e de CSS3, a parte de HTML ta legal ta tudo certo

E
eddy_silva

para te explicar melhor, fiz a parte de HTML 5, ai depois fiz o parte de CSS3 e formatei a pagina para tamanho mobile, ai depois utilizei o códigoo @media (o media queries) para deixar ele em tamanho de pagina de web

J
javaflex

E o HTML? Não temos como reproduzir o problema só com CSS.

E
eddy_silva
UCreatEasy 
<nav> <!-- tag que endica links de navegação -->
 <a href="#">UCreatEasy</a>
      <ul> <!-- define uma lista não ordenada  -->
         <li><a href ="#sobre">SOBRE</a></li>
         <li><a href ="#servicos">SERVIÇOS</a></li>
        <li><a href ="#portfolio">PORTIFÓLIO</a></li>
        <li><a href ="#contato">CONTATO</a></li>
     </ul>
 </nav>
 
 <header> <!-- cabeçalho -->
    <h1>UCreatEasy</h1>
     <p>Rapido, simples e fácil.</p>
     <a href="#sobre"class="botao">VER MAIS</a>
 </header>
 
 <section id="sobre"> 
    <h2>SOBRE</h2>
     <p>Nossa maior missão é fazer você usuario ter a melhor UX já vista. </p>
     <a href="#contato"class="botao">ENTRE EM CONTATO</a>
 </section>
 
 <section id ="servicos">
    <h2>SERVIÇOS</h2>
     <div>
        <img src= "_imagens/configs.png" alt="configurações"/>
         <h3>Fácil Interaçao</h3>
         <p>Integra facilmente seu site e qualquer gerenciador de conteúdo.</p>
     </div>
     <div>
        <img src= "_imagens/hospedagem.png" alt="servidor"/>
         <h3>Hospedagem Moderna</h3>
         <p>Não deixe seus clientes na mão. Tenha seu site em 24hrs no ar.</p>
     </div>
     <div>  
        <img src= "_imagens/site.png" alt="navegador"/>
         <h3>Melhores Práticas</h3>
         <p>Código legivel, desenvolvido com as melhores práticas.</p>
     </div>
      <div>
        <img src= "_imagens/coracao.png" alt="Coração"/>
         <h3>Feito com amor </h3>
         <p>É melhor fazer seus sites com amor hoje em dia.</p>
     </div>
 </section>
 
<section id = "portfolio">
 <h2>PORTFÓLIO</h2>
 <div>     
    <img src="_imagens/portfolio-1.jpg" alt="cogumelo"/>
</div> 
<div>
    <img src="_imagens/portfolio-2.jpeg" alt="sol no horizonte"/>
</div> 
<div>
    <img src="_imagens/portfolio-3.jpeg" alt="pessoas á beira de um vale"/>   
</div>
<div>
    <img src="_imagens/portfolio-4.jpg" alt="floresta nevada"/>
</div> 
<div>
    <img src="_imagens/portfolio-5.jpeg" alt="praia deserta"/>    
</div>
<div>
    <img src="_imagens/portfolio-6.jpeg" alt="alce a beira de um rio"/>
</div>    
</section>
 
 <section id="contato">
    <h2>CONTATO</h2>
     <p>Entre em contato conosco.</p>
     <div>
        <img src="_imagens/fone.png" alt="telefone"/>
         <p><a href="tel:xx5555555">(XX)5555-5555</a></p>
     </div>
     <div>
         <img src="_imagens/contato.png" alt="e-mail"/>
         <p><a href="[email removido]">[email removido]</a></p>
     </div>
 </section>
 
 <footer>
    <p>Desenvolvido por Edgar Silva.</p>
 </footer>
E
eddy_silva

Aqui e o css:

body {

font-style: “Open Sans”, Helvetica, Arial, sans-serif;

color: #4d4d4d;

}

h1, h2, h3 {

margin: 0;

font-family: “Roboto Slab”, Helevetica, Arial, sans-serif;

font-weight: 700;

}

.botao {

color: white;

text-align: center;

text-decoration: none;

padding: 10px 30px;

background-color: #8f3faf;

font-size: .9em;

border-radius: 3px;

}

/Navegação/

nav {

display: flex;

flex-direction: column;

align-items: center;

background: #4d4d4d;

}

nav > a {

text-decoration: none;

text-align: center;

color: #f1f1f1;

font-weight: 700;

font-size: 28px;

font-family: Pacifico, serif;

}

nav  ul {

list-style: none;

padding: o;

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

}

nav ul li {

width: 100%;

text-align: center;

}

nav ul li a {

display: inline-block;

padding: 10px 0;

width: 100%;

text-decoration: none;

color: #f1f1f1;

}

/cabeçalho/

header {

background-image: url(’…/_imagens/fundo.jpg’);

background-size: cover;

background-position: center;

background-repeat: no-repeat;

color: #f1f1f1;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

padding: 20px;

}

header p {

margin-bottom: 2em;

}

/sobre/

#sobre {

display: flex;

flex-direction: column;

align-items: center;

text-align: center;;

padding: 0 20px 20px;

background-color: #8f2faf;

color: #f1f1f1;

}

#sobre p {

margin-bottom: 2.5em;

max-width: 1000px;

}

#sobre .botao{

background-color: #f1f1f1;

color: #8f3faf;

}

/<em>Serviços</em>/

#servicos {

padding: 20px;

display: flex;

flex-direction: column;

align-items: center;

}

#servicos div {

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

margin-top: 30px;

}

/portfólio/

#portfolio {

display: flex;

flex-direction: column;

align-items: center;

padding-top: 20px;

}

#portfolio h2 {
margin-bottom: 20px;

}

#portfolio img {

border: 8px solid white;

box-shadow: 1px 1px 4px black;

width: 100%;

}

#contato {

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

padding: 20px;

}

/<em>footer</em>/

footer {

text-align: center;

padding: 10px;

background-color: #4d4d4d;

color:#f1f1f1;

}

/MEDIA QUERIES/

@media screen and (min-width: 768px){

/<em>NAVEGAÇÂO</em>/

nav {

flex-direction: row;

justify-content: space-around;

}

nav ul {

flex-direction: row;

width: 70%;

}

/<em>CABEÇALHO</em>/

header {

height: 600px;

justify-content: center;

height: 60vh;

}

/<em>SOBRE</em>/

#sobre {

height: 250px;

height: 30vh;

justify-content: center;

min-height: 250px;

}

/<em>SERVIÇOS</em>/

#servicos {

flex-direction: row;

flex-wrap: wrap;

align-items: flex-start;

max-width: 1000px;

margin: 0 auto;

}

#servicos h2 {

text-align: center;

width: 100%;

}

#servicos div {

flex-grow: 1;

flex-basis: 150px;

padding: 0 10px;

}

#portfolio {

flex-direction: row;

flex-wrap: wrap;

}

#portfolio h2 {

width: 100%;

text-align: center;

}

#portfolio img {

width: 33%;

}

/<em>CONTATO</em>/

#contato {

flex-direction: row;

flex-wrap: wrap;

justify-content: space-around;

max-width: 500px;

margin: 0 auto;

}

#contato h2,

#contato p {

width: 100%;

}

}
J
javaflex

Exemplo: https://jsfiddle.net/c7gk1baa/

E
eddy_silva

cara e isso mesmo como vc conseguiu me explique ??

E
eddy_silva

mano coloquei a sua linha de código mas não foi

J
javaflex

Basicamente consultei o site https://www.w3schools.com sobre flex-direction e outras propriedades relacionadas. Lá é a melhor referência para HTML e CSS.

Recomendo que faça por partes, senão vai se enrolar. Você viu que o exemplo que passei atende como quer que fiquem as imagens. O resto você vai fazendo e testando aos poucos, assim fica mais fácil de você entender o que está fazendo, não copie tudo simplesmente, depois fica inviável achar agulha no palheiro.

A
anon30449818

Este código que você mencionou estava quase certo, cara:

#portfolio {
flex-direction: row;
flex-wrap: wrap;
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33%;
}

O problema é só que você esqueceu de declarar display: flex, no elemento pai. Assim, para trabalharmos com flex-box, sempre temos que colocar essa declaração no elemento pai. Caso contrário, não vai funcionar.

O correto seria isso:

#portfolio {
display: flex; /* Era oquê faltava */
flex-direction: row; /* Isso diz para os filhos se organizarem em row (linha, no português) */
flex-wrap: wrap; /* Aqui, instruímos para a linha de imagens quebrar, quando necessário. */
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33%; /* Isso é a largura para cada imagem. Neste caso, o código está pedindo que cada imagem tenha 1/3, em cada linha. Portanto, podemos ter três imagem por linha. */
}
E
eddy_silva

e para que serve o display flex

E
eddy_silva

gente não ta indo kkkk

J
javaflex

https://tableless.com.br/flexbox-organizando-seu-layout/

https://www.w3schools.com/css/css3_flexbox.asp

Sugiro seguir outros materiais, não fique preso nesse vídeo.

J
jrbyte

Boa noite, como está sendo carregado o arquivo normalize.css no seu HTML? Verifiquei também se esse arquivo tem a mesma versão da video aula!

Abraços!

Criado 7 de maio de 2018
Ultima resposta 10 de mai. de 2018
Respostas 15
Participantes 4

Topicos relacionados

Alura ou TreinaWeb ou DankiCode ou DevMedia? 3 respostas Lista - Player Audio Resolvido 4 respostas Como fixar uma barra lateral de conteúdo periférico no layout Resolvido 3 respostas Ajuda com menu dropdown Resolvido 4 respostas Como usar o Bootstrap de forma customizada e consistente? 4 respostas
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Coletanea Front-end: Uma antologia da comunidade... Por Almir Filho, Bernard De Luna — Casa do Codigo