Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Spice Boy

Como dar um espaço de uma div pra outra?

Por , em Desenvolvimento frontend

Recommended Posts

Spice Boy    0

Spice Boy
Postado

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>

?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spice Boy    0

Spice Boy
Postado

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"></script></div>
<div id="adsbox">

</div>
</div>
<div id="enquetebox">

</div>

<div id="enquete">

</div>
</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

mauelement    0

mauelement
Postado

é 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spice Boy    0

Spice Boy
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Uma pergunta: qual a necessidade/propósito de utilizar position:fixed em todas as divs?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Uma pergunta: qual a necessidade/propósito de utilizar position:fixed em todas as divs?

Garantir a total incompatibilidade com IE6. [joke]

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito