Ir para conteúdo
Fórum Script Brasil
  • 0

Otimização do CSS

Carlos Rocha

Perguntado por Carlos Rocha,

 Share

Pergunta

Carlos Rocha

Carlos Rocha

Postado
Postado (editado)

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. Editado por Carlos Rocha
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
Carlos Rocha

Carlos Rocha

Postado
  • Autor
Postado

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 */
menucss 
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 para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...