Otimização do CSS

Carcleo · Março 16, 2012

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]

NetBoy16 · Março 16, 2012

Coloca teu codigo na tag code, a visualizacao fica infinitamente melhor, quanto ao menu, você tentou um inspecionar elemento no site que você viu o menu? pq lá mostra todo o css, dai você pode ver como foi feito.

Explica bem qual sua necesisdade que dai eu posso te ajudar.

JCMais · Março 16, 2012

Cara, comece retirando essa tabela do layout.

Tabelas devem ser usadas para exibir dados tabulares, e não montar layout de site. Se continuar usando tabela, vai enfrentar muitas outras dificuldades ao usar CSS.

Carcleo · Março 16, 2012

Coloca teu codigo na tag code, a visualizacao fica infinitamente melhor, quanto ao menu, você tentou um inspecionar elemento no site que você viu o menu? pq lá mostra todo o css, dai você pode ver como foi feito.

Explica bem qual sua necesisdade que dai eu posso te ajudar.

NetBoy.

Se é assim que voce esta dizendo: [ code ]Código[ / code ], foi assim que eu fiz!

JCMais · Março 16, 2012

"inspecionar elemento no site que você viu o menu"

Como assim?

Inspecionar que o NetBoy quis dizer, foi usando alguma ferramenta para isso, como o Firebug.

Desculpem a ignorancia.

Ignorante é aquele que não sabe, e não tem vontade de aprender. :thumbsup:

Carcleo · Março 16, 2012

Olha só:

Esta funcionando perfeito.

O que neu gostaria é de de repente organizar melhor, adicionar alguma coisa que esteja faltando.

Simplificar o código.

Isso aí, foi o que deu para eu fazer com o conhecimento que tenho aliado a pesquisas que fiz.

O css do cara é gigante e não esta comentado.

Para iniciante em css, é praticamente impossivel ler aquilo lá.

Outra coisa: retirar as tabelas e usar div's? Seria isso mesmo?

Diéssica · Março 16, 2012

Outra coisa: retirar as tabelas e usar div's? Seria isso mesmo?

Mais ou menos isso. :)

Pesquisa sobre Tableless.

Evandro Oliveira · Março 16, 2012

Sim, pode começar se livrando das tabelas, porque, no resultado visual, não há nada que se pareça com uma.

Vou ser sincero, não testei o seu menu. Mas algo me diz que não há necessidade daquele position: absolute

Se sua linha de corte for IE7, não é necessário dar um ID pra cada submenu, há um truque que permite fazer menus drop-down de N níveis com duas linhas de CSS

ul#menu ul { display: none; } /* pode remover aquele UL do começo, é apenas para você saber que quem leva o ID "menu" é a lista de nível de topo */
#menu li:hover > ul { display: block; }

Para adicionar setas, como você definiu os links como display: block, fica fácil

#comprar {
   background: url('seta.png') no-repeat;
   padding: 00px; /* Ajuste o valor de 00 até que o texto saia de cima da seta */
}

#comprar:hover {
   background-image: url('seta-hover.png');
} /* Note que antes utilizamos a short syntax e aqui definimos explícitamente background-image. Desta forma, preservamos todas as outras configurações, como no nosso exemplo, o valor no-repeat */

Carcleo · Março 16, 2012

To começando a entender.

Mas, me tira mais uma duvida.

Como colocar aquela tarja azul de fora a fora no browse se definirmos, por exemplo, o tamanho da página em 100px?

E o layout da página ficaria mais ou menos assim?

<?php 
session_start();
header  ('Content-Type: text/html; charset=utf-8');
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 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 id="site">
    <div id="topo"><?php include("global/topo.php");   ?></div>
    <div id="tarja"><img src="img/base_menu.gif" width="1" height="8" /></div>
    <div id="conteudo"><?php include("index_conteudo.php");?></div> 
    <div id="base"><?php include("global/base.php");   ?></div>
 </div>
</body>
</html>

Carcleo · Março 16, 2012

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

Diéssica · Março 16, 2012

Te apresento a propriedade float do CSS :seta: http://www.w3schools.com/cssref/pr_class_float.asp

[esquerda] left — The element floats to the left

[direita] right — The element floats the right

none — The element is not floated, and will be displayed just where it occurs in the text. This is default

inherit — Specifies that the value of the float property should be inherited from the parent element

Tu vai usar muito ela ainda... :thumbsup:

E também a margin, que pode ser usada para centralizar um elemento com largura fixa, caso valor auto :seta: http://www.w3schools.com/css/css_margin.asp

Ex.:

HTML

<div id="site"></div>

CSS

#site {
width:200px;
margin:auto;

Carcleo · Março 16, 2012

Não consegui entender como o float pode ajudar nesse caso meu,

Teria como esplicar melhor?

Desde já agradeço.

Te apresento a propriedade float do CSS :seta: http://www.w3schools.com/cssref/pr_class_float.asp

Diéssica · Março 16, 2012

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

usando o float.

Vê a página que te mandei :)

Arquivado

Otimização do CSS

Recommended Posts

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante