[Resolvido] Css site...

CrazyLOL · Outubro 19, 2012

Olá galera, estou com um problema em um css de um site aqui e gostaria de ajuda, peguei um CSS de um Menu na internet que você poderá ver esse menu pelo link:

Se você passa na opção NOVOS vai abrir um menu, pode observar que abaixo do nome da moto tem uma linha cinza e a imagem da moto a questão é, a imagem não está centralizada com essa linha e queria ajuda para ver se conseguiria entender o codigo de css..

Esse é o CSS:

#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */

body {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;





}

#menu_loja ul, #menu_loja li {

line-height:10px;

text-align:left;

font-size:14px;

}

/* menu starts here */









#menu_loja {

list-style:none;

width:940px;

margin:0 auto;

height:45px;

padding:5px 30px;

/* rounded corners for different browser support */



 /*  border-radius:5px 5px 0 0;

-moz-border-radius:5px 5px 0 0;

-webkit-border-radius:5px 5px 0 0;*/

/* css3 gradient */

  /* background: #FFB515;*/

/*background: -moz-linear-gradient(#A10808, #7A0505) repeat scroll 0 0 transparent;

background:-webkit-gradient(linear, left top, left bottom, from(#A10808), to(#7A0505));*/

/* css3 borders */



/*    border: 1px solid rgba(0, 0, 0, 0.25);

box-shadow:inset 0px 0px 1px #e8edf0;

-moz-box-shadow:inset 0px 0px 1px #e8edf0;

-webkit-box-shadow:inset 0px 0px 1px #e8edf0;*/

}

/* inicia as tabelas */



#menu_loja li {

float:left;

display:block;

position:relative;

text-align:center;

padding:4px 10px;

margin:7px 30px 0 0;

border:none;

}

#menu_loja li:hover {

border:1px solid #b7b7b7;

padding:4px 9px;

/*os cantos redondos  */



   border-radius:5px 5px 0 0;

-moz-border-radius:5px 5px 0 0;

-webkit-border-radius:5px 5px 0 0;

/* css 3 gradiente t */

   background:#fff;

background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;

background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EDEDED));

}

#menu_loja li a {

color: #FFFFFF;

font-weight: bold;

font-size:20px;

display:block;

outline:0;

text-decoration:none;

}

#menu_loja li:hover a {

color:#161616;

}

/* as tabelas de dados  */



#menu_loja .menu-container-1, #menu_loja .menu-container-2, #menu_loja .menu-container-3, #menu_loja .menu-container-4 {

margin:4px auto;

float:left;

position:absolute;

left:-999em;

text-align:left;

padding:10px 5px;

/*border:1px solid #b7b7b7;*/

border-top:none;

z-index:100;

/* cantos redondando das tabelas */

   border-radius:0 5px 5px 5px;

-moz-border-radius:0 5px 5px 5px;

-webkit-border-radius:0 5px 5px 5px;

/* efeito gradientt */

background:#F4F4F4;  

   background: -moz-linear-gradient(top, #EDEDED, #FFFFFF);  

   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EDEDED), to(#FFFFFF)); 

}

#menu_loja .menu-container-1 {

width:140px;z-index:100;

}

#menu_loja .menu-container-2 {

width:280px;z-index:100;

}

#menu_loja .menu-container-3 {

width:420px;z-index:100;

}

#menu_loja .menu-container-4 {

width:990px;z-index:100;

}

#menu_loja li:hover .menu-container-1, #menu_loja li:hover .menu-container-2, #menu_loja li:hover .menu-container-3, #menu_loja li:hover .menu-container-4 {

top:auto;

left:-1px;

}

/* colunas dentro das tabelas */



#menu_loja .column-1, #menu_loja .column-2 {

display:inline;

float:left;

position:relative;

margin:0 5px;

}

#menu_loja .column-1 {

width:130x;

}

#menu_loja .column-2 {

width:260px;

}

#menu_loja .column-3 {

width:390px;

}

#menu_loja .column-4 {

width:520px;

}

/* menu da direita */



#menu_loja .menu-right {

float:right;

margin-right:0px;

}

#menu_loja li .align-right {

/*cantos redondos do menu */



   border-radius:5px 0 5px 5px;

-moz-border-radius:5px 0 5px 5px;

-webkit-border-radius:5px 0 5px 5px;

}

#menu_loja li:hover .align-right {

left:auto;

right:-1px;

top:auto;

}

/* menu h2, h3, p, etc.... */



#menu_loja p, #menu h2, #menu h3, #menu ul li {

line-height:21px;

font-size:12px;

text-align:left;

}

#menu_loja p {

line-height:18px;

margin-bottom:10px;

color:#000000;

}

#menu_loja h3, #menu h2 {

font-size:11px;

margin:7px 0 14px 0;

padding-bottom:5px;

text-transform:uppercase;

color: #999999;

}

#menu_loja li:hover div a {

border-top: 1px solid #CCCCCC;

color: #666666;

font-size: 11px;

padding-left: 6px;

}

#menu_loja li:hover div a:hover {



color:#007D9A;



}

#menu_loja li ul {



list-style:none;

padding:0;

margin-bottom:12px;

}

#menu_loja li ul li {

float: none;

font-size: 12px;

line-height: 24px;

margin: 0;

padding: 0;

position: relative;

text-align: left;

width: 130px;

}

#menu_loja li ul li:hover {

background: none;

border: medium none;

margin: 0;

padding: 0;

}

/* login here */



#menu_loja .form {

margin:10px 0 0 45px;

}

#menu_loja input {

color:#e9e9e9;

font-size:12px;

outline:0 none;

padding:9px;

/* gradient */

   background:#6e6e6e;

background:-moz-linear-gradient(top, #888, #575757);

background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));

/* css3 borders */

   border:1px solid #555;

-moz-border-radius:10px;

-webkit-border-radius:10px;

/* css3 shadow effect */

   -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.1);

-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;

box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;

}

#menu_loja input:focus {

background: none repeat scroll 0 0 #313131;

}

#menu_loja input:hover {

border-color: #000000;

}

#menu_loja .submit input {

background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;

background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));

border-radius: 10px 10px 10px 10px;

box-shadow: 0 0 1px #EDF9FF inset;

color: #FFFFFF;

padding: 9px;

width: 90px;

}

#menu_loja .submit input:hover {

background: -moz-linear-gradient(center top, #444444, #3D3A3A) repeat scroll 0 0 transparent;

background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#3D3A3A));

cursor: pointer;

}

#menu_loja .submit input:active {

background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;

background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));

border: 1px solid #9C9C9C;

color: #FFFFFF;

}

footer {

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.04);

border: 1px solid rgba(0, 0, 0, 0.08);

border-radius: 5px 5px 5px 5px;

box-shadow: 0 3px 1px rgba(0, 0, 0, 0.02) inset, 0 1px 0 white;

padding: 1.5em;

bottom: 0;

display: block;

height: 40px;

left: 0;

position: fixed;

width: 100%;

z-index: 100000;

}

footer h2 {

color: rgba(0, 0, 0, 0.8);

text-shadow: 0 1px 0 white;

font-size: 20px;

font-weight: normal;

left: 50%;

margin-left: -400px;

position: absolute;

width: 500px;

text-shadow: 1px #000000;

font-family: 'PT Sans Narrow', Arial, sans-serif;

}

footer a.youhacked, a.youhacked:visited {

background: url("http://youhack.me/demo/Apple%20itunes%20banner%20rotator/youhack.png") no-repeat scroll right top transparent;

border: medium none;

font-size: 12px;

height: 70px;

left: 50%;

line-height: 31px;

margin: 25px 0 0 110px;

position: absolute;

text-decoration: none;

top: 0;

width: 310px;

color: #000000;

letter-spacing: 1px;

text-shadow: 1px #000000;

}/* Style-Switcher */

#style-switcher {



width: 900px;

margin:0px auto;

height: 34px;

color: red;

border-bottom: 1px solid white;

}

#style-switcher ul {

border-right: 1px solid white;

float: right;

margin: 0;

}

#style-switcher h4 {

display: inline;

color: #153c67;

font-weight: bold;

line-height: 34px;

padding: 0 10px;

border-left: 1px solid white;

}

#style-switcher li {display: inline;}

#style-switcher li a {

float: left;

line-height: 26px;

color: white;

background: #90a6bb;

text-decoration: none;

padding: 0 13px;

display: inline;

margin: 4px 4px 4px 0;

}

#style-switcher li a:hover {background: #3a5a7c;}

#menu_wrap{

margin-top:100px;

}

esse aqui é o MENU

no HTML:

<!-- MENU HORIZONTAL VERMELHO -->
<div id="barra_menu">
     <div id="menu_topo">

<ul id="menu_loja">

<!-- inicia a parte de seminovos -->
 <li><a href="#">Novos</a>
   <div class="menu-container-4">

      <!-- colunnas -->
     <div class="column-1">
       <ul>
         <li><p>Pop 100<a href="#"><img src="honda/modelos/01-pop100.jpg" alt="" width="130" height="90" /></a></p></li>
          <li><p>CG 150 Titan<a href="#"><img src="honda/modelos/07-150titan.jpg" alt="" width="130" height="90" /></a></p></li>
           <li>CBR 600F
         <a href="#"><img src="honda/modelos/12-cbr600f.jpg" alt="" width="130" height="90" /></a></li></p>p
       </ul>
     </div>
     <div class="column-1">

       <ul>
       <li>Biz C-100
        <a href="#"><img src="honda/modelos/biz-100-19-09-2012.jpg" alt="" width="130" height="90" /></a></li>
         <li>NXR Bros 150
         <a href="#"><img src="honda/modelos/08-150bros.jpg" alt="" width="130" height="90" /></a></li>
          <li>NC 700X
         <a href="#"><img src="honda/modelos/NC700X-19-09-2012.jpg" alt="" width="130" height="90" /></a></li>

       </ul>
     </div>
     <div class="column-1">

       <ul>
       <li>Lead 110
        <a href="#"><img src="honda/modelos/02-lead110.jpg" alt="" width="130" height="90" /></a></li>
        <li>CRF 150F
         <a href="#"><img src="honda/modelos/crf150F-27-06-2012.jpg" alt="" width="130" height="90" /></a></li>
           <li>XL700V Transalp
         <a href="#"><img src="honda/modelos/13-xl700transalp.jpg" alt="" width="130" height="90" /></a></li>
          </ul>
     </div>
     <div class="column-1">

        <ul>
         <li>Biz 125
        <a href="#"><img src="honda/modelos/03-biz125.jpg" alt="" width="130" height="90" /></a></li>
        <li>CRF 230F
         <a href="#"><img src="honda/modelos/09-crf230.jpg" alt="" width="130" height="90" /></a></li>
          <li>Shadow 750
         <a href="#"><img src="honda/modelos/15-shadow750.jpg" alt="" width="130" height="90" /></a></li>

       </ul>
     </div>
      <div class="column-1">

        <ul>
         <li>CG 125 FAN
        <a href="#"><img src="honda/modelos/06-150fan.jpg" alt="" width="130" height="90" /></a></li>
        <li>XRE 300
         <a href="#"><img src="honda/modelos/10-xre300.jpg" alt="" width="130" height="90" /></a></li>
         <li>CB 1000R
         <a href="#"><img src="honda/modelos/16-CB1000RV.jpg" alt="" width="130" height="90" /></a></li>
       </ul>
     </div>

      <div class="column-1">
        <ul>
        <li>CG 125 Cargo
        <a href="#"><img src="honda/modelos/05-125cargo.jpg" alt="" width="130" height="90" /></a></li>
           <li>CB 300R
         <a href="#"><img src="honda/modelos/11-cb300r.jpg" alt="" width="130" height="90" /></a></li>
          </ul>
     </div>

    <div class="column-1">
        <ul>
        <li>CG 150 FAN
        <a href="#"><img src="honda/modelos/06-150fan.jpg" alt="" width="130" height="90" /></a></li>
           <li>CB 600F Hornet
         <a href="#"><img src="honda/modelos/12-cbr600f.jpg" alt="" width="130" height="90" /></a></li>
          </ul>
     </div>

   </div>
 <!-- END tutorial menu section ( 2nd menu ) -->

 <li><a href="#">Seminovos</a>

   <div class="menu-container-2"> <!--Home Start -->
   <div class="column-2">
       <p>Conheça a Linha 2013</p>
     </div>

   </div>
   <!-- End Home --> 
 </li>


 </li>
  <li><a href="#">Peças Acessórios e Serviços</a>

   <div class="menu-container-2"> <!--Home Start -->
     <div class="column-2">
       <p>Conheça toda nossa linha de Peças e Acessórios</p>
     </div>
   </div>
   <!-- End Home --> 
 </li>

 <li><a href="#">Noticias</a>

 </li>

  <li><a href="?pg=contato">Fale Conosco</a>

   <!-- End Home --> 
 </li>

</ul>

     </div>
   </div>
<!-- FIM MENU HORIZONTAL VERMELHO -->

OBRIGADO NOVAMENTE.

ricardo_mc · Outubro 19, 2012

É só remover alguns CSS que resolve o problema.

Abra esse arquivo seu:

http://viacometa.com.br/cometamotocenter/css/estilos.css

E delete ou comente o código abaixo, que se encontra na linha 44:

#menu_topo img {
 vertical-align: middle;
 padding-right: 15px;
 padding-left: 15px;
}

Agora, vá no arquivo abaixo:

http://viacometa.com.br/cometamotocenter/css/menu_loja.css

E delete a linha de padding-left:6px do código abaixo que se encontra na linha 168:

#menu_loja li:hover div a {
 border-top: 1px solid #CCC;
 color: #666;
 font-size: 11px;
 padding-left: 6px;     <--- Delete essa linha!!
}

Isso deve refazer o alinhamento das imagens.

Para alinhar verticalmente as imagens da primeira coluna, delete a tag <p> de dentro da <li> que você coloca apenas na primeira coluna.

rafael-tdc · Outubro 19, 2012

Primeiro de tudo, não sei se foi de proposito ou se é parte do erro:

Tira o padding left das imagens e dos a (links que estão "carregando" as imagens),

fazendo isso ja da uma melhorada,

outro erro que reparei foi que na primeira coluna, eles estão dentro de um p

pode reparar que o css desse p tem color:black, as letras da 1ª coluna tao todas pretas, as demais branca, você tem que colocar todas outras colunas um p como na 1ª coluna

por enquanto eh isso, vou fazer mais uns testes, se eu descobrir mais alguma coisa te aviso :thumbsup:

--EDIT:--

Alterei o HTML, coloquei tudo dentro de p, e funcionou melhor:

<!-- MENU HORIZONTAL VERMELHO -->
<div id="barra_menu">
 <div id="menu_topo">
   <ul id="menu_loja">

     <!-- inicia a parte de seminovos -->
     <li><a href="#">Novos</a>
       <div class="menu-container-4"> 

         <!-- colunnas -->
         <div class="column-1">
           <ul>
             <li><p>Pop 100<a href="#"><img src="honda/modelos/01-pop100.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>CG 150 Titan<a href="#"><img src="honda/modelos/07-150titan.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>CBR 600F <a href="#"><img src="honda/modelos/12-cbr600f.jpg" alt="" width="130" height="90" /></a></p></li>
           </ul>
         </div>
         <div class="column-1">
           <ul>
             <li><p>Biz C-100 <a href="#"><img src="honda/modelos/biz-100-19-09-2012.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>NXR Bros 150 <a href="#"><img src="honda/modelos/08-150bros.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>NC 700X <a href="#"><img src="honda/modelos/NC700X-19-09-2012.jpg" alt="" width="130" height="90" /></a></p></li>
           </ul>
         </div>
         <div class="column-1">
           <ul>
             <li><p>Lead 110 <a href="#"><img src="honda/modelos/02-lead110.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>CRF 150F <a href="#"><img src="honda/modelos/crf150F-27-06-2012.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>XL700V Transalp <a href="#"><img src="honda/modelos/13-xl700transalp.jpg" alt="" width="130" height="90" /></a></p></li>
           </ul>
         </div>
         <div class="column-1">
           <ul>
             <li><p>Biz 125 <a href="#"><img src="honda/modelos/03-biz125.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>CRF 230F <a href="#"><img src="honda/modelos/09-crf230.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>Shadow 750 <a href="#"><img src="honda/modelos/15-shadow750.jpg" alt="" width="130" height="90" /></a></p></li>
           </ul>
         </div>
         <div class="column-1">
           <ul>
             <li><p>CG 125 FAN <a href="#"><img src="honda/modelos/06-150fan.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>XRE 300 <a href="#"><img src="honda/modelos/10-xre300.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>CB 1000R <a href="#"><img src="honda/modelos/16-CB1000RV.jpg" alt="" width="130" height="90" /></a></p></li>
           </ul>
         </div>
         <div class="column-1">
           <ul>
             <li><p>CG 125 Cargo <a href="#"><img src="honda/modelos/05-125cargo.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>CB 300R <a href="#"><img src="honda/modelos/11-cb300r.jpg" alt="" width="130" height="90" /></a></p></li>
           </ul>
         </div>
         <div class="column-1">
           <ul>
             <li><p>CG 150 FAN <a href="#"><img src="honda/modelos/06-150fan.jpg" alt="" width="130" height="90" /></a></p></li>
             <li><p>CB 600F Hornet <a href="#"><img src="honda/modelos/12-cbr600f.jpg" alt="" width="130" height="90" /></a></p></li>
           </ul>
         </div>
       </div>
       <!-- END tutorial menu section ( 2nd menu ) -->

     <li><a href="#">Seminovos</a>
       <div class="menu-container-2"> <!--Home Start -->
         <div class="column-2">
           <p>Conheça a Linha 2013</p>
         </div>
       </div>
       <!-- End Home --> 
     </li>
     </li>
     <li><a href="#">Peças Acessórios e Serviços</a>
       <div class="menu-container-2"> <!--Home Start -->
         <div class="column-2">
           <p>Conheça toda nossa linha de Peças e Acessórios</p>
         </div>
       </div>
       <!-- End Home --> 
     </li>
     <li><a href="#">Noticias</a> </li>
     <li><a href="">Fale Conosco</a> 

       <!-- End Home --> 
     </li>
   </ul>
 </div>
</div>

<!-- FIM MENU HORIZONTAL VERMELHO -->

Coloca no ar ai, e vamo ve se funfa :clap:

CrazyLOL · Outubro 19, 2012

Tá funcionando perfeito !

Muito obrigado ai galera.

Entrar

Arquivado

[Resolvido] Css site...

Recommended Posts

CrazyLOL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo_mc 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafael-tdc 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

CrazyLOL 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Modal Bootstrap 5

mostrar quanto tempo foi postado um conteudo

Configuração de página para impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante