[mahoutsukai]

Falae galera, gostaria de saber se eh possivel eu fazer uma div com uma borda e colocar um texto sobre a borda soh usando css? como na figura abaixo?



Se puderem me dizer uma palavra chave para eu pesquisar sobre o assunto ja ajuda muito!! Abraco a todos!

[IRON MAIDEN]

Isso dai pode ser feito usando z-index.

[mahoutsukai]

uhmmm blz entao! vou pesquisar sobre o assunto! brigadao!

[rochester]

margin negativo é mais facil

tipo

CODE

#conteudo {
margin-top: -5px;
}

saca?

[IRON MAIDEN]

Realmente, com margen negativa é mais fácil.

Nem pensei nisso.

[Níck171]

Cara nem precisa de CSS... co HTML mesmo você faz isso...

Utilizando a tag fieldset e legend

<fieldset>
<legend>Titulo</legend>

Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>

</fieldset>

E a borda essas coisas se pode mudar com CSS

Flwww

[Firemaster]

Cara nem precisa de CSS... co HTML mesmo você faz isso...

Utilizando a tag fieldset e legend

<fieldset>
<legend>Titulo</legend>

Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>
Testando <br>

</fieldset>

E a borda essas coisas se pode mudar com CSS

Flwww

Só não esqueça que essa tag só pode ser utilizada em formulários e não como complemento de layout.

[]'s

[Níck171]

humm... dessa eu não sabia...

Eu ja usei ela em conteúdo (A MUUUITO TEMPO, hehe)

Mas explica aee.. porque só em formulário???

[Firemaster]

Porque é assim que está especificado no W3C. Isso se chama semântica, cada tag em seu lugar, realizando a sua devida função.

[]'s

[Níck171]

Aaaaa... em questão de semática concordo...

Mas isso não impede que seja usado no conteúdo....

Até porque é a maneira maís facil dele fazer isso com o uso de códigos.



Eu estou procurando seguir a sematica nos ultimos tempos, coisas que não dava muita importância e hoje em dia dou....

Espero que todos sigam algum dia, até porque quem tem a ganhar é todo mundo...


Afinal... os navegadores vão ter uma compatibilidade maior entre eles....


Mas até isso acontecer vai demorar alguns anos... enquanto isso não ocorre não vejo problema em fazer algo como isso para conseguir um código mais limpo e de fácil atualização

[rochester]

Mas isso não impede que seja usado no conteúdo....

Até porque é a maneira maís facil dele fazer isso com o uso de códigos.

quer coisa mais fácil q margin negativo?



hehe.. bem mais facil q sair sujando o codigo...

mas enfim, semantica é MUITO importante ^^

[]'s

[Níck171]

Mas se vc for parar para ver ele quer o texto em cima da linha.... nesse caso vai atrrapalhar pois a linha vai ficar passando mo meio do texto entendeu...

Da para colocar um Background no texto e da uns paddings nele pra expandir a área. e tal, mas PRA MIM sou mais o uso disso desse fildset...

Mas da no mesmo o resultado =]


E concordo... semática é muito importante sim =)

[rochester]

verdade, assim a orda fica em cima do texto..

bem, entao eu colocaria mais uma div sópra ficar com a borda... ou algo assim...

nem sei se tem alguma propriedade q deixa o conteudo por cima da borda, hehe...

mas o autor do topico em si nao se manifestou mais

hsauhsuhasuhuahsuhaushuhaus

q coisa neh?

[Níck171]

Também... no minimo a gente deve ter assustado o cara né, hahahahha


Bom mas se ele voltar e preferir uma versão em CSS do barato aeee...

<style type="text/css">
<!--

#borda {
border: 1px solid #666;
padding: 0px 10px 10px;

font: 11px Arial, Helvetica, sans-serif;
}

#titulo {
position: relative;
top: -10px;
background-color: #FFF;
padding: 2px 10px;

font: bold 14px Arial, Helvetica, sans-serif;

}

-->
</style>


<div id="borda">
<span id="titulo">Título do Conteudo</span>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>

Aeee e não foi só um simples margin-top não... dava pal na borda =)

Mas fiz uns testes e assim funcionou blz

Lembrando que o bgcolor do titulo deve ser o mesmo da pagina se não da diferença