[Resolvido] alinhar footer ao lado de imagem e embaixo

[julianens 0]

olá, tenho um blog no wordpress com duas colunas:

coluna 1 tem: imagem com largura de 600px e altura variavel

coluna 2 tem: titulo e conteudo do post ; e embaixo tem o footer (com descricao de quem postou e horario)

 

gostaria de alinhar o footer ao lado da imagem e embaixo. é possível?

não estou conseguindo.

 

veja abaixo a imagem:

[Thiago Retondar 18]

Crie uma div para cada linha, e nela coloque position: relative. Depois é só ir setando os elementos filhos com position: absolute, left, bottom, etc. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[julianens 0]

como assim div pra cada linha? não entendi.

[Thiago Retondar 18]

Cada linha que eu digo é formado pelos três elementos: image, title post content e footer.

 

Não se esqueça de utilizar class ao invés de id. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[julianens 0]

ok. eu já criei os divs no html e classes no css para cada: image, post content e footer.

a questão é q n estou conseguindo alinhar o footer com a imagem (do lado dela e embaixo).

[Anderson Narciso 3]

Qual é o seu Blog? O problema está visivel ou nao está hospedado?

[Thiago Retondar 18]

Por favor, não poste com

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

 

Vou explicar de forma resumida:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif no primeiro box, IMAGE, defina position: absolute com top: 0 e left: 0;

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif no segundo box, TITLE, defina position: absolute com right: 0;

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif no terceiro box, FOOTER, defina position: absolute com bottom: 0 e right: 0.

[julianens 0]

não está hospedado ainda.

[Anderson Narciso 3]

Eu acho que usando position:absolute, dependendo da resolução do usuário do Blog, vai ficar fora do lugar.. usaria o position:relative movendo junto com a resolução :rolleyes:

[Thiago Retondar 18]

Position: relative para o elemento pai dos três filhos.

[julianens 0]

ok. coloquei position relative para o elemento pai dos três. e position:absolute para os outros (image, footer e title)

 

o que aconteceu foi que todos as imagens de todos os posts ficaram fixadas em um lugar... o que aconteceu tb com title e footer.. um em cima do outro.

[Thiago Retondar 18]

Pode postar um XHTML e CSS. Seria preferível um link. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[julianens 0]

xhtml:

<div id="content">
	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
	<div class="post">
		<div class="post-img">
			<?php custom_field_image() ?>
		</div>
		<div class="post-footer">
			<?php _e('post'); ?> <?php _e('by'); ?> <?php  the_author(); ?> • <?php the_time('F jS, Y') ?><br />
			<?php comments_popup_link('make a comment', '1 comment', '% comments'); ?>				
		</div>
		<div class="post-content">
			<div class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></div>
			<div class="post-categories"><?php the_category(', ') ?></div>
			<div class="post-text"><?php the_content(); ?></div>
		</div>
	</div> <!-- end post -->
</div>

css:

#page { width:980px; margin-left: 30px; overflow:hidden; background:#fff; min-height:100%; position:relative;}

#content { position:relative; background:#fff;}
#content .header-img { margin-top:100px; background: url(images/random/rotator.php) no-repeat; height:140px;}

.post { position:relative;padding: 0}
.post-img { position:relative; top:0; left:0; border:none; }
.post-footer { position:absolute; background:#ddd; margin-left:30px;bottom:0; right:0;}
.post-content { position:absolute; top:15px; right:0;width:36%; background:#ddd;}
.post-title {font-family: arial, helvetica, sans-serif; font-size:13px; font-weight:bold; }
.post-title a:hover { color:black; background:white;}
.post-categories { margin-left:1px;font-size:11px;}
.post-text { margin-left:1px;line-height:16px; font-size:12px; font-family: arial, helvetica, sans-serif;}

 

fiz umas modificações e tá funcionando agora.

 

muito obrigada! :)