Jump to content

Otimização do CSS


Carlos Rocha
 Share

Recommended Posts

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]

Link to comment
Share on other sites

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

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

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

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

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

aa.png

Link to comment
Share on other sites

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...  :wallbash:

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;
}

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

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:

bb.png

Mas ainda não consegui centralizar.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.