Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi gente!
eu gostaria de saber como q eu faço para dar um espaçinho entre uma div e outra??
olha o meu codigo da div:
CSS:
<STYLE type="text/css">
#noticias{
height: 100%;
width: 100%;
position:fixed;
left:0;
top:0;
z-index: 99;
overflow:visible;
}
#lightbox{
height: 100%;
width: 100%;
position:fixed;
left:0;
top:0;
z-index: 98;
overflow:visible;
background-color:#0E070E;
opacity:0.9;
filter:alpha(opacity=90);
}
</STYLE>
DIV:
<div id="lightbox">
</div>
<div id="ads">
</div>
?consegui!
mas as divs não ficam no lugar certo, olha:
<html>
<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nova pagina 1</title>
</head>
<STYLE type="text/css">
#noticias{
height: 100%;
width: 577px;
position:fixed;
left:0;
top:0;
z-index: 99;
overflow:visible;
}
#ads{
height: 620px;
width: 180px;
position:fixed;
float: left;
margin:10px;
left:0;
top:0;
z-index: 99;
overflow:visible;
}
#enquete{
height: 217px;
width: 259px;
position:fixed;
left:0;
top:0;
z-index: 99;
overflow:visible;
}
#lightbox{
height: 100%;
width: 577px;
position:fixed;
float: left;
left:0;
top:0;
z-index: 98;
overflow:visible;
background-color:#0E070E;
opacity:0.9;
filter:alpha(opacity=90);
}
#adslightbox{
height: 100%;
width: 577px;
position:fixed;
float: left;
left:0;
top:0;
z-index: 98;
overflow:visible;
background-color:#0E070E;
opacity:0.9;
filter:alpha(opacity=90);
}
#enquetebox{
height: 259px;
width: 217px;
position:fixed;
float: left;
left:0;
top:0;
z-index: 98;
overflow:visible;
background-color:#0E070E;
opacity:0.9;
filter:alpha(opacity=90);
}
</STYLE>
<body topmargin="0" bgcolor="#150B15">
<p>
<img border="0" src="banner.jpg" width="800" height="440"></p>
<div id="lightbox">
</div>
<div id="noticias">
</div>
<div id="ads">
<script src="[http://www.fansitehost.org/ad_code_160.js">](http://www.fansitehost.org/ad_code_160.js)
<div id="adsbox">
</div>
</div>
<div id="enquetebox">
</div>
<div id="enquete">
</div>
</body>
</html>é com o margin mesmo. mas o margin não dá só espaço dos lados, ele da marin em cima e abaixo tbm... temq tomar cuidado.
faz assim, margin: 1px 2px 3px 4px / onde 1 é cima, 2 lado direito, 3 baixo e 4 esquerda. sentido horário mesmo.
ah, leia sobre float, não se deve utilizar position pra organizar a divisão do site.
refiz o codigo olha:
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nova pagina 1</title>
</head>
<STYLE type="text/css">
#noticias {
/ cor do fundo /
background-color: #0E070E;
/ largura /
width: 577px;
/ altura /
height: 100%;
position:fixed;
}
#ads {
/ cor do fundo /
background-color: #0E070E;
/ largura /
width: 164px;
/ altura /
height: 604px;
position:fixed;
float: left;
margin:10px;
left:0;
top:0;
}
</STYLE>
<body topmargin="0" bgcolor="#150B14">
<p>
<img border="0" src="banner.jpg" width="800" height="440"></p>
<div id="noticias"></div><div id="ads"></div></body>
</html>
e agora q ela não vai pro lado direito msm...Uma pergunta: qual a necessidade/propósito de utilizar position:fixed em todas as divs?
Uma pergunta: qual a necessidade/propósito de utilizar position:fixed em todas as divs?
Garantir a total incompatibilidade com IE6. [joke]
Boa tarde,
Os elementos nivel de bloco como por exemplo(div,p,etc) já se colocam um abaixo do outro no fluxo normal do documento.
Caso queira alterar este fluxo normal de empilhamento dos elementos utilize a propriedade FLOAT tanto para flutuar os elementos a direta (float:right) quanto para a esquerda (float:left) entre outras possibilidades.
Espero que ajude.
Usa o margin:
Ele da uma margem entre o bloco, fica a sua escolha, 20px, 43px, 13px, etc.
margin:10px;