Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite! :)
Aqui vai:
Como queria que ficasse > http://img258.imageshack.us/img258/7753/visual.png
Como tá ficando > http://www.crfh0m3r.xpg.com.br/
É o seguinte, queria que a DIV em azul tivesse um espaçamento de 1px em relação as DIVs acima dela, no caso Slideshow1 e Slideshow2, mas não é o que acontece, já tentei adicionar margin mas não acontece nada. Queria saber o que posso fazer nesse caso, e em outros se isso acontecer.
HTML
<!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>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pagina">
<div id="logotipo">
<h1>LOGOTIPO</h1>
</div><!--Fim da div LOGOTIPO -->
<div id="menu">
<ul><li><a href="#"><img src="icones/iconza_16x16_808080/house_16x16.png" border="0"/> HOME</a></li>
<li><a href="#"><img src="icones/iconza_16x16_808080/camera_16x16.png" border="0"/> GALERIA</a></li>
<li><a href="#"><img src="icones/iconza_16x16_808080/newspaper_16x16.png" border="0"/> NOTÍCIAS</a></li>
<li><a href="#"><img src="icones/iconza_16x16_808080/film_16x16.png" border="0"/> VÍDEOS</a></li>
<li><a href="#"><img src="icones/iconza_16x16_808080/mail_16x16.png" border="0"/> CONTATO</a></li></ul>
</div><!--Fim da div MENU -->
<div id="slideshow1">
<div id="cabeçalho">
<h3 class="cabeçalho1">Slideshow 1</h3>
<p class="cabeçalho1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id metus vitae purus lacinia ultrices. In hac habitasse platea dictumst. Donec eu tellus nulla. Nulla venenatis arcu sit amet magna placerat eget ullamcorper quam ultrices. Mauris viverra risus id lorem interdum eu tempor nunc dignissim. Ut sed mauris quis lacus ultricies elementum in et ante. </p>
</div><!--Fim da div Cabeçalho1 -->
</div><!--Fim da div Slideshow1 -->
<div id="slideshow2">
<div id="cabeçalho2">
<h3 class="cabeçalho2">Slideshow 2</h3>
<p class="cabeçalho2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id metus vitae purus lacinia ultrices. In hac habitasse platea dictumst. Donec eu tellus nulla. Nulla venenatis arcu sit amet magna placerat eget ullamcorper quam ultrices. Mauris viverra risus id lorem interdum eu tempor nunc dignissim. Ut sed mauris quis lacus ultricies elementum in et ante. </p>
</div><!--Fim da div Cabeçalho2 -->
</div><!--Fim da div Slideshow2 -->
<div id="nave">
<div id="noticias">
</div><!--Fim da div NOTÍCIAS -->
<div id="agenda">
</div><!--Fim da div AGENDA -->
<div id="galerias">
</div><!--Fim da div GALERIAS -->
<div id="twitter">
</div><!--Fim da div TWITTER -->
</div><!--Fim da div NAVEGAÇÃO -->
</div><!--Fim da div PÁGINA -->
</body>
</html>CSS
@charset "utf-8";
/ CSS Document /
/***********
tags globais
***********/
body {
margin:0px;
padding:0px;
}ul, li{
display:inline;
list-style:none;
}/***********
tags do site
***********/
#pagina {
width: 900px;
height: auto;
margin: 0 auto;
text-align: left;
}
#logotipo {
padding-left:5px;
height:145px;
background-color:#8090AB;
}
#menu {
width:900px;
height:40px;
margin:1px auto;
text-align:center;
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#3CC;
background-color:#FF9966;
} padding-right:15px;
padding-left:15px;
color:#000;
text-decoration:none;
} padding-right:15px;
padding-left:15px;
background-color:#900;
}
#slideshow1 {
float:left;
width:450px;
height:auto;
background-color:#CC99CC;
}
p.cabeçalho1 {
margin:3px;
text-align:justify;
}
#slideshow2 {
float:right;
width:449px;
height:auto;
background-color:#CCCCCC;
}
p.cabeçalho2 {
margin:3px;
text-align:justify;
}
#noticias {
clear:both;
height:205px;
background-color:#3399CC;
}Outra dúvida é, como vocês veem na imagem, em azul tem várias outras seções, Notícias, Agenda, Galerias Twitter, nesse caso, serão outras DIVs ou posso fazer essa divisão sem esse recurso?
Espero respostas.
Desde já, obrigado.
>
Se eu entendi bem, o problema é esse:
O margin-top não funciona direito com em elementos com clear depois de elementos flutuados.
Você terá que adicionar mais um elemento (um span) e colocar esse elemento com clear, tirar o clear do outro elemento e só aí dar o margin...
Entendeu perfeitamente.
Mas tenho que adicionar um elemento "<span>" aonde? Na DIV azul?
Desde já, obrigado.
coloca o clear no #nav pois esse é o 'pai do #noticias
#slideshow2 {
margin-bottom: 1px;
}
#nave {
clear:both;
}Obrigado William.
Mas, por que tem que "limpar" depois do float?
Desde já, obrigado.
pelo menos 'pra mim' faz mais sentido assim...
ou você não entende o motivo do clear ?
se for isso, então você precisa entender o float ^_^
float: flutua o elemento para o lado indicado, retirando ele do fluxo do documento(fazendo com que o próximo ocupe o lugar dele), esvaziando o container
clear: devolve o 'fluxo do documento', para onde estava(desfaz o esvaziamento que o float provoca)
mais ou menos isso..tem definições mais claras e precisas por ai, mas acho que deu pra entender.
A respeito da minha outra dúvida, como seria a solução?
Outra dúvida é, como vocês veem na imagem, em azul tem várias outras seções, Notícias, Agenda, Galerias Twitter, nesse caso, serão outras DIVs ou posso fazer essa divisão sem esse recurso?
Desde já, obrigado.
O jeito mais simples é fazer com 4 divs internas.
>
O jeito mais simples é fazer com 4 divs internas.
Obrigado!
Se eu entendi bem, o problema é esse:
O margin-top não funciona direito com em elementos com clear depois de elementos flutuados.
Você terá que adicionar mais um elemento (um span) e colocar esse elemento com clear, tirar o clear do outro elemento e só aí dar o margin...