Ir para conteúdo

POWERED BY:

Arquivado

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

Rodrigo Tschope

Uma DIV no meio do Texto

Por , em Desenvolvimento frontend

Recommended Posts

Rodrigo Tschope    0

Rodrigo Tschope
Postado

Ai galera, to tentando aqui mas não está dando certo... sou meio novo nesse esquema de CSS.

 

O que eu to querendo é assim:

 

Uma div onde vai meu texto e ao lado tem uma div onde ficam as fotos.

 

Tem esse link aqui.... Nessa noticia do live Earth tem uma foto do live Earth, reparem que o texto se mantem ao lado da foto e vai continuando normal... indo pra baixo e acompanhando a foto. O que eu quero é basicamente isso... Que o meu texto, da div do Texto, acompanhe o pequeno quadrado da DIV onde teram as fotos...

 

Deu pra entender?

 

Alguem sabe algum CSS pra isso!?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

rennanpinheiro    0

rennanpinheiro
Postado

Olá Rodrigo Tschope, para o seu texto "contornar" a imagem deixe ela como float.

 

Exemplo:

#noticia {	 width: 500px;}#noticia img {	 float: right;  /* esta linha */}

<div id="noticia">	 <img src="" alt="" />	 <p>Texto</p></div>

//abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Analisando o código da página que você passou, temos:

<img src='http://www.winajuda.com/wp-content/uploads/2007/07/live-earth.jpg' alt='Live Earth.' align='right' />
Observe que o responsável por isso é o align='right'... Mas já adianto que este atributo align está em desuso pelas normas do W3C... Para isso, utilize a propriedade float do CSS:
img {	float: right;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo Tschope    0

Rodrigo Tschope
Postado

Ok, agradeço os dois que me responderam... Aprendi mais uma... mas nao eh bem isso que eu quero fazer... Eu quero uma DIV mesmo, não uma imagem só, pq dentro dessa div poderá ter de 1 a 6 thumbnails, por isso escrevi DIV ali em cima... alguem tem alguma ideia?! Thanks

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Só para exemplificar o uso do float: right, veja este exemplo on-line. Analise o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>TÍtulo do Site</title>
	<style type="text/css">
	div {
		position: relative;
		float: right;
		width: 120px;
		height: 120px;
		background-image: url(bg.gif);
		margin: 10px;
	}
	div.red {border: 1px solid #f00;}
	div.blue {border: 1px solid #00f;}
	div.green {border: 1px solid #0f0;}
	div img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		margin-left: -15px;
	}		
	</style>
</head>
<body>
	<div class="blue"><img src="img3.gif" alt="" /></div>
	<div class="green"><img src="img2.gif" alt="" /></div>
	<div class="red"><img src="img1.gif" alt="" /></div>
	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris elit. Proin vel lorem. Vestibulum placerat bibendum risus. Quisque et est at dui dictum elementum. Mauris facilisis sapien non mauris. Suspendisse venenatis rutrum eros. Suspendisse a magna et magna gravida fermentum. Quisque a mauris. Sed ornare. Pellentesque condimentum dui nec leo. Praesent quis elit nec quam eleifend consequat. Vestibulum auctor. Nullam a odio. Nunc pretium eros vel quam. Proin eget nunc vel felis pellentesque fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum feugiat cursus ipsum. Cras eget augue sit amet ante porttitor bibendum. Aenean ipsum diam, elementum ac, nonummy non, imperdiet ut, tortor. Duis consectetuer, arcu vitae lobortis accumsan, ligula ligula tempus neque, sed fermentum ipsum lacus sit amet est. Curabitur luctus pharetra massa. Vivamus posuere, nisl non tristique tempus, orci orci tempor libero, laoreet semper nisi dui eget arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse aliquam venenatis tortor.</p>
	<p>Aliquam massa tortor, convallis non, semper eu, eleifend id, sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus viverra, urna porttitor blandit aliquam, lorem metus gravida risus, eu faucibus magna ligula a risus. Proin tincidunt purus vitae mauris. Quisque libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla malesuada laoreet odio. Nulla convallis felis a augue. Proin euismod tellus ac velit. Curabitur ac orci. Pellentesque mattis sem tempor velit. Cras nisl diam, volutpat sit amet, egestas non, fringilla sit amet, erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sapien. Sed felis massa, luctus eu, elementum vel, imperdiet vitae, eros. Etiam ligula ipsum, commodo sed, pretium ut, ullamcorper nec, libero. Quisque diam dolor, lobortis sed, tristique vitae, pulvinar a, sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ornare nulla at odio. Morbi ultricies magna a ipsum convallis dapibus. Praesent quis nunc. Mauris nisl mi, suscipit quis, ultrices ac, accumsan in, velit. Fusce elit libero, ullamcorper sed, auctor id, euismod vitae, sem. Duis in eros eu lectus cursus viverra.</p>
</body>
</html>

Melhorou? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

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