Jump to content
Fórum Script Brasil
  • 0

Otimização do CSS

Carlos Rocha

Asked by Carlos Rocha,

 Share

Question

Carlos Rocha

Carlos Rocha

Posted
Posted (edited)

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. Edited by Carlos Rocha
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
Carlos Rocha

Carlos Rocha

Posted
  • Author
Posted

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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing


  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652.1k
×
×
  • Create New...