[Resolvido] DIV Elástica com Cantos Arredondados

Rounded corners in CSS: http://kalsey.com/2003/07/rounded_corners_in_css/

Abraços []'s

olhei o link, mas a principio não serve pra mim.

Nessa caso, o background que ficará no elemento do 'meio' é definido no elemento que engloba as imagens do canto. Isso dá certo se a imagem for toda opaca (pois cobre o fundo), mas no meu caso estou fazendo com png transparente, e o fundo do box é mutável, então a principio tenho que fazer com transparencia mesmo.

gostaria de um meio do elemento do meio ocupar todo espaço à direita dele de forma elástica.

>
O meu problema é com a div do centro, pois como não tem conteúdo, e nem um width definido (pois quero que seja elástica), ela não ocupa o espaço entre a figura da direita e a figura da esquerda. Testei quase todas as opções para o display, mas nenhuma deu resultado.

Tem como fazer isso?

min-width: 00px

será necessário declarar um width pro IE6

só um aviso... <div>'s são elementos em bloco, se enfiar uma div no meio das imagens ficarão dispostos assim:

[imagem]

[div]

[imagem]

se quiser que fiquem em linha, defina display:inline para o <div> e ao invés de width trabalhe com padding

Opa Evandro, obrigado, mas não funcionou aqui, o elemento do meio continuou sem aparecer nada.

pra n ficar mexendo no meu arquivo, fiz uma paginazinha pra teste, e vou colar exatamente como coloquei (coloquei umas cores pra ir guiando melhor):

<style type="text/css">
	#container{width:70%; background:blue; height:15px;}
 #esq{float:left;}
 #meio{background:red; height:15px; float:left; min-width: 00px; /* width:auto; */}
 #dir{float:right;}
</style>
<div id="container">
	<img id="esq" src="esq.gif" width="15px" height="15px" />
	<div id="meio"></div>
	<img id="dir" src="dir.gif" width="15px" height="15px" />
</div>

testei deixando o width auto também... mas sem sucesso. E só valida se tiver ele, certo?

além disso qual a lógica de definir a largura minima 0? mesmo se funcionasse eu ia ficar sem entender =)

quanto ao posicionamento que você falou, eu não entendi ._. aqui a div e as imagens estão ficando lado-a-lado normalmente.

até pensei em fazer 3 divs (as 2 do canto com a img da borda arredondada como background), mas achei desnecessário. Não parece ser esse meu problema.

Na teoria parece ser algo simples, é só a div ocupar todo o espaço disponível à sua direita, mas não achei nada a respeito ainda.

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

Escolha a sua preferida http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

haueha... valeu Rick!

se eu não consegui o que quero com nenhuma dessas 25 formas, eu desisto, e faço o site 'sólido' mesmo <_<

pelo que entendi, a caixa tem ALTURA definida e largura elástica, ok??

e o "00px;" era pra você definir uma altura qualquer ali.. e não colocar 00 =)

com altura definida fica fácil.

sua DIV pai vai conter as bordas horizontais (que se repetirão lado a lado conforme a largura), com posicionamento definido em "relative"

você criará um elemento em bloco (div, p, h1) com a mesma altura, posicionamento em "absolute" posicionado a "left:0" e "top:0" e "background" contendo a imagem da borda esquerda posicionado à esquerda sem repetição

#container #esq { background: url(borda_esquerda.jpg) top left no-repeat; }
O seu conteúdo virá dentro de um outro bloco, com "background" contendo a imagem da borda direita, posicionado à direita sem repetição

#container #conteudo { background: url(borda_dir.jpg) top right no-repeat; }

e quem tá f**endo ali, é o [float] que reseta a largura do elemento, por isso não tá dando certo, e o div está sendo disposto em linha

e o "00px;" era pra você definir uma altura qualquer ali.. e não colocar 00 =)

haueuahea.... burrice minha msmo >.<

sua DIV pai vai conter as bordas horizontais (que se repetirão lado a lado conforme a largura), com posicionamento definido em "relative"

ok, você diz para eu colocar o background que vai ficar no meio, na div container? Se for, o problema em fazer isso é que minhas imagens do canto tem transparência, e como elas estão contidas no container (:huh:) não dá certo, o fundo que só deveria aparecer no meio aparece nas bordas.

não tem como definir um background-position para os dois lados? como um padding para o background?

desisto hauahuahuahauhua

<div id="container">
 <p id="conteudo">Aqui vai o que eu quero que seja escrito</p>
 <span id="borda"></span>
</div>

css

#container {
 background: url(borda_esquerda.png) top left no-repeat;
 padding: 0 5px; /*largura suficiente pra borda*/
 position: relative;
}

#container #conteudo {

 background: url(meio.png) top left repeat-x;
}

#container #borda {

 background: url(borda_direita.png) top right no-repeat;
 display: block;
 height: 100%;
 position: absolute;
 right: 0;
 top: 0;
 width: 5px;
}

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

mas você não havia dito isso no post anterior. Obrigado a todos pela ajuda, e desculpa pelo trabalho em entender =)

só precisei colocar um nbsp no conteúdo, pq n quero nada escrito, senão n aparece nada =)