Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Marcelo Mousinho

Problemas com CSS no Chrome

Recommended Posts

Bom dia.

 

Estou desenvolvendo meu primeiro site e estou tenho problemas de compatibilidade, a compilação estava tudo ok até eu começar a Desenvolver as <li> para um menu horizontal, ele abre normal no IE e o Edge, mais no Chrome não abre a formatação correta dos menus.

 

Coloquei em anexo como abre no I.E e no Crohme.

 

Segue o código CSS abaixo.

Informo que estou trabalhando com Dreamweaver CC 2017.

 


*{
    margin: 0;
    padding: 0;
    font-size: 100%;
    border: none;
    outline: none;
    box-sizing: border-box;
    
}

body{
    background: #A29D9D;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

img{
    max-width: none;
}
#conteudo{
    width: 1200px;
    height: 1510px;
    margin: auto;
}

#topo{
    width: 1190px;
    height: 171px;
    padding: 2px;
    margin-left: 2px;
    
}

#menu{
    width: 1200px;
    height: 90px;
    margin: 20px;
}

#menu ul{
    font: arial, tahoma, verdana; 
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    position: relative;
    display: block;
}

#menu ul li{
    float: left;
    position: relative;
    display: block;
    
}
    
    #menu ul li a{
        color:#3B0FCF;
        background:#FFF;
        text-decoration: none;
        margin: 0 1px;
        padding: 15px 20px;
        border-top: 2px solid #555;
        display: block;    
        
    }    
    

#carrossel{    
    width: 1200px;
    height: 310px;
}

#carrossel img{
    width: 1200px;
    height: 310px;
}

#carrossel ul{
    list-style: none;
}

#carrossel ul li{
    border: 1px
        solid  #000000;
    
}

#conteudomeio{
    background: #676263;
    width: 1200px;
    height: 760px;
    padding-top: 30px;
    padding-bottom: 20px;
}

#conteudoinferior{
    background: #C50C0F;
    width: 1200px;
    height: 310px;
    padding-top: 30px;
    padding-bottom: 20px;
}

#rodape{
    background: #99129C;
    width: 1200px;
    height: 69px;
}


#banner{
    width: 1190px;
    height: 171px;
}

#colunas{
    background: #9DD4D0;
    width: 356px;
    height: 751px;
    margin: 0px 24px 0px 20px;
    float: left
}

#titulocoluna{
    background: #DBBD25;
    width: 356px;
    height: 50px;
    
}

#videocoluna{
    background: #000;
    width: 356px;
    height: 186px;
    margin-top: 10px;
}

#linkscoluna{
    background: #E4ADAE;
    width: 356px;
    height: 485px;
    margin-top: 10px;
    }

#categoriascolunas{
    background: #034138;
    width: 356px;
    height: 150px;
    margin-top: 10px;
    margin-bottom: 27px;
}

#imagemcolunas{
    background: #034138;
    width: 185px;
    height: 150px;    
    float:left;
}

#textocolunas{
    background: #AC1F21;
    width: 171px;
    height: 150px;    
    float:left;
}

#colunainferior{
    background: #83DCF3;
    width: 356px;
    height: 300px;
    float: left;
    margin: 0px 24px 0px 20px;
}

#titulocolunainferior{
    background: #1CDC1A;
    width: 356px;
    height: 45px;
}

#linkscolunainferior{
    background: #B75556;
    width: 356px;
    height: 245px;
    margin-top: 10px;
}

#imagenspagamentos{
    background: #000000;
    width: 356px;
    height: 130px;
    margin-top: 10px;
}

#textocolunainferior{
    background:  #79409F;
    width: 356px;
    height: 105px;
    margin-top: 10px;
}

.bannermmnovo{
    background: url(../imagens/bannermmnovook.jpg);
    width: 1190px;
    height: 171px;
    margin: auto;
    
}

.menu{
    width: auto;
    height: auto;
    margin: auto;
    float: left;
}

@media (max-width: 489px){
}


Segue abaixo o HTML.


<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content="width=device-whidt, intial-scale=1">
<meta name="Description" content="Transportes Coletas e Express">
<meta name="author" content="Marcelo Mousinho">
<link rel="icon" href='imagens/Sem Título-1.png'>    
    
<title>MM Transportes</title>
    
<link href='css/style.css' rel='stylesheet'>
</head>
<?php include'scripts.php';?>

<body>

    
<div id='conteudo'>

    <div id='topo'>

  <div id='banner'>    
  
        <div class="bannermmnovo"></div>
        
        </div>    
    
  </div>
  <div id='menu'>
  <nav class="menu">
   <ul>
    <li><a href="#">INICIO</a></li>
       <li><a href="#">SERVIÇOS</a></li>
       <li><a href="#">SOBRE NÓS</a></li>
       <li><a href="#">CLIENTES</a></li>
       <li><a href="#">CONTATOS</a></li>
       <li><a href="#">APRESENTAÇÃO</a></li>
       <li><a href="#">TRABALHE CONOSCO</a></li>
       <li><a href="#">APRESENTAÇÃO</a></li>
      </nav>
  </div>
    <div id='carrossel'> 
        <ul>
            <li><img src='imagens/courriercarrossel2.jpg'</li>
            <li><img src='imagens/transportescarrossel.jpg'</li>
            <li><img src='imagens/portaaportacarrosselfiorino.jpg'</li>
        </ul>
      </div>
<div id='conteudomeio'>
      <div id='colunas'>    
        <div id='titulocoluna'>
            titulo coluna1
        </div>
        <div id='videocoluna' style="color: #FFFFFF">
            video
        </div>    
        <div id='linkscoluna'>
            Links
        </div>    
                
        </div>    
        
        <div id='colunas'>    
        <div id='titulocoluna'>
            titulo coluna2
        </div>    
        <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
        </div>    
        
        <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
            
        </div>    
        
        <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
            
        </div>    
        
        <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
            
        </div>    
        
        
        </div>    
        
        <div id='colunas'>    
        <div id='titulocoluna'>
            titulo coluna3
        </div>    
                    
        <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
        </div>    
            <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
        </div>    
        <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
        </div>    
            <div id='categoriascolunas'>
            <div id='imagemcolunas'>
                 Imagem
            </div>
            
            <div id='textocolunas'>
                Texto
            </div>
        </div>                    
                                    
        </div>    
    </div>
    <div id='conteudoinferior'>
        <div id='colunainferior'>
            <div id='titulocolunainferior'>
                Titulo1
            </div>
            <div id='linkscolunainferior'>
                Links
            </div>
        </div>
        <div id='colunainferior'>
            <div id='titulocolunainferior'>
                Titulo2
            </div>
            <div id='textocolunainferior'>
                texto
            </div>
            <div id='imagenspagamentos' style="color: #F5F3F3">
                imagens pagamentos
            </div>
        </div>
        <div id='colunainferior'>
            <div id='titulocolunainferior'>
                Titulo3
            </div>
            <div id='textocolunainferior'>
                texto
            </div>
            <div id='imagenspagamentos' style="color: #F5F3F3">
                imagens pagamentos
            </div>
        </div>
    </div>
    <div id='rodape'>
        rodape
    </div>
    
    </div>
</body>


Desde já agradeço.
</html>

 

chrome.jpg

I E.jpg

Editado por Simon Viegas
Inserir tag CODE para o código

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Marcelo Mousinho Olá, seja bem vindo em nosso Clube do Hardware.

 

Bem, preciso iniciar dizendo que o Dreamweaver é uma das péssimas escolhas de IDE para desenvolvimento. Além de ser paga e pesada,  suja muito o código, fazendo você perder tempo tirando o que não quer do que fazendo o que quer!

 

Quanto ao seu problema, o que está havendo ali pode ser uma questão de algum conflito de regras.

Experimente apertar o F12  e ver o que está de errado no código no chrome.

Eu faço isso. Quando dá algum problema assim, eu inspeciono o CSS pelo Chrome DEV tool(F12)

 

Olhando para seu código posso dizer  algumas coisas...

Por exemplo o elemento <nav>  é novo do HTML 5.    Se for usar ele,  não é necessário mais usar o UL e nem LI

Basta criar desta maneira:

 

<nav id="menu">
   <a href="#">Item menu 1</a>
   <a href="#">Item menu 2</a>
   <a href="#">Item menu 3</a>
   <a href="#">Item menu 4</a>
</nav>  

Sim, é mais fácil este é o básico do menu horizontal com este elemento.

Basta só estilizar no CSS.

 

Outra coisa bastante errada, você está usando diversas vezes o mesmo identificador nos elementos.

ID não se repete!  Apenas o  CLASS

 

Transforme praticamente todos seus id=""  em  class=""     menos os que não se repetem como por exemplo  id="carrossel",   #conteudo e etc.

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

O id serve para identificar o elemento ao html, javascript, entre outros. O html basicamente pega id e cria um tipo de link, se criar um <a href="#carrossel">, ao ser clicado, ele irá rolar a página até a div que tenha o id="carrossel", o id também serve para estilizar, mas só poderá ser usado uma vez, recomendo que use o id somente para identificação do conteúdo, use class pra estilizar.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • 3 horas atrás, DiF disse:

    @Marcelo Mousinho Olá, seja bem vindo em nosso Clube do Hardware.

     

    Bem, preciso iniciar dizendo que o Dreamweaver é uma das péssimas escolhas de IDE para desenvolvimento. Além de ser paga e pesada,  suja muito o código, fazendo você perder tempo tirando o que não quer do que fazendo o que quer!

     

    Quanto ao seu problema, o que está havendo ali pode ser uma questão de algum conflito de regras.

    Experimente apertar o F12  e ver o que está de errado no código no chrome.

    Eu faço isso. Quando dá algum problema assim, eu inspeciono o CSS pelo Chrome DEV tool(F12)

     

    Olhando para seu código posso dizer  algumas coisas...

    Por exemplo o elemento <nav>  é novo do HTML 5.    Se for usar ele,  não é necessário mais usar o UL e nem LI

    Basta criar desta maneira:

     

    
    <nav id="menu">
       <a href="#">Item menu 1</a>
       <a href="#">Item menu 2</a>
       <a href="#">Item menu 3</a>
       <a href="#">Item menu 4</a>
    </nav>  

    Sim, é mais fácil este é o básico do menu horizontal com este elemento.

    Basta só estilizar no CSS.

     

    Outra coisa bastante errada, você está usando diversas vezes o mesmo identificador nos elementos.

    ID não se repete!  Apenas o  CLASS

     

    Transforme praticamente todos seus id=""  em  class=""     menos os que não se repetem como por exemplo  id="carrossel",   #conteudo e etc.

     

    Obrigado pelas dicas man.

    adicionado 3 minutos depois
    27 minutos atrás, Will871 disse:

    O id serve para identificar o elemento ao html, javascript, entre outros. O html basicamente pega id e cria um tipo de link, se criar um <a href="#carrossel">, ao ser clicado, ele irá rolar a página até a div que tenha o id="carrossel", o id também serve para estilizar, mas só poderá ser usado uma vez, recomendo que use o id somente para identificação do conteúdo, use class pra estilizar.

    Poderia me ajudar? 

     

    Poderia na medida do possível me enviar onde posso mudar para "div class"?

     

    Desculpe, sou novo e é meu primeiro site.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @Marcelo Mousinho No meu post anterior eu indiquei onde que você tem que mudar. :thumbsup:

     

    Onde tem  ID="alguma coisa"  troque para CLASS="alguma coisa"

    Porque,  o ID não pode ser usado mais de uma vez.

     

    Exemplo de lugares onde você usa ID:  Rodapé, elemento div que engloba o site inteiro.. e etc

     

    O class você usa sempre onde vai ter um elemento igual.

     

    No caso por exemplo um dos seus elementos HTML:

    <div id='categoriascolunas'>

    Repare que você tem vários blocos com isso. Este é um elemento que se repete, então ele precisa ser como CLASS.

    Vamos outro exemplo mais simples:

     

    ERRADO:

    <div id="conteiner">
      <div id="box"></div>
      <div id="box"></div>
      <div id="box"></div>
      <div id="box"></div>
    </div>

     

    CERTO:

    <div id="conteiner">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>

    Com isso, você pode implementar no seu código:

    ONDE for elementos que se repetem, troca para class.

     

    Editado por DiF
    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • 1 hora atrás, DiF disse:

    @Marcelo Mousinho No meu post anterior eu indiquei onde que você tem que mudar. :thumbsup:

     

    Onde tem  ID="alguma coisa"  troque para CLASS="alguma coisa"

    Porque,  o ID não pode ser usado mais de uma vez.

     

    Exemplo de lugares onde você usa ID:  Rodapé, elemento div que engloba o site inteiro.. e etc

     

    O class você usa sempre onde vai ter um elemento igual.

     

    No caso por exemplo um dos seus elementos HTML:

    
    <div id='categoriascolunas'>

    Repare que você tem vários blocos com isso. Este é um elemento que se repete, então ele precisa ser como CLASS.

    Vamos outro exemplo mais simples:

     

    ERRADO:

    
    <div id="conteiner">
      <div id="box"></div>
      <div id="box"></div>
      <div id="box"></div>
      <div id="box"></div>
    </div>

     

    CERTO:

    
    <div id="conteiner">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>

    Com isso, você pode implementar no seu código:

    ONDE for elementos que se repetem, troca para class.

     

    Obrigado mesmo pela dica man...

     

    Segue a correção!!!

     

    Esta correto? O Chrome esta reconhecendo!!!

     

    HTML.


     

    <!doctype html>
    <html>
    <head>
    <meta charset='utf-8'>
    <meta name='viewport' content="width=device-whidt, intial-scale=1">
    <meta name="Description" content="Transportes Coletas e Express">
    <meta name="author" content="Marcelo Mousinho">
    <link rel="icon" href='imagens/Sem Título-1.png'>    
        
    <title>MM Transportes</title>
        
    <link href='css/style.css' rel='stylesheet'>
    </head>
    <?php include'scripts.php';?>
    <body>
        
    <div id='conteudo'>
        <div id='topo'>
      <div id='banner'>    
      
            <div class="bannermmnovo"></div>
            
            </div>    
        
      </div>
    <div id='menu'>
       <ul>
        <li><a href="#">Inicio</a></li>
           <li><a href="#">Serviços</a>
          
          <ul>
               <li><a href="#">Express</a></li>
               <li><a href="#">Coletas</a></li>
               <li><a href="#">Porta a Porta</a></li>
               <li><a href="#">Transportes</a></li>
           </ul>
          
          </li>      
           
           <li><a href="#">Sobre nós</a></li>
           <li><a href="#">Clientes</a></li>
           <li><a href="#">Contatos</a></li>
           <li><a href="#">Apresentação</a></li>
           <li><a href="#">Trabalhe conosco</a>
           
           <ul>
               <li><a href="#">Candidatos</a></li>
               
           </ul>
          
          </li>  
           </li>
       </ul>
     </div>
       
       
       
        <div id='carrossel'> 
            <ul>
                <li><img src='imagens/courriercarrossel2.jpg'</li>
                <li><img src='imagens/transportescarrossel.jpg'</li>
                <li><img src='imagens/portaaportacarrosselfiorino.jpg'</li>
            </ul>
          </div>
    <div id='conteudomeio'>
          <div class='colunas'>    
            <div class='titulocoluna'>
                titulo coluna1
            </div>
            <div id='videocoluna' style="color: #FFFFFF">
                video
            </div>    
            <div id='linkscoluna'>
                Links
            </div>    
                    
            </div>    
            
            <div class='colunas'>    
            <div class='titulocoluna'>
                titulo coluna2
            </div>    
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
            </div>    
            
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
                
            </div>    
            
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
                
            </div>    
            
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
                
            </div>    
            
            
            </div>    
            
             <div class='colunas'>    
            <div class='titulocoluna'>
                titulo coluna2
            </div>    
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
            </div>    
            
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
                
            </div>    
            
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
                
            </div>    
            
            <div class='categoriascolunas'>
                <div class='imagemcolunas'>
                     Imagem
                </div>
                
                <div class='textocolunas'>
                    Texto
                </div>
                
            </div>    
            
            
            </div>    
        </div>
        <div id='conteudoinferior'>
            <div class='colunainferior'>
                <div class='titulocolunainferior'>
                    Titulo1
                </div>
                <div id='linkscolunainferior'>
                    Links
                </div>
            </div>
            <div class='colunainferior'>
                <div class='titulocolunainferior'>
                    Titulo2
                </div>
                <div class='textocolunainferior'>
                    texto
                </div>
                <div class='imagenspagamentos' style="color: #F5F3F3">
                    imagens pagamentos
                </div>
            </div>
            <div class='colunainferior'>
                <div class='titulocolunainferior'>
                    Titulo3
                </div>
                <div class='textocolunainferior'>
                    texto
                </div>
                <div class='imagenspagamentos' style="color: #F5F3F3">
                    imagens pagamentos
                </div>
            </div>
        </div>
        <div id='rodape'>
            rodape
        </div>
        
        </div>
    </body>
    </html>

     

    CSS.

    *{
        margin: 0;
        padding: 0;
        font-size: 100%;
        border: none;
        outline: none;
        box-sizing: border-box;
        
    }
    body{
        background: #A29D9D;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style: none;
    }
    img{
        max-width: none;
    }
    #conteudo{
        width: 1200px;
        height: 1510px;
        margin: auto;
    }
    #topo{
        width: 1190px;
        height: 171px;
        padding: 2px;
        margin-left: 2px;
        
    }
    #menu{
        float: left;
        margin: 10px;
    }
        
    #menu ul{
        font: 16px arial, tahome, verdana;
        list-style: none;
        margin: o;
        padding: 0;
    }
    #menu ul li{
        float: left;
        position: relative;
        display: block;
    }
    #menu ul li a {
        color: #555;
        background: #fff;
        text-decoration: none;
        margin: 0 1px;
        padding: 15px 20px;
        border-top: 1px solid #555;
        display: block;
    }
    #menu li ul {
        display: none;
    }
    #menu ul li a:hover {
        background: #066;
        color: #fff;
    }
    #menu li:hover ul {
        display: block;
        position: relative;
        
    }
    #menu li:hover li{
        float:none;
        font-size: 12px;
    }
    #menu li:hover a{
        background: #333;
        color: #fff;
    }
    #menu li a:hover{
        background: #222;
    }
    #carrossel{    
        width: 1200px;
        height: 310px;
    }
    #carrossel img{
        width: 1200px;
        height: 310px;
    }
    #carrossel ul{
        list-style: none;
    }
    #carrossel ul li{
        border: 1px
            solid  #000000;
        
    }
    #conteudomeio{
        background: #676263;
        width: 1200px;
        height: 760px;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    #conteudoinferior{
        background: #C50C0F;
        width: 1200px;
        height: 310px;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    #rodape{
        background: #99129C;
        width: 1200px;
        height: 69px;
    }
    
    #banner{
        width: 1190px;
        height: 171px;
    }
    .colunas{
        background: #9DD4D0;
        width: 356px;
        height: 751px;
        margin: 0px 24px 0px 20px;
        float: left
    }
    .titulocoluna{
        background: #DBBD25;
        width: 356px;
        height: 50px;
        
    }
    #videocoluna{
        background: #000;
        width: 356px;
        height: 186px;
        margin-top: 10px;
    }
    #linkscoluna{
        background: #E4ADAE;
        width: 356px;
        height: 485px;
        margin-top: 10px;
        }
    .categoriascolunas{
        background: #034138;
        width: 356px;
        height: 150px;
        margin-top: 10px;
        margin-bottom: 27px;
    }
    .imagemcolunas{
        background: #034138;
        width: 185px;
        height: 150px;    
        float:left;
    }
    .textocolunas{
        background: #AC1F21;
        width: 171px;
        height: 150px;    
        float:left;
    }
    .colunainferior{
        background: #83DCF3;
        width: 356px;
        height: 300px;
        float: left;
        margin: 0px 24px 0px 20px;
    }
    .titulocolunainferior{
        background: #1CDC1A;\
        width: 356px;
        height: 45px;
    }
    #linkscolunainferior{
        background: #B75556;
        width: 356px;
        height: 245px;
        margin-top: 10px;
    }
    .imagenspagamentos{
        background: #000000;
        width: 356px;
        height: 130px;
        margin-top: 10px;
    }
    .textocolunainferior{
        background:  #79409F;
        width: 356px;
        height: 105px;
        margin-top: 10px;
    }
    .bannermmnovo{
        background: url(../imagens/bannermmnovook.jpg);
        width: 1190px;
        height: 171px;
        margin: auto;
        
    }
    
    @media (max-width: 489px){
    }

     

    adicionado 11 minutos depois

    Segue Modelo como esta ficando...dividi em cores e conforme vou desenvolvendo vou tirando as background!!!

     

    O Que acham???

    Sem título.png

    Editado por DiF
    Botar os códigos com o botão CODE <>

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Agora sim, melhorou muito seu código!

    Uma coisinha que costumo usar, e acho muito bom, é atribuir uma padronização para uma tag, uso muito a section para fazer padronização de alinhamento, por exemplo.

    Um exemplozinho explicando de como funciona isso que te disse:

    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <style type="text/css">
        section { /* Aqui defini que todas as tags sections receberão esse estilo */
          background: black;
          width: 500px;
          height: 500px;
          transition-duration: 0.5s;
          color:green;
        }
        .cont { /*A tag section receberá as atribuições padrões definidas para ela, até que seja sobreposta por uma class ou uma aplicação do style inline*/
          width: 200px;
          height: 250px;
          background: yellow;
        }
        section:hover { /*Aqui defini que todas as tags sections receberão determinado efeito ao passar o mouse*/
          background: green;
          color:white;
          transform: rotateX(-30deg) rotateY(-35deg);
          transition-duration: 0.5s;
        }
      </style>
      <body> <!-- Exemplos -->
        <div class="cont">
          teste div
        </div>
    
        <section class="cont"> <!-- Aqui poderá notar que todo o estilo definido para "section" será atribuido, exceto aqueles que também foram atribuidos na class ".cont", os que estão na class são dados como prioridade e serão definidos, é como se definisse o estilo e dêsse um "!important" -->
          teste section com a class
        </section>
        
        <section>
          teste section sem a class
        </section>
      </body>
    </html>

    Se usar dessa forma não precisará passar o id, a não ser que queira linkar ou usar javascript.

    Boa sorte!

    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






    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

    ×