Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Sexo: Masculino

Alinhamento do menu com o topo do site

28-05-2011 14:47

Eu to aprendendo CSS e to criando um site só pra treinar mesmo. E to testando no internet explorer 9, firefox e google chrome.

Mas estou tendo problema no posicionamento do menu horizontal junto ao topo do site. No internet explorer 9 ele fica por cima de uma parte da imagem do topo e o pesquisar fica centralizado lá em cima. No google chrome e no firefox o pesquisar fica aonde eu quero, mas o menu fica por baixo da imagem do topo e totalmente desalinhado. Segue as imagens do problema que esta acontecendo:

Visualização no internet explorer 9: https://lh5.googleusercontent.com/-i0Rt ... plorer.jpg

Visualização no google chrome e firefox: https://lh4.googleusercontent.com/-_Bvf ... chrome.jpg

Segue abaixo o código css que usei:

/*RESET*/ *{ margin:0; padding:0;   } body{ background:#fff; ;     }   /*box*/ #box{ width:900px; margin:0 auto;   }     /*header*/ #header{ height:105px; } #header_logo{ float:left; margin:30px 0 0 15px;   }   #header_contatos{ float:right; margin:20px 0 0 60px;} #header_search{ float:right;   }   #header_search form{ margin:10px 20px;       }   #header_search input{ padding:3px; width:150px; color:#FFF; font-weight:bold; font:16px Georgia, "Times New Roman", Times, serif; background:#FC9; border:1px solid #F60; }   #header_search .search_btn{ width:80px; font:16px Georgia, "Times New Roman", Times, serif; background:#FC6;     }   /*menu*/ #menu{   height:35px; background:url(images/menu.jpg) top repeat-x;       } #menu ul { margin:0; padding:0; float:left; list-style:none;          }   #menu ul li { display:inline; } #menu ul li img{ float:left; } #menu ul li a{ text-decoration:none; color:#FFF; font-weight:bold; font:15px Arial, Helvetica, sans-serif; float:left; padding:5px 8px 6px;   } #menu ul li a:hover{ background:url(images/menu.jpg) bottom repeat-x; }

MOVIDO: para CSS
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento do menu com o topo do site

28-05-2011 16:16

Você tem o DOCTYPE definido na página?

Geralmente, quando um script funciona em alguns navegadores, e não funciona no Internet Explorer 9, a colocação do DOCTYPE na página resolve.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Sexo: Masculino

Alinhamento do menu com o topo do site

28-05-2011 17:12

tenho sim. Ta o que vem no dreamweaver.

Ta assim:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untilied</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento do menu com o topo do site

28-05-2011 17:13

Tenta esse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Você tem 4 imagens, porque não dá um br e coloca a caixa de busca a seguir?
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Sexo: Masculino

Alinhamento do menu com o topo do site

28-05-2011 17:26

Coloquei esse doctype.

agora eles estão iguais. Só o alinhamento do menu que continua errado. ta igual a que tava no google chrome, com o fundo do menu por baixo de uma parte do topo e o texto do menu abaixo.

https://lh4.googleusercontent.com/-_Bvf ... chrome.jpg

Não entendi o porque de estar desalinhado desse jeito. faltou alguma coisa no código?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento do menu com o topo do site

28-05-2011 17:31

Assim sem testar o HTML é complicado. Eu não entendi se você quer colocar a caixa de busca dentro da barra amarela ou acima.

Verifica se não é o margin que foi dado para o #header_search form.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Sexo: Masculino

Alinhamento do menu com o topo do site

28-05-2011 17:36

Eu queria colocar a caixa de busca acima da barra de menu mesmo.

as imagens do topo e a caixa de pesquisa ta no lugar que eu queria mesmo. O problema ta no menu, que esta por baixo das imagens do topo e com o texto totalmente desalinhado.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento do menu com o topo do site

28-05-2011 17:52

O problema não está na barra do menu?

#menu{ height:35px; background:url(images/menu.jpg) top repeat-x; ..

Verifica se a altura ou a margem para ela está correta.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Sexo: Masculino

Alinhamento do menu com o topo do site

29-05-2011 13:31

O problema esta na barra de menu, que fica por baixo das imagens do menu e o texto desalinhado com o fundo da div.

eu coloquei margin mas não adiantou não.

#menu{                 height:35px;         background:url(images/menu.jpg) top repeat-x;         margin:30px; }

continuou a mesma coisa, não mudou nada.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento do menu com o topo do site

29-05-2011 13:59

isola a barra de menu e tesra ela sozinha nos navegadores. Vai dar uma ideia melhor.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Sexo: Masculino

Alinhamento do menu com o topo do site

29-05-2011 14:39

Quando eu coloco só o menu ele fica certo. ai coloco o topo fica desalinhando.

eu compactei a pasta do menu com o topo ... ai tem o codigo css e html. Caso você possa dar uma olha no código pra ver o que to fazendo errado.

http://www.4shared.com/file/BxZoi_kP/Problema_menu.html?

Mas desde já agradeço pela ajuda e atenção ai que tem dado.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento do menu com o topo do site

29-05-2011 16:21

vou dar uma olhada depois respondo.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17411
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhamento do menu com o topo do site

29-05-2011 20:19

Eu dei uma olhada no CSS, fiz uma alterações quanto a posição e altura relativa a onde o objeto está. Testa esse CSS

/*RESET*/ *{ margin:0; padding:0;   } body{ background:#fff;     }   /*box*/ #box{ width:900px; margin:0 auto;   }     /*header*/ #header{ height:105px; } #header_logo{ float:left; margin:30px 0 0 15px;   }   #header_contatos{ float:right; margin:20px 0 0 60px;} #header_search{ float:right;   }   #header_search form{ margin:10px 20px;       }   #header_search input{ padding:3px; width:150px; color:#FFF; font-weight:bold; font:16px Georgia, "Times New Roman", Times, serif; background:#FC9; border:1px solid #F60; }   #header_search .search_btn{ width:80px; font:16px Georgia, "Times New Roman", Times, serif; background:#FC6;     }   /*menu*/ #menu{ position:relative; top:30px; height:35px; background:url(images/menu.jpg) top repeat-x;       } #menu ul { position:relative; top: -23px;   margin:0; padding:0; float:left; list-style:none;     }   #menu ul li { display:inline; } #menu ul li img{ float:left; } #menu ul li a{ text-decoration:none; color:#FFF; font-weight:bold; font:15px Arial, Helvetica, sans-serif; float:left; padding:5px 8px 6px;   } #menu ul li a:hover{ background:url(images/menu.jpg) bottom repeat-x; }

Relativamente o menu ficou alinhado com a barra, mas, cada navegador parece ficar a altura um pouco diferente. Minha dica, é que refaça esse menu, ou, teste os posicionamentos que coloquei, veja também tamanho das figuras, quanto a altura.

Veja no código CSS o position:relative e o top logo abaixo.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Sexo: Masculino

Alinhamento do menu com o topo do site

30-05-2011 00:48

Consegui alinhar, segui seu conselho e refiz o menu, ai deu certo.


Valeu mesmo pela ajuda, brigadão.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado