Ir para conteúdo

Arquivado

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

emilyoly

Posicionar 3 div lado a lada horizontal e imagem na vertical

Por , em Desenvolvimento frontend

Recommended Posts

emilyoly    1

emilyoly
Postado

Boa noite pessoal tudo bem.

Estou com o seguinte problema, q na verdade dei um jeitinho rs'. não estou conseguindo posicionar 3 divis lado a lado, para resolver isso tive q colocar float left em todas as 3 divs ai resolveu mas sei q essa não é a maneira correta.
E na terceira div possuo um conjunto de links q são img , e elas não ficam posicionadas no centro vertical da div.



Segue o codigo html:

<article class="post">
			<div class="category">
				<a href="#">Categoria do Post</a>
			</div>
			<!--Category-->
			<div class="agrupapost">
		 	<div class="ptitulo"><h1>Titulo do post</h1></div>
		 	<!--Titulo do post-->

		 	<div class="infoautor">
				Por: <span>Daniele</span> | <span class="cinzamedio">Data: 06/05/15</span>
				<hr />	
			</div>
			<!--Info autor-->

			<div class="contentpost">
				<div class="thumbpost">
					<img src="images/imgpostt.jpg" height="281" width="440" alt="">
				</div>
				<!--Tumb Post-->

			<div class="pfooter">
				<div class="pcomment">
					<a href="#"><span>12</span> Comentarios</a>
				</div>
				<div class="leiamais">
					<a href="#">Continue Lendo &gt</a>
				</div>
				<div class="psocial">
					<a href="#"><img src="images/social/facebook.png" height="20" width="20" alt="Facebook"></a>
					<a href="#"><img src="images/social/pinterest.png" height="20" width="21" alt="Pinterest"></a>
					<a href="#"><img src="images/social/twitter.png" height="20" width="20" alt="Twitter"></a>
					<a href="#"><img src="images/social/rss.png" height="20" width="20" alt="RSS"></a>
				</div>
				<!--Leia Mais-->	
			</div>
			<!--Footer Post-->
			</div>
			<!--Content Post-->
			</div>
			<!--Agrupa Post-->
</article>
<!--Article Post-->

E aqui o CSS:

/*---------------POST BLOG--------------------------*/
.post{width: 620px;float: left;}
.agrupapost{width: 100%;border: 1px solid #CFD1D9;margin-bottom: 20px;padding-bottom: 10px;}
/* Titulo do Post */
.ptitulo{margin-top: 25px;text-align: center;}
/* Informações do Post */
.infoautor{text-align: center;font-size: 12px;}
.infoautor hr{width: 500px;margin:auto;margin-top: 5px;}
/* Imagem do Post */
.thumbpost{margin-top: 15px;text-align: center;}
/* Descrição / Conteudo Post */
.txpost{margin-top: 15px;margin-left: 20px;color: #232323;font: 14px;}

/*Footer Post*/
.pfooter{
	width: 100%;height: 35px;
	 text-align: center;
	 display: inline-block;line-height: 35px;margin-top: 20px;}
/*Comentarios*/
.pcomment{font-size: 12px;float: left;width: 150px;}
/* Continue Lendo */
.leiamais{margin-left: 85px;width:150px;font-size: 12px;float: left;}
.leiamais a{color: #FF5B00;}
.leiamais a:hover{color: #FF5B00; font: 16px;text-shadow:1px 0px 2px gray;}

/*Social*/
.psocial{margin-left: 85px;width: 150px;float: left;}
.psocial a {}
/*Category*/
.category{position:relative;top: 15px;width: 150px;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;}
.category a{color: #fff;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

pedrohsb    6

pedrohsb
Postado

Olá emilyoly.

 

Para posicionar divs lado a lado, use a propriedade display: inline-block.

 

Só não entendi bem a sua última pergunta. Poderia explicar melhor?

 

Atenciosamente,

Pedro HSB

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

Olá emilyoly.

 

Para posicionar divs lado a lado, use a propriedade display: inline-block.

 

Só não entendi bem a sua última pergunta. Poderia explicar melhor?

 

Atenciosamente,

Pedro HSB

 

Mas eu usei essa propriedade e msm assim tive q colocar float left nas 3 divs.

 

Sobre a segunda questão , segue uma img para explicar melhor:

cRQTaJf.jpg

Como pode ver os icones nao estao centralizados na vertical, nem com margin-top estou conseguindo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pedrohsb    6

pedrohsb
Postado

Para seu problema tem várias opções...

A que eu acho melhor para o seu caso é definir line-height.

 

Se você não achar este o melhor método, confira o link abaixo que explica melhor o alinhamento centralizado na vertical:

:seta: http://www.vanseodesign.com/css/vertical-centering/

 

Atenciosamente,

Pedro HSB

Compartilhar este post

Link para o post
Compartilhar em outros sites

pedrohsb    6

pedrohsb
Postado

Nem com line-height?

 

Define na div que tem os logos das redes sociais line-height: 50px.

Veja como ficou: o texto, ou melhor, as imagens foram para baixo.

 

Vai fazendo isso até conseguir um resultado satisfatório (aumentando o valor ou diminuindo) :)

Me envia por mensagem privada a captura de tela do resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

Nem com line-height?

 

Define na div que tem os logos das redes sociais line-height: 50px.

Veja como ficou: o texto, ou melhor, as imagens foram para baixo.

 

Vai fazendo isso até conseguir um resultado satisfatório (aumentando o valor ou diminuindo) :)

Me envia por mensagem privada a captura de tela do resultado.

Nos outros campos, comentários e continue lendo eu usei o line-heigth normalmente e funcionou, somente nesta div q esta dando problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

Dê margin-top nos links da div .psocial.

 

E não há problemas usar float para deixar uma div do lado da outra, ok? http://www.w3.org/wiki/CSS/Properties/float

Margin top não esta funcionando, como eu disse logo no começo.

E o float me referi que, geralmente pra alinhar as div lado a lado so a a necessidade de colocar float:left em um delas, mas no meu caso tive que colocar nas 3 pra dar certo.

 

usa vertical-align:middle nas imagens das redes sociais.

Também nao deu certo.

 

Mas obg por tentarem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Geralmente funciona o vertical-align:middle nas imagens quando tem line-height na div, pelo menos pra mim. :upset: :upset:

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

Então gente, eu comecei do zero todo meu site e talz, e ainda não consegui resolver esse problema de alinhar as div lado a lado. Segue as imagens para melhor entendimento:

 

Como eu queria que ficasse

6xmL5aA.jpg

Como esta ficando

aQwgBhl.jpg

Segue os códigos :

Index

<div class="pcontent">
			<article class="postp">
				<div class="category">
					<a href="#">Categoria do Post</a>
				</div>
				<!--Category-->
				<div class="agrupapost">
					<div class="ptitulo"><h1>Titulo do post</h1></div>
					<!--Titulo do Post-->
					<div class="infoautor">
						Por: <span>Daniele</span> | <span class="cinzamedio">Data: 06/05/15</span>
						<hr />	
					</div>
					<!--Info Autor-->
						<div class="thumbpost">
							<img src="images/FB_IMG_1422550451180.jpg" height="600" width="480" alt="">
						</div>
						<!--Thumb Post-->
						<div class="pfooter">
							<div class="pcomment"><a href="#"><span>12</span> Comentarios</a></div>
							<!--Comentarios-->
							<div class="leiamais"><a href="#">Continue Lendo &gt</a></div>
							<!--Continue Lendo-->
							<div class="psocial">
								<a href="#"><img src="images/social/facebook.png" height="20" width="20" alt="Facebook"></a>
								<a href="#"><img src="images/social/pinterest.png" height="20" width="21" alt="Pinterest"></a>
								<a href="#"><img src="images/social/twitter.png" height="20" width="20" alt="Twitter"></a>
								<a href="#"><img src="images/social/rss.png" height="20" width="20" alt="RSS"></a>
							</div>
							<!--Redes Sociais-->
						</div>
						<!--Footer Post-->
				</div>
				<!--Agrupa Post-->
			</article>
			<!--Article Post-->

			<div class="paginacao">
				<p>Pagina 1 de 100</p>
			</div>
			<!--Paginação-->
		</div>
		<!--Conteudo do Post-->

CSS

.pcontent{width: 69.49152542372881%; float: left;} /*Conteudo do Post*/
.postp {width: 100%;} /*Post Resumidos - Article*/
.category{position:relative;top: 15px;width: 20%;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;}
.category a{color: #fff;}
.agrupapost{width: 100%; border: 1px solid #CFD1D9;margin-bottom: 1.250em;}
.ptitulo{margin-top: 1.563em;text-align: center;}
.infoautor{text-align: center;font-size: 0.750em;}
.infoautor hr{width: 80%;margin:auto;margin-top: 0.313em;}/*500px% 5px*/
.thumbpost{margin-top: 0.938em;text-align: center;}
.pfooter {width: 100%;display: inline-block;}
.pcomment {}
.leiamais {}
.psocial {}
.psocial a {vertical-align: middle;}
/*Efeito transparencia Redes sociais*/
.psocial img {filter: alpha(opacity:0.5); KHTMLOpacity: 0.5; MozOpacity: 0.5; -khtml-opacity:.50; -ms-filter:"alpha(opacity=50)"; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
.psocial img:hover {filter: alpha(opacity:1); KHTMLOpacity: 1; MozOpacity: 1; -khtml-opacity:.1; -ms-filter:"alpha(opacity=100)"; -moz-opacity:1; filter:alpha(opacity=100); opacity:1;}

.paginacao{font-style: italic;
	font-size: 18px;
	color: #888;
	margin-left: 20px;
	text-align: center;}

Por favor quem puder me ajudar fico muito grata.

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