Ir para conteúdo

POWERED BY:

Arquivado

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

e-canavan

Alinhamento absoluto com texto em volta

Por , em Desenvolvimento frontend

Recommended Posts

e-canavan    0

e-canavan
Postado

E aí pessoal, é a primeira vez que eu posto uma dúvida mas sempre estou dando uma sapeada para pegar grandes e boas dicas por aqui.

O meu problema é o seguinte, considerando o (pseudo)desenho abaixo.

 

----------------------

|••••••••••••••••••••|

|••••••••••••••••••••|

|••••• D1 •••••••••••|

|••••••••••••••••••••|

|•••••••••••• -------|

|•••••••••••• |••••••|

|•••••••••••• |• D2 •|

----------------------

 

O div D1 está com position:relative e contém um texto longo que constantemente é alterado.

O div D2 teoricamente ficará "absoluto" com bottom:0 e right:0 porém ele está passando por cima do texto.

Eu queria o efeito do texto ao redor do div D2 como se eu simplesmente colocasse um float:right nele, só que aí ele ficaria em cima.

 

Será que fui claro?

Alguém poderia me desendividar isso?

 

Agradeço e abraço a todos.

e-canavan

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

cara, tentei ver isso, ms acho q naum dah naum... por causa do position absolute, ele descarta essa parada d ficar fazendo quebra d linha no texto... ele vai ficar absoluto ali, naum importanto o resto do conteudo... eu fiz d um jeito aki... talvez possa quebrar um galho...

body {	margin: 10px;	padding: 10px;}#geral {	width: 300px;	border: 1px solid #000000;	position: relative;}#conteudo {	margin-right: 50px;}#logo {	background-color: #FFFF99;	width: 50px;	height: 50px;	position: absolute;	right: 0;	bottom: 0;}
<body>
<div id="geral">
	<div id="conteudo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vulputate velit at turpis. Sed at urna. Integer laoreet est eu eros. Nunc ut velit vel mi gravida volutpat. Vestibulum id augue. Morbi in odio at odio rhoncus ullamcorper. Cras egestas. Pellentesque et nisi. Aliquam ac massa at ligula venenatis semper. Suspendisse adipiscing erat non quam. Phasellus sollicitudin, eros a cursus tristique, tortor neque tincidunt nibh, ac viverra ante dolor commodo libero. Proin sed velit sit amet metus iaculis cursus.</div>
	<div id="logo"></div>
</div>
</body>

dessa forma, o conteudo nam vai "atacar a div colada a direita, mas em nenhum momento o conteudo vai... pq a margin vai limitar pelo conteudo inteiro... pode ser q ajude... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

e-canavan    0

e-canavan
Postado

Bruno, valeu pela força.Infelizmente essa idéia eu já havia pensado mas ela dá uma quebrada no layout.Vou dar uma estudada em outras possibilidades, mas estou vendo que fatalmente o layout sofrerá alterações.Muito obrigado cara.abraçoe-canavan

Compartilhar este post

Link para o post
Compartilhar em outros sites

e-canavan    0

e-canavan
Postado

É isso aí Bruno.

 

Eu consegui aqui fazer algo bem próximo ao que eu queria.

Tudo bem que não passa de uma gambiarra, mas o resultado compensa pois deu pra eu manter o layout.

 

Veja aí como cheguei lá...

 

CSS

.geral {	font-size:11pt;	width:300px;	background-color: #bcf;	border: 1px #f00 solid;}.canto {	float:right;	clear:right;	margin: 15px 0 5px 5px;	width:100px;	font-size:11pt;	background-color: #ff0;}.ghost {	float:right;	width:1px;	height:6em;}

HTML

<div class="geral"><div class="ghost"></div><div class="canto">texto 2 texto 2 texto 2 texto 2 texto 2texto 2 texto 2 texto 2 texto 2 texto 2</div>asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asdasdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd asdjkfh askdjfh asdkljfh aklsdjfh aklsdjfh asdjkfh asd</div>

Mais uma vez agradeço pela força.

 

Abração.

e-canavan

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

gambiarra mermo hien... auhuauhau... mas pow, com esse ae ele naum fica grudado na base do div... mas se serve, tah otimo... ;)

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