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

PROBLEMA DE POSICIONAMENTO

Diego Lobato

Perguntado por Diego Lobato,

 Share

Pergunta

Diego Lobato

Diego Lobato

Postado
Postado

Estou com um problema de posicionamento em divs ou imagens, aparentemente está tudo correto porém no chrome abre bugado.

  


      
       
 <!DOCTYPE html>

	
<!--
 *
 * Projeto Fibra do Brasil
 * Version: 1.0
 * URL: http://www.fibradobrasil.com.br
	-->



<html>
<head>   
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -->


        
<meta charset="utf-8">   
        
<title>Fibra do Brasil</title>
        
<style type="text/css">
            
ul {
            	
            	margin-top: 100;
            	padding: 2px;
            	list-style: none;
            	width: 150px;
				position:absolute;
				
            	}
            	
            	ul li {
            	position: relative;
			
            	}
            	
            	li ul {
            	position: absolute;
            	left: 150px;
            	top: 0;
            	display: none;
				
            	}
            	
            	
            	ul li a {
            	display: block;
            	text-decoration: none;
            	color: #303D60;
            	background: #fff;
            	padding: 5px;
            	border: 1px solid #ccc; 

            }
            
            li:hover ul { display: block;  }
            
            
           
			
			body {
  	background-color: #ffffff;
  	font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

p {
 
    margin-bottom: 25px;
	margin-top: 0px;
	margin-left: 0px;
    font-size: 11px;
	font-weight: bold;
	font-family: 'verdana', sans-serif;
	width: 160px;
	word-wrap: break-word;
	text-align:center;
}

.centered {
    text-align: center;
}


a {
    color: #FFCC29;
    word-wrap: break-word;
	text-align:center;
	
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #7b7b7b;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}



#menu

{
z-index: 1;
}


#produtos
{
width:75%;
position:absolute;	
top:15%;	
margin-left:20%;
float: left;


}


#p1
{
	
	
position:relative;
float: left; 

padding:0px;


  
}

img {
	width: 65%;
    
	 border: thin solid;
	padding: 5px;
	margin: 0px 10px 10px 0;
 
}

 /* BUSCADOR */ 
  
.container {
  width: 20%; /* define a largura do campo */  
  position: relative;  /* cria o contexto de posicionamento do bot�o */ 
 
 }

 label {display:block;}
input {width: 100%; height:30px;} /* define a largura do campo igual a largura do container */
 

input,  button {padding: 10px;}
 

button {
  display: inline-block;
 
 border-radius: 4px;
  background-color: #1B2C55;
   /* defina a cor do ok */
 border: none;

 color: #FFFFFF;

 text-align: center;
 
 font-size: 11px;
 
 padding: 10px;
 
 width: 35px;
 
 height:30px;
  
 position: absolute; 
 top: 0; 
  right: 0;

 }



   /* FIM BUSCADOR */ 


        </style>
        <script type="text/javascript">
            startList = function() {
            		if (document.all&&document.getElementById) {
            		navRoot = document.getElementById("menuDropDown");
            		for (i=0; i<navRoot.childNodes.length; i++) {
            		node = navRoot.childNodes[i];
            		if (node.nodeName=="LI") {
            		node.onmouseover=function() {
            		this.className+=" over";
            		  }
            		  node.onmouseout=function() {
            		  this.className=this.className.replace
            			(" over", "");
            		   }
            		   }
            		  }
            		 }
            		}
            		window.onload=startList;
        </script>
    </head><body>
                   
        
        
        	  <!--- BUSCADOR --->

	  
        	  
        	  
<form action=" " method="post">
	
  
              <label form="busca">Buscar</label>
 
        	  <div class="container">  
  
              <input type="search" id="busca" name="q">
<button class="button" style="vertical-align:middle" >
              <span>OK</span></button>
	</div>

	</form>
	 
          	 
          	  <!--- BUSCADOR --->              
          	  
          	  
          	  
        
        

 <!--- MENU --->

<ul id="menu"> 


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

          <ul>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0101"> Serra Fita Larga </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0102"> Serra Fita Estreita </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0103"> Serra para Carne </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0104"> Serra para Marcenaria </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0105"> Serra Circular </a>
           </li>
         
         </ul>

         
      </li>

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

          <ul>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0201"> Dentes de Serras </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0202"> Blanks </a>
           </li>
         
         </ul>

         
      </li>

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

          <ul>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0301"> Facas HSS </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0302"> Facas em Widea </a>
           </li>
         
         </ul>

         
      </li>

     <li>
<a href="#"> EPI'S </a>

          <ul>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0401"> Capacetes </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0402"> Abafador de Ruídos </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0403"> Óculos	 </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0404"> Respiradores </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0405"> Protetor Facial </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0406"> Luvas </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0407"> Mangotes </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0408"> Aventais </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0409"> Protetor Lombar </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0410"> Protetor Solar </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0411"> Capa de Chuva </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0412"> Perneira </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0413"> Calçados </a>
           </li>
           
           <li>
<a href="http://177.67.195.21:8041/fibra/U_Menu.apw?_grp=0414"> Linha Altura </a>
           </li>
         
         </ul>

         
      </li>

        
 
</ul>  <!--- FIM MENU --->
       


 
 
       
        <!--- PRODUTOS --->
   
<div id="produtos">   
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000401.JPG " title="LUVA CONFORT LATEX - DANNY                        " alt="LUVA CONFORT LATEX - DANNY                        "></a>
<p> LUVA CONFORT LATEX - DANNY                        </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001001.JPG " title="LUVA DE RASPA - PLANALTO                          " alt="LUVA DE RASPA - PLANALTO                          "></a>
<p> LUVA DE RASPA - PLANALTO                          </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001201.JPG " title="LUVA GLADIADOR  - DANNY                           " alt="LUVA GLADIADOR  - DANNY                           "></a>
<p> LUVA GLADIADOR  - DANNY                           </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000601.JPG " title="LUVA LONGATEX -  DANNY                            " alt="LUVA LONGATEX -  DANNY                            "></a>
<p> LUVA LONGATEX -  DANNY                            </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000301.JPG " title="LUVA NITRILICA  - YELING                          " alt="LUVA NITRILICA  - YELING                          "></a>
<p> LUVA NITRILICA  - YELING                          </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001101.JPG " title="LUVA PEGASUS - DANNY                              " alt="LUVA PEGASUS - DANNY                              "></a>
<p> LUVA PEGASUS - DANNY                              </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000201.JPG " title="LUVA PU FLEXTACTIL - DANNY                        " alt="LUVA PU FLEXTACTIL - DANNY                        "></a>
<p> LUVA PU FLEXTACTIL - DANNY                        </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000501.JPG " title="LUVA TRICOTADA  S/ P - TSUZUKI                    " alt="LUVA TRICOTADA  S/ P - TSUZUKI                    "></a>
<p> LUVA TRICOTADA  S/ P - TSUZUKI                    </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001401.JPG " title="LUVA VAQUETA (MISTA) - GABI LUVAS                 " alt="LUVA VAQUETA (MISTA) - GABI LUVAS                 "></a>
<p> LUVA VAQUETA (MISTA) - GABI LUVAS                 </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00001301.JPG " title="LUVA VAQUETA TOTAL                                " alt="LUVA VAQUETA TOTAL                                "></a>
<p> LUVA VAQUETA TOTAL                                </p>
         </div>
      
         <div id="p1">                        						
						
<a href="#"><img src="http://177.67.195.21:8041/dirdoc/co01/shared/IMG_00000701.JPG " title="LUVA VINIL SEM PO TAM. M - TALGE                  " alt="LUVA VINIL SEM PO TAM. M - TALGE                  "></a>
<p> LUVA VINIL SEM PO TAM. M - TALGE                  </p>
         </div>
      

</div>
	   <!--- FIM PRODUTOS --->
    

</body></html>

 

PrintScreen-1990 Jun. 27 08.32.jpg

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

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,1k
    • Posts
      651,8k
×
×
  • Criar Novo...