Problemas com CSS no Chrome

Marcelo Mousinho · 29 de maio de 2017

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>

DiF · 29 de maio de 2017

@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.

Will871 · 29 de maio de 2017

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.

Marcelo Mousinho · 29 de maio de 2017

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.

DiF · 29 de maio de 2017

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

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.

Marcelo Mousinho · 30 de maio de 2017

1 hora atrás, DiF disse:
@Marcelo Mousinho No meu post anterior eu indiquei onde que você tem que mudar.

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???

Will871 · 2 de junho de 2017

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>