Ir ao conteúdo
  • Cadastre-se
Cris Ider

HTML Espaçamento horizontal irregular no site.

Recommended Posts

Olá, pessoal. Sou iniciante em html e estou fazendo uma tarefa para faculdade sobre html.

 

Estou montando um site de exercício e o resultado é o da imagem. Coisa bem simples mesmo.

Mas estou tendo problemas nos espaçamentos entre elementos dentro de uma mesma div.

 

Como podem ver, o termo "Assista ao vídeo" fica bem distante do vídeo que também apresenta problemas no posicionamento dos controles.

 

Qual é a solução para este problema ou algo que eu esteja fazendo de errado. Já tentei inserir espaços em branco entre um elemento e outro para ver se melhora mas a tendência é de que a div cresça para baixo e continue com as aberturas grandes.

 

Inseri o site compactado e também a index.html e o estilo.css em formato txt. Caso alguém queira dar uma olhada.

 

Obrigado!

site.JPG

Tarefa_Semana_5.zip

estilos.txt

index.txt

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Cris Ider Cara, sou iniciante em HTML também mas eu tentei o seguinte, usei o inspecionar do chrome e coloquei assim 
<video controls="" width="auto" height="auto">, o vídeo ficou bem grande e sem as bordas "invisíveis" 
                      

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fiz um teste com o seu código e não apresentou os espaçamentos tão grandes como você visualiza, pode verificar se persiste em navegadores diferentes?

 

Por padrão, os elementos de heading possuem margens, mas você pode sobrescrever com CSS e para visualizar, basta inspecionar o elemento no seu navegador.

 

Eu coloquei o seu código aqui: https://jsfiddle.net/tf0rxp9o/ - e adicionei uma regra simples para adicionar borda nos elementos, assim você tem uma ideia das margens de cada um.

 

Veja também os erros de sintaxe indicados no editor, o elemento <br> por exemplo, não precisa de uma tag de fechamento.

 

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Valeu pela dica, navegantenarede!

 

Eu tentei em 3 computadores diferentes (2 com Windows 7 - Google Chrome e 1 Windows XP - Google Chrome) e todos apresentaram essa distância exagerada.

Vou experimentar em browsers diferentes.

E uma pergunta: O seu mostrou como na imagem que eu postei acima ou ficou mais próximo?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Cris Ider, como o @FFmarini disse: o problema está nas dimensões do vídeo.

 

Nesse sentido, você está usando uma altura (height) desproporcional a largura (width). Assim, a altura do elemento video está recebendo uma altura de 375px, como você definiu:

<video controls width="400" height="375">

No entanto, a altura do conteúdo (a parte que vemos o vídeo, em si) não segue essa altura do elemento, porque está desproporcional a largura. Por isso, você tem que remover o atributo height ou alterar o valor para auto.

 

Solução 1

<video controls width="400">

 

Solução 2

<video controls width="400" height="auto">

 

Conclusão

Ambas soluções configuram a altura do elemento para ser automática, portanto, proporcional à largura. Dessa maneira, se quiser aumentar o tamanho do vídeo, de agora em diante, basta alterar o valor do atributo width.

 

Untitled.png

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal, muitíssimo obrigado! Funcionou exatamente como vocês falaram.

 

Sempre que eu precisar, lembrarei de vocês. rs rs rs

 

Obrigado!

  • Curtir 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×