[Resolvido] Alinhamento caixa CSS com DIV

Bela Pri · Novembro 20, 2009

Pessoal,

Preciso de um HELP.

Criei caixas CSS para colocar conteúdo dentro, são em torno de 6 caixas, porém quando coloco cada bloco do div no HTML, elas aparecem uma abaixo da outra, gostaria que ficassem no estilo tabela (3 caixas em cima e 3 caixas embaixo, porém usando DIV).

Código Div


<div class="topo-dir">
	<div class="baixo-esq">
		<div class="baixo-dir">
			<div class="texto">
				<h3>Área Administrativa</h3>
					<img src="adm.png" width="100" height="100" alt="Área Administrativa" border="0"></a><p>
					<a href="2viaboleto.htm">2ª via de Boleto</a><br>
					<a href="alteraDados.htm">Alterar dados
					cadastrais</a><br>
					<a href="alteraSenha.htm">Alterar senha</a>
					<br><br><br>
							
			</div>
		</div>
	</div>
</div>

<br>
<div class="topo-dir1">
	<div class="baixo-esq1">
		<div class="baixo-dir1">
			<div class="texto">
				<h3>Comunique-se</h3>
					<a href="enviamsg.htm"><img src="msg.jpg" width="100" height="100" alt="Clique aqui para enviar sua mensagem" border="0"></a><p>
					Envie mensagens para seus vizinhos.
					<br><br><br>
							
			</div>
		</div>
	</div>
</div>

CSS

div.texto {
background:#FFFACD;
padding:8px 8px 8px 8px;
}

a:link {text-decoration: none; color:#000000;}
a:visited {text-decoration: none color:#000000;}
a:hover {text-decoration: underline; color: #000000;}
a:active {text-decoration: none color:#000000;}


.topo-dir {
background:url(topo-dir.jpg) 100% 0 no-repeat; 
width:20em;


}
.baixo-esq {
background: url(baixo-esq.jpg) 0 100% no-repeat;
}
.baixo-dir {
background: url(baixo-dir.jpg) 100% 100% no-repeat; 
padding:0 5px 5px 0;}

.topo-dir1 {
background:url(topo-dir.jpg) 100% 0 no-repeat; 
width:20em;
}
.baixo-esq1 {
background: url(baixo-esq.jpg) 0 100% no-repeat;
}
.baixo-dir1 {
background: url(baixo-dir.jpg) 100% 100% no-repeat; 
padding:0 5px 5px 0;}

Obrigada!!!!!!

Priscila.

Aprendiz CSS · Novembro 20, 2009

englobe cada box em uma div e adicione a propriedade float: left; nesta div adicionada

angelorubin · Novembro 20, 2009

Bom dia,

Utilize para cada elemento DIV a propriedade FLOAT definida com valor LEFT.

Desta maneira você altera o fluxo normal do elemento DIV ( que seria um abaixo do outro ) e os posiciona um ao lado do outro.

Espero que ajude.

angelorubin · Novembro 20, 2009

Montei uma coisa bem simples mas o importante é que você entenda o conceito.

Imagem no Firefox 3.5.5 - http://img340.imageshack.us/img340/5690/posicionandodivfloat.jpg

Se quiser baixar os arquivos - http://www.badongo.com/file/18494182

Espero que ajude a sanar a sua dúvida.

Qualquer duvida é só postar.

Thiago Retondar · Novembro 20, 2009

angelorubin,

muito bom ver você ajudando o pessoal aqui. =)

Só te peço que poste o link para o site ou os códigos ao invés de link para baixar.

Resumindo, Bela Pri, é só englobar suas seis div e definir o width para este pai. Nas filhas, só trabalhar com float.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

angelorubin · Novembro 20, 2009

Boa tarde,

É um prazer poder ajudar !

Procuro ajudar o pessoal e com isso aprender um pouco mais tambem.

Então, seguindo as recomendações de postagem do tiago segue os codigos:

XHTML

<div id="box_principal">
      
<div id="box_01">

	<h3>Área Administrativa</h3>
	<img src="adm.png" width="100" height="100" alt="Área Administrativa" border="0"><br /><br />
	<a href="2viaboleto.htm">2ª via de Boleto</a><br />
	<a href="alteraDados.htm">Alterar dados cadastrais</a><br />
	<a href="alteraSenha.htm">Alterar senha</a>

</div>

<div id="box_02">

	<h3>Comunique-se</h3>
	
    <a href="enviamsg.htm">
    	<img src="msg.jpg" width="100" height="100" alt="Clique aqui para enviar sua mensagem" border="0">
    </a>
    
    <p>
		Envie mensagens para seus vizinhos.
  	</p>
    
</div>

<div id="box_03">
<h3>Área Administrativa</h3>
	<p>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>

</div>

<div id="box_04">
<h3>Área Administrativa</h3>
	<p>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>

</div>

<div id="box_05">
<h3>Área Administrativa</h3>
	<p>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>

</div>

<div id="box_06">
<h3>Área Administrativa</h3>
	<p>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>

</div>

</div>

CSS

#box_principal {
	float:left;
	width:auto;
	height:auto;
	overflow:auto;
	text-align:justify;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
}

#box_01 {
	float:left;
	border:1px solid #CCC;
	background-color:#CCC;
	width:32%;
	height:250px;
	margin:2px;
	padding:3px;
}

#box_02 {
	float:left;
	border:1px solid #CCC;
	background-color:#9C0;
	width:32%;
	height:250px;
	margin:2px;
	padding:3px;
}

#box_03 {
	float:left;
	border:1px solid #CCC;
	background-color:#C9C;
	width:32%;
	height:250px;
	margin:2px;
	padding:3px;
}

#box_04 {
	float:left;
	border:1px solid #CCC;
	background-color:#0CF;
	width:32%;
	height:250px;
	margin:2px;
	padding:3px;
}

#box_05 {
	float:left;
	border:1px solid #CCC;
	background-color:#FC0;
	width:32%;
	height:250px;
	margin:2px;
	padding:3px;
}

#box_06 {
	float:left;
	border:1px solid #CCC;
	background-color:#6CC;
	width:32%;
	height:250px;
	margin:2px;
	padding:3px;
}

Thiago Retondar · Novembro 20, 2009

Obrigado pela compreensão, angelorubin. ^_^

Para que este post não fique tão sem conteúdo, vou dar uma dica: você repetiu demais as propriedades CSS. Faça assim:

#box_01, #box_02, #box_03,
#box_04, #box_05, #box_06{
        float:left;
        border:1px solid #CCC;
        width:32%;
        height:250px;
        margin:2px;
        padding:3px;
}

Depois é só aplicar o background em cada um.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

angelorubin · Novembro 21, 2009

Bom dia,

Ok, Tiago.

É que tentei deixar mais flexivel caso ela necessite mudar algumas coisas em uma e não em outra, e juntando tudo eu tiro essa flexibilidade.

Mas tudo bem, postarei resumidamente da proxima.

Bela Pri · Novembro 23, 2009

Bom dia,

Ok, Tiago.

É que tentei deixar mais flexivel caso ela necessite mudar algumas coisas em uma e não em outra, e juntando tudo eu tiro essa flexibilidade.

Mas tudo bem, postarei resumidamente da proxima.

Vim dizer que deu certo, e agradecer a ajuda de vcs! Aprendo muito nesse fórum e sei que são pessoas sérias e que estão dispostas a ajudar ...obrigada mesmo!

Até mais...

Thiago Retondar · Novembro 23, 2009

Que bom que resolveu! ^_^

Tópico [Resolvido].

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

angelorubin · Novembro 23, 2009

Bom dia,

Precisando estamos a disposição !

Até mais.

Arquivado

[Resolvido] Alinhamento caixa CSS com DIV

Recommended Posts

Bela Pri 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bela Pri 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

tratar hora no php

Navbar no Nextjs

Fóruns

Tempo Real

Informação importante