..:: MX Studio Fóruns ::..: É possivel fazer isto só com CSS? - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade




Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

É possivel fazer isto só com CSS? Texto sobre borda

#1 User is offline   mahoutsukai 

  • Group: Membros
  • Posts: 88
  • Joined: 17-June 06

Posted 04 February 2007 - 10:42 PM

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? rolleyes.gif



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

#2 User is offline   IRON MAIDEN 

  • Group: Membros
  • Posts: 167
  • Joined: 10-August 05

Posted 05 February 2007 - 09:45 AM

Isso dai pode ser feito usando z-index.
0

#3 User is offline   mahoutsukai 

  • Group: Membros
  • Posts: 88
  • Joined: 17-June 06

Posted 05 February 2007 - 11:37 AM

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

0

#4 User is offline   rochester 

  • Group: Colunistas
  • Posts: 1080
  • Joined: 24-June 06

Posted 05 February 2007 - 10:15 PM

margin negativo é mais facil

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


saca?

biggrin.gif
0

#5 User is offline   IRON MAIDEN 

  • Group: Membros
  • Posts: 167
  • Joined: 10-August 05

Posted 06 February 2007 - 01:14 AM

Realmente, com margen negativa é mais fácil.

Nem pensei nisso. mad.gif
0

#6 User is offline   Níck171 

  • Group: Membros
  • Posts: 145
  • Joined: 15-May 05

Posted 10 February 2007 - 02:13 AM

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

Utilizando a tag fieldset e legend

QUOTE
<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 thumbsup.gif

Flwww
0

#7 User is offline   Firemaster 

  • Group: Membros
  • Posts: 1410
  • Joined: 14-September 04

Posted 11 February 2007 - 03:41 PM

QUOTE(Níck171 @ 10/2/2007 01:02:16) View Post
Cara nem precisa de CSS... co HTML mesmo você faz isso...

Utilizando a tag fieldset e legend

QUOTE
<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 thumbsup.gif

Flwww



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

[]'s
0

#8 User is offline   Níck171 

  • Group: Membros
  • Posts: 145
  • Joined: 15-May 05

Posted 11 February 2007 - 03:45 PM

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??? huh.gif
0

#9 User is offline   Firemaster 

  • Group: Membros
  • Posts: 1410
  • Joined: 14-September 04

Posted 11 February 2007 - 03:47 PM

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

[]'s
0

#10 User is offline   Níck171 

  • Group: Membros
  • Posts: 145
  • Joined: 15-May 05

Posted 12 February 2007 - 12:08 AM

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

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

thumbsup.gif
0

#11 User is offline   rochester 

  • Group: Colunistas
  • Posts: 1080
  • Joined: 24-June 06

Posted 12 February 2007 - 12:47 AM

QUOTE
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?

laugh.gif

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

mas enfim, semantica é MUITO importante ^^

[]'s
0

#12 User is offline   Níck171 

  • Group: Membros
  • Posts: 145
  • Joined: 15-May 05

Posted 12 February 2007 - 09:04 AM

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 =)
0

#13 User is offline   rochester 

  • Group: Colunistas
  • Posts: 1080
  • Joined: 24-June 06

Posted 13 February 2007 - 02:35 AM

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 tongue.gif

hsauhsuhasuhuahsuhaushuhaus

q coisa neh?
laugh.gif
0

#14 User is offline   Níck171 

  • Group: Membros
  • Posts: 145
  • Joined: 15-May 05

Posted 13 February 2007 - 08:51 AM

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


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


QUOTE
<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 thumbsup.gif

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

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic


Similar Topics Collapse


Publicidade




2 User(s) are reading this topic
0 membro(s), 2 visitante(s) e 0 membros anônimo(s)