Otimização do CSS

Carlos Rocha · March 15, 2012 at 12:00 PM

Pessoal. Bom Dia!

Tenho a seguinte lista desordenada que pretendo fazer um menu drop down com ela.

Porem, gostaria de otimizar meu css.

O que eu tenho que fazer?

Esse é o HTML:

    <ul id="menu">
        <li><a href="index.php">Home</a></li>
        <li><a href="anuncie.php">Anuncie</a></li>
        <li><a href="contato.php">Contato</a></li>
        <li><a href="pesquisa.php">Comprar</a>
            <ul id="sub_menu_compra">
                <li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento">Apartamento</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=casa">Casa</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=chacara">Chácara</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=fazenda">fazenda</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=kitnet">Kitnet</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=sala">Sala</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=sobrado">Sobrado</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=sobreloja">Sobre Loja</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=terreno">Terreno</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento" class="endlist" >Outros</a></li>
            </ul>
        </li>
        <li><a href="lancamentos.php">Lançamentos</a></li>
        <li><a href="quemsomos.php">Quem Somos</a></li>
        <li><a href="servicos.php">Serviços</a></li>
    </ul>

A ideia é fazer um menu parecido com esse ai:

http://www.minhaprimeiracasa.com.br/

Outra coisa que eu não consegui(talvez seja por causa da otimização foi colocar uma imagem(Seta para baixo que muda de cor quando o linl em hover) ao lado do menu comprar.

Esse é o CSS:

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
background-image:url(img/fundo_site.jpg); 
background-repeat:repeat-x;
margin: 0; /*AQUI, COLOCAMOS TODAS AS MARGENS(top,button, left e right) EM 0.*/
}

ul#menu {
list-style-type:none;
width: 750px;;
margin: 0 auto;
}

ul#menu li {
float:left;
position:relative;
padding:3px;
}
ul#menu li a{
display:block;
padding: 8px 10px;
background-image:url(../../img/fundo_site.jpg);
background-repeat:repeat-x;
color:#44275;
display: block;

border-top-color: rgb(221, 221, 221); 
border-top-width: 2px; 
border-top-style: solid; 

border-left-color: rgb(221, 221, 221); 
border-left-width: 2px; 
border-left-style: solid; 

border-right-color: rgb(221, 221, 221); 
border-right-width: 2px; 
border-right-style: solid; 

}
ul#menu li a:hover{
   background:#0066FF;
   color:#CCC
}

ul#menu li:hover ul#sub_menu_compra li{
display:block;
float:none;
}

ul#sub_menu_compra {
position:absolute;
left: -36px;
}

ul#sub_menu_compra li{
display:none;
list-style-type:none;
width: 130px;
margin: 0 auto;
padding:0px;
}

Tentei olhar no codigo fonte dessa pagina mas toda tentativa que fiz de entender seu CSS(enorme e não comentado).

A ideia é o menu igual ao site modelo.

O meu projeto pode ser acompanhado em http://www.dinamicaimoveis.com.br/novo/

Estou a 3 dias tentando entender o que foi feito naquele menu mas não consegui.[/code]

brunoais · March 15, 2012 at 06:49 PM

Não consigo perceber o código, falta-lhe cor.... usa o geshi (indicar a linguagem na tag code)

Carlos Rocha · March 16, 2012 at 10:50 AM

Agora a duvida mudou, eu alterei o texto.

Relei-a por favor.

Obrigado!

brunoais · March 16, 2012 at 10:17 PM

Usa as seguintes recomendações:

[*]Usa classes e não id's para "encontrar" elementos no DOM

[*]Encontra os elementos relevantes usando caminhos relativos a partir de um "pai" (já tens uma coisa do género e perto disto)

Mais do que isso n te posso ajudar a n ser usares simplificações como o border-left em vez de cada um dos border-left-color, border-left-width, etc...

Carlos Rocha · March 16, 2012 at 11:19 PM

Pessoal, por favor.

Fazer com tabelas é bem mais facil. Porem informaram que a forma correta de fazer é, por exemplo, usando div's.

Então, da forma abaixo, sai tudo centralizado a esquerda. Como arrumar com CSS?

Segue abaixo uma print scream;

index.php

<?php 
  session_start(); 
  include ("global/config/constantes.php"); 
  include ("global/config/conexao.php")
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo titulo_empresa;?></title>
<?php 
  include ("global/config/campos_meta.php");	
  header  ("Content-Type: text/html; charset=utf-8");
?>
<link href="global/config/body.css" rel="stylesheet" type="text/css"></link>
<link href="global/config/menu.css" rel="stylesheet" type="text/css"></link> 
</head>
<body>
  <div class="site">
     <div class="topo"><?php include("global/topo.php");   ?></div>
     <div class="tarja"><img src="img/base_menu.gif" width="100%" height="8" /></div>
     <div class="conteudo"><?php include("index_conteudo.php");?></div> 
     <div class="rodape"><?php include("global/base.php");   ?></div>
  </div>
</body>
</html>

body.css

body { 
font-family: Verdana, Geneva, sans-serif;
font-size: 14px; 
margin: 0px; 
background-image:url(../../img/fundo_site.jpg);
background-repeat: repeat-x; 
} 

.site{
position:relative; 
margin: 0px auto;
}
  /*tudo dentro da div site */
  .topo {    
   top:10px;
   width: 1000px; 
   height: 80px; 
  } 
  /*inicio das div's dentro da div topo */
  .creci{   
	  left:300px;
  }
  .logomarca{   
	  left:0;
  }
  .menu_lista{   
	  left:200px;
	  top:60px;
	  width:750px;
  }
  
  /*fim das div's dentro da div topo */
  .tarja {    
   top:110px;
   width: 100%; 
  } 
  .conteudo {    
   top:118px;
   width: 1000px; 
  }
  /*inicio das div's dentro da div conteudo */
  .busca_rapida{		  
	  left:0;
	  width:500px;
	  height:150px;
	  border: 2;
	  border-radius:10 10 10 10;
  }
  /*fim das div's dentro da div conteudo */
  .rodape {    
   top:500px;
   width: 1000px; 
   height: 30px; 
  }
/*tudo dentro da div site */

menu.css

ul#menu {
list-style-type:none;
width:730px;;
margin: 0 auto;
}

ul#menu li {
float:left;
position:relative;
padding:1px;
}
ul#menu li a{
display:block;
padding: 8px 10px;
background-image:url(../../img/fundo_site.jpg);
background-repeat:repeat-x;
color:#44275;
display: block;

border-top-color: rgb(221, 221, 221); 
border-top-width: 2px; 
border-top-style: solid; 

border-left-color: rgb(221, 221, 221); 
border-left-width: 2px; 
border-left-style: solid; 

border-right-color: rgb(221, 221, 221); 
border-right-width: 2px; 
border-right-style: solid; 

}
ul#menu li a:hover{
   background:#0066FF;
   color:#CCC
}

ul#menu li:hover ul#sub_menu_compra li{
display:block;
float:none;
}

ul#sub_menu_compra {
position:absolute;
left: -36px;
}

ul#sub_menu_compra li{
display:none;
list-style-type:none;
width: 130px;
margin: 0 auto;
padding:0px;
}

Topo.php

<div class="creci">
  <?php echo titulo_cabecalho; ?> - CRECI PF: 14977, Tels.: <?php echo tel_site." e ".cel_site; ?><br />
  Endereço: <?php echo endereco_site; ?><br /><img src="img/icon-caixa.gif" height="25" alt="" />
</div>
<div class="logomarca"><img src="img/logo.png" width="200" alt="" /></div>
<div class="menu_lista">
    <ul id="menu">
        <li><a href="index.php">Home</a></li>
        <li><a href="contato.php">Contato</a></li>
        <li><a href="pesquisa.php">Comprar</a>
            <ul id="sub_menu_compra">
                <li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento">Apartamento</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=casa">Casa</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=chacara">Chácara</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=fazenda">fazenda</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=kitinet">Kitinet</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=sala">Sala</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=sobrado">Sobrado</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=sobreloja">Sobre Loja</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=terreno">Terreno</a></li>
                <li><a href="pesquisa.php?acao=pesquisa&imovel=apartamento" class="endlist" >Outros</a></li>
            </ul>
        </li>
        <li><a href="indique.php">Indique um imóvel</a></li>
        <li><a href="opotunidade.php">Oportunidade</a></li>
        <li><a href="quemsomos.php">Quem Somos</a></li>
        <li><a href="servicos.php">Serviços</a></li>
    </ul>
</div>

Segue a print

mjamado · March 16, 2012 at 11:21 PM

EDIT: carcleo, já vi que voltaste a responder, e só estás a piorar o problema; não faças isso com div e de forma nenhuma faças isto com table! A forma correcta é com ul.

Oh, brunoais, de vez em quando sais-te com cada conselho...

Usa classes e não id's para "encontrar" elementos no DOM

Sempre que possível, devem ser usados id. Os id são únicos na DOM, e os browsers encontram-nos muito mais depressa. Certifica-te é que são mesmo únicos. Para tudo o resto, classes. Já agora, se um elemento (por tag) for usado sempre com o mesmo estilo, mesmo que em parte, usa a própria tag como selector. Também deves evitar ul#menu, porque é redundante: o id #menu já é único, é escusado qualificá-lo com a tag.

Encontra os elementos relevantes usando caminhos relativos a partir de um "pai" (já tens uma coisa do género e perto disto)

Sempre que possível, evita encontrar elementos por caminhos relativos. Ao ver uma regra como div a, podemos ser levados a pensar que o motor vai percorrer a DOM à procura das div e depois, dessas, ver quais têm a dentro; isso é errado: os browsers interpretam as regras CSS da direita para a esquerda, o que quer dizer que o motor vai percorrer a DOM à procura de todos os a e depois, partindo dos respectivos nodos encontrados, percorrer de novo a DOM para cima, para verificar se o a encontrado está dentro de uma div. Acho que fica claro que é bastante mais ineficiente.

O teu CSS já faz funcionar o menu? Não testei, mas se é só uma questão de optimização, o que se arranja de melhor é isto:

body {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 100%;
        color: #666;
        background-color: #fff;
        background-image:url(img/fundo_site.jpg); 
        background-repeat:repeat-x;
        margin: 0;
}

#menu,
#sub_menu_compra li
{
/* separados por uma vírgula, quer dizer que aplica a um e a outro;
    o #sub_menu_compra li é refinado lá em baixo
*/
        list-style-type:none;
        width: 750px;;
        margin: 0 auto;
}

#menu li {
        float:left;
        position:relative;
        padding:3px;
}

#menu a{
/* aqui estava a regra [#menu li a], o que é escusado: se o a está dentro do li,
    que está dentro do #menu, quer dizer que o a está dentro do
    menu - e nunca pode estar fora do li, visto que #menu é um ul (que
    só aceita li dentro)
*/
        display:block;
        padding: 8px 10px;
        background-image:url(../../img/fundo_site.jpg);
        background-repeat:repeat-x;
        color:#44275;
        display: block;

        border: 2px solid rgb(221, 221, 221);
        border-bottom: none;
}
#menu a:hover{
   background:#0066FF;
   color:#CCC
}

#menu li:hover #sub_menu_compra li{
/* cuidado com esta regra - isto pode dar problemas no IE <9! Até ao IE9, só os
    <a> podiam ter :hover.
*/
        display:block;
        float:none;
}

#sub_menu_compra {
        position:absolute;
        left: -36px;
}

#sub_menu_compra li{
        display:none;
        width: 130px;
        padding:0px;
}

Carlos Rocha · March 17, 2012 at 12:25 AM

Alterei o CSS do menu para o teu codigo e alterei as classes para id's e alterei tambem as classe das divs e ficou assim:

body { 
font-family: Verdana, Geneva, sans-serif;
font-size: 14px; 
margin: 0px; 
background-image:url(../../img/fundo_site.jpg);
background-repeat: repeat-x; 
} 

#site{
position:absolute;
margin: 0px auto;
}
  /*tudo dentro da div site */
  #topo {    
   position:absolute;
   width: 1000px; 
   height: 80px; 
  } 
  /*inicio das div's dentro da div topo */
  #logomarca{   
          position:absolute;
	  left:0;
  }
  #creci{  
          position:absolute;
	  left:300px;
  }
  #menu_lista{   
          position:absolute;
	  left:200px;
	  top:60px;
	  width:750px;
  }
  
  /*fim das div's dentro da div topo */
  #tarja {
   position:absolute;
   top:110px;
   width: 100%; 
  } 
  #conteudo {
   position:absolute;
   top:118px;
   width: 1000px; 
  }
  /*inicio das div's dentro da div conteudo */
  #busca_rapida{		
          position:absolute;  
	  left:0;
	  width:500px;
	  height:150px;
	  border: 2;
	  border-radius:10 10 10 10;
  }
  /*fim das div's dentro da div conteudo */
  #rodape {
   position:absolute;
   top:500px;
   width: 1000px; 
   height: 30px; 
  }
/*tudo dentro da div site */

Veja como ficou:

Mas ainda não consegui centralizar.

Carlos Rocha · March 17, 2012 at 05:02 PM

Boa tarde!

Desculpe o incômodo no fim de semana.

Estou tentando migrar das tabelas para os div’s e listas, mas esta muito difícil.

Por mais que eu codifique no CSS não consigo manipular os div’s.

Vocês poderiam me orientar?

Bom, é o seguinte:

Estou tentando fazer um topo igual ao da pagina http://www.minhaprimeiracasa.com.br/. Com uma logo no canto esquerdo, uns dizeres no canto direito e o menu drop down logo abaixo dos dizeres.

Meu Html ficou assim:

<?php 
session_start();
header  ('Content-Type: text/html; charset=utf-8'); // Precisa ficar aqui senão dá problema com o arquivo de classe conexão
include ("global/config/conexao.php");
include ("global/config/constantes.php"); 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo titulo_empresa;?></title>
<?php  include ("global/config/campos_meta.php"); ?>
  <link rel="stylesheet" type="text/css" href="global/config/body.css" /></link>
  <link rel="stylesheet" type="text/css" href="global/config/menu.css" /></link>
</head>
<body>
  <div id="topo"><?php include("global/topo.php");   ?></div>
  <div id="base_menu"><img src="img/base_menu.gif" width="100%" height="8" alt="" /></div>
  <div id="conteudo"><?php include("index_conteudo.php");   ?></div>
  <div id="base"><?php include("global/base.php");   ?></div>
</body>
</html>

Tenho duas chamadas de código css. Uma para um css geral e outro para o menu.

Body.css

* {          
    margin:0; /*Assim, todo os elementos do site ficaram colodas nos bordas do navegador.*/
    padding:0; /*Assim, todos os elementos que estiverem no site ficaram sem espaçamentoe todos alinhados para a esquerda*/
}

body {
                font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-size: 14px;
                color: rgb(0, 0, 0); 
    background-image:url(../../img/fundo_site.jpg); 
    background-repeat:repeat-x;
}
img {
                border:none;
}
ul {
  list-style-type: none;
}

#topo {
                margin:0 auto;
                width:1000px;
}
                  #logomarca {
                                 float:left;
                                 top:10px;
                                 left:0px;
                                 width:200px;
                  }
                  #dados_cli {
                                 float:left;
                                 top:10px;
                                 left:350px;
                                 width:800px;
                  }
                  #div_menu {
                                 float:left;
                                 top:68px;
                                 left:250px;
                                 width:200px;
                  }

#base_menu {
                margin:0 auto;
                width:100%;
}
#conteudo {
                margin:0 auto;
                width:1000px;
}
#base {
                margin:0 auto;
                width:1000px;
}

Men.css

ul#menu {
                list-style-type:none;
                width: 750px;;
                margin: 0 auto;
}

ul#menu li {
                float:left;
                position:relative;
                padding:3px;
}
ul#menu li a{
                display:block;
                padding: 8px 10px;
                background-image:url(../../img/fundo_site.jpg);
                background-repeat:repeat-x;
                color:#44275;
                display: block;

                border-top-color: rgb(221, 221, 221); 
                border-top-width: 2px; 
                border-top-style: solid; 

                border-left-color: rgb(221, 221, 221); 
                border-left-width: 2px; 
                border-left-style: solid; 

                border-right-color: rgb(221, 221, 221); 
                border-right-width: 2px; 
                border-right-style: solid; 

}
ul#menu li a:hover{
   background:#0066FF;
   color:#CCC
}

ul#menu li:hover ul#sub_menu_compra li{
                display:block;
                float:none;
}

ul#sub_menu_compra {
                position:absolute;
}

ul#sub_menu_compra li{
                display:none;
                list-style-type:none;
                width: 130px;
                margin: 0 auto;
                padding:0px;
}

Depois disso, não consigo mover os divs usando nada. Nem top, nem left, nem margim-left. Nada funciona.

Onde estou errando?

Sinceramente. Se eu não conseguir ajuda, vou continuar usando Tabelas. Pois assim, tenho certeza de onde vão os elementos.

Desde já agradeço;

Carlos Rocha

Sign In

Otimização do CSS

Recommended Posts

Carlos Rocha

brunoais

Carlos Rocha

brunoais

Carlos Rocha

mjamado

Carlos Rocha

Carlos Rocha

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information