Olá!
Eu sou iniciante, tenho aprendido um pouco de css nos últimos tempos… Agora preciso desenvolver um portal para um projeto…
Usei um menu FishEye que deu um efeito bem legal, só que agora ele tá rolando junto com a página! Ele e um título que coloquei… O que posso fazer pra consertar?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Arquitetura de Processos</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/fisheye.js"></script>
<script type="text/javascript" src="js/efeito.js"></script>
<link rel="shortcut icon" href="imagens/favicon.ico" >
</head>
<body>
<!-- Menu -->
<div id="nav">
<ul id="menu-fish">
<li>
<a href="#">
<img src="imagens/homegreen.png" alt="" />
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<img src="imagens/login.png" alt="" />
<span>Login</span>
</a>
</li>
<li>
<a href="#">
<img src="imagens/spem.png" alt="" />
<span>SPEM</span>
</a>
</li>
<li>
<a href="#">
<img src="imagens/epf.png" alt="" />
<span>EPF</span>
</a>
</li>
<li>
<a href="#">
<img src="imagens/faq.png" alt="" />
<span>FAQ</span>
</a>
</li>
<li>
<a href="#">
<img src="imagens/email.png" alt="" />
<span>Contato</span>
</a>
</li>
<li>
<a href="#">
<img src="imagens/about.png" alt="" />
<span>Sobre nós</span>
</a>
</li>
<li>
<a href="#">
<img src="imagens/process.png" alt="" />
<span>Processos</span>
</a>
</li>
</ul>
</div>
</div>
<!-- fim menu -->
<!--barra post -->
<div id="barra">
<c>Formulário</c>
<img src="imagens/barra.jpg">
</div>
<!-- fim barra post -->
<div id="coluna1">
<h1>A propriedade clear é usada para controlar o comportamento dos elementos que se
seguem aos elementos floats no documento.
Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do
elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente
para o lado da foto de Bill Gates.
A propriedade clear pode assumir os valores left, right, both ou none. A regra
geral é: se clear, for por exemplo definido both para um box, a margem superior
deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados
que estejam antes dele no código.
Com posicionamento CSS podemos colocar um elemento em uma posição exata na
página. Combinado com floats (ver lição 13), o posicionamento abre muitas
possibilidades para criação de layouts precisos e avançados.
Para posicionar um elemento de forma relativa a propriedade position deve ser
definida para relative. A diferença entre os dois tipos de posicionamento é a
maneira como o posicionamento é calculado.
O posicionamento para posição relativa é calculado com base na posição
original do elemento no documento. Isto significa uma movimentação do
elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o
elemento ocupa um espaço após ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar três imagens
relativamente as suas posições originais na página. Notar como as imagens deixam
um espaço vazio nas suas posições originais no documento.
Na lição anterior vimos o box model. Nesta lição veremos como controlar a
apresentação de um elemento definindo as propriedades margin e padding.
Definindo margin de um elemento
Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e
inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do
documento). Veja o diagrama da lição anterior.
Vamos começar com um exemplo mostrando como definir margins para o documento,
ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as
margens da página.
Tal como a maioria das técnicas para construção de cantos arredondados, esta também utiliza imagens de fundo para simular os cantos.
</div>
<div id="barra2">
<img src="imagens/barra2.jpg">
</div>
</body>
</html>
CSS:
body{
margin: 20px;
padding: 0px;
background: #BCD2EE url(imagens/logo4.jpg) no-repeat top;
}
h1{
font-family: arial;
font-size: 15px;
font-color: #000000;
margin-left: 35px;
width: 530px;
text-indent: 30px;
text-align: justify;
border-width: thin;
border-style: groove;
border-color: #000;
}
#logo{
width: 100px;
height: 30px;
margin-top: 20px;
position: fixed;
vertical-align: middle;
}
#barra {
width: 650px;
height: 40px;
margin-top: 220px;
margin-left: 165px;
}
#barra c{
font-family: arial;
font-style: italic;
font-size: 20px;
font-color: #000000;
position: fixed;
margin-left: 35px;
width: 530px;
text-indent: 30px;
text-align: left;
}
#barra2 {
width: 650px;
height: 40px;
position: relative;
margin-left: 164px;
}
#coluna1 {
position: left;
margin-top: 0px;
margin-left: 165px;
width: 599px;
background-color: #6495ED;
}
/*
#banner{
clear: both;
background: url(imagens/banner.png) no-repeat;
background-attachment: scroll;
background-position: right bottom;
width:400px;
height:200px;
}
*/
/* Menu */
*{
margin:0;
padding:0;
}
img{
border:0
}
ul{
list-style:none
}
#menu-fish{
position:fixed;
margin-top: -100px;
margin-bottom: 10px;
}
#menu-fish li{
display:inline;
}
#menu-fish li a{
position:fixed;
margin-left: 390px;
text-align:center;
font-family: arial;
font-weight: bold;
font-size: 80%;
font-style: italic;
text-decoration:none;
color:#FFF;
text-shadow:2px 2px 2px #777;
}
#menu-fish li a img{
width:100%;
}
#menu-fish li a span{
display:none;
}
/*Fim menu*/
Configuração do plugin JQuery:
$(function(){
$("#nav").Fisheye({
items : 'a',
itemWidth : 60,
maxWidth : 40,
itemsText : 'span',
container : '#menu-fish',
proximity : 50,
valign : 'center',
halign : 'center'
});
});
Obrigada pela ajuda! =D