Box with edge and a heading on top edge

Asked

Viewed 912 times

3

Is there a style of its own in CSS or HTML tag where I get the effect as shown in the image below?

inserir a descrição da imagem aqui

Would be a aside with a border of 1px and the word "Realization" centered on the upper edge, but that the border below the text does not appear, as shown in the image.

Is there anything in CSS or HTML that does this automatically?

Code I have:

/* estilos apenas como exemplo,
para mostrar o fundo preto e o texto centralizado*/
body{
   background: #000;
   color: #fff;
   text-align: center;
}
<aside class="realiza"> 
   <p>Realização:</p>
   Qualquer texto aqui
</aside>

html css

  • If you don’t know, who will know? : )

  • this > http://jsfiddle.net/daRch/ is a start!!

  • 1

    You won’t be looking for the label <fieldset> ?

  • I almost got there, only missing a rubber on the side edges that are passing up the top horizontal edge. http://jsfiddle.net/s0b5auqs/

  • You put aside, it messed up

  • how I’m gonna wipe those edges up?

  • hard will be background #000

  • @Leocaracciolo Whatever.

  • In response kkk

Show 4 more comments

2 answers

2


The label <fieldset> allows you to create this box with contour around it, and the label <legend> inside defines what appears at the top as "title".

Take the example:

/* estilos apenas como exemplo,
para mostrar o fundo preto e o texto centralizado*/
body{
   background: #000;
   color: #fff;
   text-align: center;
}
<fieldset class="realiza"> 
   <legend>Realização:</legend>
   Qualquer texto aqui
</fieldset>

1

If it’s an aside ...

body{
   background: #000;
   color: #fff;
}


.realiza{
  text-align: center;
  border: 1px solid #ddd;
  margin-top: 30px;
  position: relative;

  

}

.realiza div {
  width: 100%;
  position: absolute;
  line-height: 20px;
  height: 20px;
  top: -10px;
  left: 0;

}

.realiza div span{
   background: #000;
  padding: 0 15px;
  color:#fff;
}
<div class="div"><aside class="realiza">
   <div><span>Realização:</span></div>
   <p>Qualquer texto aqui</p>
</aside></div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.