Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

geison66

Colocar Imagens uma abaixo da outra

Por , em Desenvolvimento frontend

Recommended Posts

geison66    0

geison66
Postado

Boa noite Amigos,

Criei esse código abaixo, porém as imagens estão ficando uma ao lado da outra, e eu preciso que elas fiquem uma abaixo da outra.

 

 

 

<html>
<head>
<style type="text/css">
.tecno-media {
    position: fixed;
    margin-left: -89px;
    width: 60px;
    background-color: rgb(255, 255, 255);
    border-radius: 3px 0px 0px 3px;
    padding: 15px;
    border-top: 1px solid rgb(219, 219, 219);
    border-bottom: 1px solid rgb(219, 219, 219);
    border-left: 1px solid rgb(219, 219, 219);
}

.tecno-media li {
margin:10px
}

.tecno-slide {
height:48px;
width:48px;
margin:10px;
float:left;
-webkit-transition:all ease 0.3s;
-moz-transition:all ease 0.3s;
-o-transition:all ease 0.3s;
-ms-transition:all ease 0.3s;
transition:all ease 0.3s
}

.tecno-slide:hover {
background-position:0px -48px;
box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8)
}

.twitter-hover {
background-image:url('http://i.imgur.com/iPuwXb7.png')
}

.facebook-hover {
background-image:url('http://i.imgur.com/tXubCxu.png')
}

.steam-hover {
background-image:url('http://i.imgur.com/oyn4LoT.png')
}

</style>
</head>

<body>
<div id="tecno-media">
<a href="https://www.twitter.com/TecnoHardClan"><div class="twitter-hover tecno-slide"></div></a>
<a href="https://www.facebook.com/TecnoHardClan"><div class="facebook-hover tecno-slide"></div></a>
<a href="http://steamcommunity.com/groups/tecno4ever"><div class="steam-hover tecno-slide"></div></a>
</div>

</body>
</html>

 

 

 

Já usei <p>, <br />, e nenhum dá certo.

 

Fico no aguardo de uma ajuda.

 

Abraços!

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heitor Sousa    9

Heitor Sousa
Postado

Cara, somente para o que você precisa você altera o css pra isso:

 

#tecno-media {
   
    width: 60px;
    background-color: rgb(255, 255, 255);
    border-radius: 3px 0px 0px 3px;
    padding: 15px;
    border-top: 1px solid rgb(219, 219, 219);
    border-bottom: 1px solid rgb(219, 219, 219);
    border-left: 1px solid rgb(219, 219, 219);
}

Você chama a <div id="tecno-media"> através de um id e no css está chamando como se fosse uma classe. ( #divid )( .classid )

Tira o position:fixed e o margin left.

Compartilhar este post

Link para o post
Compartilhar em outros sites

geison66    0

geison66
Postado

retire o float: left; de .tecno-slide

 

 

Cara, somente para o que você precisa você altera o css pra isso:

 

#tecno-media {
   
    width: 60px;
    background-color: rgb(255, 255, 255);
    border-radius: 3px 0px 0px 3px;
    padding: 15px;
    border-top: 1px solid rgb(219, 219, 219);
    border-bottom: 1px solid rgb(219, 219, 219);
    border-left: 1px solid rgb(219, 219, 219);
}

Você chama a <div id="tecno-media"> através de um id e no css está chamando como se fosse uma classe. ( #divid )( .classid )

Tira o position:fixed e o margin left.

 

Obrigado pela ajuda pessoal.

 

Problema resolvido!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito