Ir para conteúdo

Arquivado

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

natant1

alinhamento de div

Recommended Posts

Eae galera, blz? Estou com um problema aqui de css que nao consigo resolver.

Eu tenho um código php que vai fazer uma consulta no banco de dados para álbuns de um determinado artista. Eu gostaria que quando retornasse, fosse exibido assim

IiRmCK5.jpg

Mas, quando alguma div tem mais de duas faixas, neste caso a primeira, acontece que a ultima faixa da outra div fica "grudada" com a ultima faixa da primeira.

assim:

cXreUmv.jpg

03XOqqi.jpg

Alguem saberia me informar o que esta acontecendo e como posso resolver isso?

Códigos:

https://jsfiddle.net/natant1/94wh5d6u/

<div id="conteudoAlbum">
        <img src="https://upload.wikimedia.org/wikipedia/en/8/89/In_the_Zone.png" />
        
        <span id="TituloAlbum">In The Zone</span>
        
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Toxic</span>
        </a>
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Toxic</span>
        </a>
    </div>
    
    <div id="conteudoAlbum">
        <img src="https://upload.wikimedia.org/wikipedia/pt/9/92/Britney_Circus_Album.png" />
        
        <span id="TituloAlbum">Circus</span>
        
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/lVhJ_A8XUgc/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Circus</span>
        </a>
        
    </div>
#conteudoAlbum{
    position: relative;
    background: white;
    width: 300px;
    height: auto;
    margin-top: 30px;
    margin-right: 40px;
    display: inline-block;
    -webkit-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
    -moz-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
    box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
}
#TituloAlbum{
    position: relative;
    font-family: Arial;
    font-size: 1.4em;
    color: black;
    display: block;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 15px;
}
#faixa{
    position: relative;
    display: block;
    height: 85px;
    width: 100%;
    line-height: 85px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
#faixa:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
#numeroFaixa{
    position: absolute;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Arial;
    font-size: 1.4em;
    color: #45C0CF;
    display: inline-block;
}
#iconnum{
    position: relative;
    left: 33px;
    display: inline-block;
    max-height: 85px;
}
#iconnum img{
    display: inline-block;
    max-height: 85px;
}
#nomeFaixa{
    position: absolute;
    display: block;
    left: 200px;
    font-family: Arial;
    font-size: 1.4em;
    color: black;
    display: inline-block;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites
#conteudoAlbum{
    ...
  display: inline-block;  /* retire */
  float:left; /* acrescente */
    ...
}

Muito obrigado!

A altura da div pai estava como auto mas ai eu adicionei um overflow: hidden; e resolveu o problema. Utilizar o overflow foi uma solução boa? Há uma melhor para nao precisar utilizar uma altura fixa? Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • Por GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
    • Por Staypler
      Galera, sou novo no fórum, estou colocando o tópico nessa categoria porque não sabia bem onde classificar.
       
      Mas é o seguinte. Eu quero criar um link em que dentro dele tenha por exemplo mais outros 10 links.
      Daí quando clico nesse link eu sou redirecionado aleatoriamente para qualquer um desses 10 links, e toda vez que eu der f5 redirecione aleatorio para qualquer uma dos 10 e assim por diante.
       
      Alguém pode me ajudar com isso?
       
      No caso eu quero utilizar em um site que estou criando, e daí a pessoa clica no botão e é enviada para qualquer um dos 10 artigos que tenho, por exemplo.
    • Por rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
×

Informação importante

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