Colocar "div" embaixo da outra

[sr.silva 1]

Pessoal!

 

Estou seguindo esse "script" criado pelo Paulo. http://forum.imasters.com.br/index.php?showtopic=223799

Só que no momento preciso colocar uma div embaixo da div menu.

 

Como consigo fazer ??

 

[]´s ;)

[programador php 0]

utilize o z-index: ;

 

coloque para o menu um z-index: 100;

 

e para a div um z-index: 10;

 

abraço

[sr.silva 1]

Dúvidas,

 

A propriedade z-index é pra "levar" o objeto a frente de outro ?

 

A minha necessidade e colocar uma div abaixo da outra.

 

No exemplo do link, a div menu está a esquerda. O que pretendo e colocar uma outra div logo abaixo dela.

 

[]´s ;)

[brcontainer 16]

nesse caso seria bom você criar um div "PAI" que englobaria o DIV menu e o DIV abaixo do menu

;)

[inforsis 1]

Muito boa a resposta silver. ;)

 

Ficaria algo do tipo:

<div id="pai">

  <div id="menu">

  </div>

  <div id="baixo">

  </div>

</div>

 

PS: A div pai receberá as propriedades que pertenciam a div menu.

 

Qualquer dúvida, retorne e post.

[sr.silva 1]

Certo.

 

Mais eu já tenho uma DIV "PAI" para todo o site.

 

E correto criar também um outro "PAI" para essa situação?

 

[]´s ;)

[brcontainer 16]

é uma DIV pai é um jeito de expressar, o que queremos dizer é que você deve criar uma DIV que fique na esquerda

e dentro dela tenha as DIVs MENU e BAIXO

;)

[sr.silva 1]

Sim..Sim, silverfox!

 

Entendo o significado de DIV pai.

 

Só que infelizmente não funcionou. Qual seria o código referente a DIV#barra-lateral?

 

<div id="barra-lateral">
		
			<div id="menu">			
				<ul> 
					<li><a href="#" title="Faça o seu!">Faça o seu!</a></li>
				</ul>							
			</div>
		
			<div id="empresas-associadas">
				<ul> 
					<li><a href="#" title="Faça o seu!">Faça o seu!</a></li>
					<li><a href="#" title="Onde usar">Onde usar</a></li>
				</ul>					
			</div>
			
		</div>

Código CSS

 

#menu {
	float: left;
	width: 170px;
	padding: 1px;
	background:url(../images/jpg/menu.jpg); 
}

#empresas-associadas {
	float: left;
	width: 150px;
	padding: 1px;
}

[brcontainer 16]

você nem aplicou CSS na barra-lateral

#barra-lateral{
	float: left;
	padding: 1px;
	width: 170px;
}
#menu {
	width: 170px;
	background:url(../images/jpg/menu.jpg);
}

#empresas-associadas {
	width: 150px;
}

falow ;)

[sr.silva 1]

Pois é. Estava com dúvidas no que devia colocar na "barra-lateral".

 

Agora consegui!! Ufa!!

 

Tô pra falar a vocês que acho que vai sair o primeiro site feito em "tableless"...

 

Valeu ae!!

 

-Edit-

 

Pelo jeito vejo que não tem necessidade de colocar float:left em #menu e #empresas-associadas.

 

Já que as mesmas "herdam" de #barra-lateral, correto ?

[sr.silva 1]

Por favor apague esse post aqui!!

Duplicou no erro gerado....

[brcontainer 16]

você leu meu POST anterior??

teria algum link para vermos como você está fazendo com detalhes?

 

abraço ;)

[sr.silva 1]

Sim.

 

Só que pintou essa dúvida. Que pra mim, eu não coloquei a propriedade float nas demais DIVs e funcionou.

 

Então decidi perguntar pra ver se realmente é correto.

 

Vou providenciar o link !

 

-Edit-

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://br.geocities.com/bsilvaweb/

 

[]´s ;)

[brcontainer 16]

sem maldade Sr.Silva mas você não leu mesmo o meu post anterior pelo que notei:

#barra-lateral #menu {
	float: left;
	width: 170px;
	padding: 1px;
	background:url(../images/jpg/menu.jpg); 
}

#barra-lateral #empresas-associadas {
	float: left;
	width:150px;
}

há floats desnecessarios(e percebi que você reparou nisso uhuahuauhuauha)

 

no exemplo que lhe passei tambem não tem FLOAT olha de novo:

#barra-lateral{
	float: left;
	padding: 1px;
	width: 170px;
}
#menu {
	width: 170px;
	background:url(../images/jpg/menu.jpg);
}

#empresas-associadas {
	width: 150px;
}

falow qualquer coisa volte a postar ;)

[sr.silva 1]

há floats desnecessarios(e percebi que você reparou nisso uhuahuauhuauha)

no exemplo que lhe passei tambem não tem FLOAT olha de novo:

#barra-lateral{
	 float: left;
	 padding: 1px;
	 width: 170px;
 }
 #menu {
	 width: 170px;
	 background:url(../images/jpg/menu.jpg);
 }
 
 #empresas-associadas {
	 width: 150px;
 }

falow qualquer coisa volte a postar ;)

Opa silverfox,

 

Desculpe! Então eu não entendi perfeitamente. :mellow:

Diante disso, se possível poderia explicar de forma a acabar de vez com esse questionamento simples.

 

Realmente peço perdão por não entender o que escreveste. Porém fico com dúvidas quando menciona

que não tem float no código sendo que existe o mesmo....enfim... :unsure:

 

Se puder ajudar, ficaria agradecido. http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

[RoXbY 3]

cara, não precisa de float no #menu...

#barra-lateral{
	float: left;
	width: 170px;
	padding: 1px;
}


/* ========================================== | MENU | === */
#barra-lateral #menu {
	[u][b]float: left;[/b][/u]
	width: 170px;
	padding: 1px;
	background:url(http://br.geocities.com/bsilvaweb/images/jpg/menu.jpg); 
}

ao meu ver.....

 

/* ========================================== | BARRA LATERAL | === */
#barra-lateral{
	float: left;
	width: 170px;
	padding:1px;
}


/* ========================================== | MENU | === */
#barra-lateral #menu {/*foi pro saco*/}
#barra-lateral #menu ul {
background:url(http://br.geocities.com/bsilvaweb/images/jpg/menu.jpg);
	list-style: none;
	margin: 0;
	padding: 0; 	
}



/*ainda acrescentaria */
#barra-lateral #menu li a:hover {
	text-decoration:underline;
}

 

=oP

 

o float: left é para aplicar propriedade de lateralidade, não precisa aplicar float em um objeto que está sozinho dentro da div no caso do #menu

[brcontainer 16]

Sr.Silva ^^ você deve estar se complicando na leitura kaoskaoskoaksopa

você leu mesmo todos os POSTs verifica que acho q você esqueceu ;P

 

bem vamos ver se consigo lhe explicar ;) (conserteza você vai entender é um cara experto)

retire o float:left; das seguintes DIVs:

#menu

#empresas-associadas

 

e o seu código DEVERÁ ficar assim:

body {
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin:0;
}

#tudo {
	width: 759px;
	border: 2px solid #999;
}

/* ========================================== | TOPO | === */
#topo {
	width: 759px;
	height: 219px;
	background:url(../images/jpg/topo.jpg);	
}

/* ========================================== | BARRA LATERAL | === */
#barra-lateral{
	float: left;
	width: 170px;
	padding: 1px;
}

/* ========================================== | MENU | === */
#menu {
	width: 170px;
	padding: 1px;
	background:url(../images/jpg/menu.jpg); 
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0; 	
}

#menu li {
	border-bottom: 1px solid #fff; 
}

#menu li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	text-decoration: none;	
	color:#fff;
	cursor:pointer;
}


/* ========================================== | EMPRESAS ASSOCIADAS | === */
#empresas-associadas {
	width:150px;
}

/* ========================================== | CONTEUDO | === */
#conteudo {
	float: left;
	width: 565px;
	padding: 10px;
}

/* ========================================== | RODAPÉ | === */
#rodape {
	width: 759px;
	height: 30px;
/*	padding: 0 10px;*/
	background:url(../images/jpg/menu.jpg); 
	clear: both;
}

#rodape p {
	line-height: 28px;
}

falow ;)

[sr.silva 1]

Pessoal estou de volta! :D

 

E com um novo problema!!

 

Se perceberem no link que postei acima. Existe um "box" para newsletter.

 

Só que não consegui deixar "parecido" como foi determinado no layout.

 

Teria como ajudar novamente?

 

Segue o box do layout.

 

 

 

 

[]´s

[brcontainer 16]

pergunto primeiro ;P

Por que usar uma imagem ao inves de texto(o 'novidades no e-mail:' é uma imagem)???

 

bem e quanto ao botão cadastrar para alinhar ele no meio faça isso:

#botao-enviar-news{
	margin:0 auto;
	background:url(../images/barra-lateral/botao-news.jpg);
	width:63px;
	height:17px;
}

[sr.silva 1]

Opa!

 

Porque primeiro:

 

- Essa fonte é paga. Nós temos ela aqui. Mais com certeza o usuário que acessar o site não terá.

- Tentei colocar Verdana mais não ficou nada parecido.

 

Aliás o que está atual, não tem nada de parecido com o layout montado.

 

Apenas o botão cadastrar..

 

Basicamente isso.

 

[]´s ;)