Fórum para dúvidas sobre CSS, Tableless e Webstandards.
Moderador: web
 por rodrigosbgs Offline » Sáb Mai 28, 2011 3:47 pm
|
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:
- Código: Selecionar todos
/*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
rodrigosbgs
NOVO MEMBRO
Mensagens: 7
Registrado em: Sáb Mai 28, 2011 3:41 pm
|
por web Offline » Sáb Mai 28, 2011 5:16 pm
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.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por rodrigosbgs Offline » Sáb Mai 28, 2011 6:12 pm
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>
rodrigosbgs
NOVO MEMBRO
Mensagens: 7
Registrado em: Sáb Mai 28, 2011 3:41 pm
|
por web Offline » Sáb Mai 28, 2011 6:13 pm
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?
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por rodrigosbgs Offline » Sáb Mai 28, 2011 6:26 pm
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?
rodrigosbgs
NOVO MEMBRO
Mensagens: 7
Registrado em: Sáb Mai 28, 2011 3:41 pm
|
por web Offline » Sáb Mai 28, 2011 6:31 pm
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.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por rodrigosbgs Offline » Sáb Mai 28, 2011 6:36 pm
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.
rodrigosbgs
NOVO MEMBRO
Mensagens: 7
Registrado em: Sáb Mai 28, 2011 3:41 pm
|
por web Offline » Sáb Mai 28, 2011 6:52 pm
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.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por rodrigosbgs Offline » Dom Mai 29, 2011 2:31 pm
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.
rodrigosbgs
NOVO MEMBRO
Mensagens: 7
Registrado em: Sáb Mai 28, 2011 3:41 pm
|
por web Offline » Dom Mai 29, 2011 2:59 pm
isola a barra de menu e tesra ela sozinha nos navegadores. Vai dar uma ideia melhor.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por rodrigosbgs Offline » Dom Mai 29, 2011 3:39 pm
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.
rodrigosbgs
NOVO MEMBRO
Mensagens: 7
Registrado em: Sáb Mai 28, 2011 3:41 pm
|
por web Offline » Dom Mai 29, 2011 5:21 pm
vou dar uma olhada depois respondo.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por web Offline » Dom Mai 29, 2011 9:19 pm
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
- Código: Selecionar todos
/*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.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por rodrigosbgs Offline » Seg Mai 30, 2011 1:48 am
Consegui alinhar, segui seu conselho e refiz o menu, ai deu certo.
Valeu mesmo pela ajuda, brigadão.
rodrigosbgs
NOVO MEMBRO
Mensagens: 7
Registrado em: Sáb Mai 28, 2011 3:41 pm
|
por web Offline » Seg Mai 30, 2011 8:09 am
boa.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para CSS, Tableless e Webstandards
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 4 visitantes
|
|
|
