• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

joaoqalves

Menu tableless

2 mensagens neste tópico

Boas pessoal, a minha dúvida é a seguinte:

se abrirem este link com o Mozilla Firefox 2.0.* isto (quase) funciona bem, e quase porquê? porque o menu parece "gelatina", ou seja, quando passo o rato por cima de um elemento, os outros deslocam-se. Bem, este não é o único problema, pois no IE7 difere um pouco do FF, mas deve ser porque estou a usar a propriedade position:relative;.

Bem, como o código XHTML e CSS ainda não é extenso vou colocá-lo aqui:

<!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>joaoqalves @net</title>
<link type="text/css" title="Folha de Estilo" rel="stylesheet" href="Estilo.css" /> 
</head>
<body>

    	<div id="conteudo">
        
        	<div id="header">
            	<img title="Logotipo" src="imagens/logotipo.png" alt="j|qalves 2008"  />
            </div>
            
            <div id="menu_navegacao">
            	<ul id="menu_links">
                	<li>
                    	<a href="#">home</a>
                    </li>
                    <li>
                    	<a href="#">sobre</a>
                    </li>
                    <li>
                    	<a href="#">portfólio</a> 
                    </li>
                    <li>
                    	<a href="#">contactos</a>
                    </li>
                </ul>
            </div>
        
        
        </div>
    
</body>
</html>

body {

background:#EEEEEE;
font-family:Verdana, Arial, Helvetica, sans-serif;

}

#conteudo {

	background:#FFFFFF;
	width:98%;
	height:500px;
	display:block;
	position:absolute;
	left:1%;
	top:0;

}

	#header {

		background-image:url(imagens/header.png);
		background-repeat:repeat-x;
		color:#FFFFFF;
		width:100%;
		height:100px;
		display:block;

	}

	#menu_navegacao {

		position:relative;
		left:250px;
		top:-40px;
		clear:both;

	}

		#menu_links {

			list-style:none;

		}

			#menu_links li {

				display:inline;
				padding:5px;

			}

				#menu_links li a {

					color:#FFFFFF;
					text-decoration:none;
					padding:5px;

				}

				#menu_links li a:hover {

					background:#FFFFFF;
					border:solid 1px #000000;
					border-bottom:solid 1px #FFFFFF;
					color:#000000;

				}

Cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Como disse no IRC, o teu problema é devido ao uso do border, que faz o elemento maior. A melhor solução é mesmo usares uma imagem de background.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora