Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom galera, é o seguinte..
Sempre usei no Dreamweaver a ferramenta "Draw AP Div", e sempre achei muito bom, pois posso movimentar a DIV de um lado para outro, colocá-la onde eu quiser na página. Mas nunca ficava satisfeito com o alinhamento delas. Sempre "consertava" adicionando alguns left's, padding's, entre outros. Um colega do fórum, disse que, para obter o melhor alinhamento, eu teria que remover do CSS o "position:absolute" e trocar por "margin: 0 auto". Fiz e realmente fez mágica, porém.. parece que muda a resolução da página. No Dreamweaver aparece de um jeito e no browser de outro; A DIV parece que se insere na página e a movimentação dela, que o positon:absolute garante mover por qualquer parte, não dá mais para fazer.
Eis o problema virtualmente:
http://www.crfh0m3r.xpg.com.br/ (se não conseguir visualizar no site, http://i52.tinypic.com/rkzcbr.png)
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Party MCZ</title>
<style type="text/css"> font-family:Tahoma, Geneva, sans-serif;
display:block;
background-image: url(images/bg.png);
background-repeat: repeat;
}
#logotipo {
top:0px;
width:900px;
height:150px;
margin: 0 auto;
}
#menu {
width:900px;
height:31px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 25px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000;
text-decoration: none;
margin: 0 auto;
background:#CC6600;
}#menu a {
background:#CC6600;
color:#FFF;
text-decoration:none;
display:inline;
} background-color:#BF0082;
} display:inline;
padding:16px;
}
#slideshow1 {
margin:0 auto;
top:252px;
width:300px;
height:200px;
z-index:3;
left: 100px;
} color:#FFF;
width: 320px;
width:349px;
height:200px;
}
</style>
</head>
<body>
<div id="logotipo">
<img src="images/logo_cabeçalho.png" width="900" height="150" alt="" longdesc="index.html"/>
</div>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">GALERIA</a></li>
<li><a href="#">NOTÍCIAS</a></li>
<li><a href="#">VÍDEOS</a></li>
<li><a href="#">CONTATO</a></li>
<li><a href="#">TWITTER</a></li>
</ul>
</div>
<div id="slideshow1">
<div id="cabeçalho1">
<h3>Confira aqui o que já rolou:</h3>
</div>
</div>
</body>
</html>Tenho duas dúvidas:
1- Queria deixar a DIV "Slideshow1 > Cabeçalho1", que tem o título de "Confira aqui o que já rolou", alinhada à esquerda e com X espaçamento ao menu. Como posso fazer isso?
2- Gostaria de diminuir o espaço entre o menu e o banner/logotipo. Não consigo. Como posso fazer isso?²
Desde já, obrigado.
Carregando comentários...