Create a header from a rel attribute with css

Question

Create a header from a rel attribute with css

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Holas, I'm trying to create a header inside a pre block through its rel attribute, something like this:

as you will see in the image has a header with the HTML text, something like that I want to achieve but I could not, this is my pre code:

pre.block,
{
background-color: #fafafa !important;
/*-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;*/
color: #000000;
padding: 5px;
border: 1px solid #c9c9c9;
overflow: auto;
margin-left: 10px;
font-size: 13px;
width: 95%;
white-space: pre-wrap;
font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
}

I tried to make a: after but the text was too far from the container, can it be done or will there be a better way to do it?

Greetings.

css

asked by Enecumene 18.05.2016 в 01:29

source

2 answers

0

You can do it using the pseudo-element ::before (it will make your life easier than ::after if what you want is a title) without the need to create any additional label. With content:attr(nombre-de-atributo) you can read the name that will be put in the title, and define it as a block so that it occupies the entire width of the container.

Here is an example (I give negative margins because I have put padding at pre to look more like the image you have put):

pre {
  background:#222222;
  color:#CC9900;
  padding:8px;
}

pre::before {
  content:attr(rel);
  display:block;
  background:green;
  color:white;
  margin:-8px -8px 8px -8px;
  padding:8px;
}

<pre rel="CSS">
p { color:red; }
</pre>

answered by 18.05.2016 в 02:57

Error executing a query in python with sqlite Jasper Report and C #

score 0 · Accepted Answer

You can simplify it more than that. Create a container div to which you give the general format and the header practically you will not have to give more than the colors:

.wrapper{
  width: 95%;
  margin: 10px;
  font-family: Consolas, "Bitstream Vera Sans Mono";
  background-color: #000000;
  color: #9c6031;
}
.header
{
  background-color: #399c42;
  color: #ffffff;
  padding: 10px;
  border: 0;
  font-size: 15px;
}
.content
{
  padding: 15px;
}

<div class="wrapper">
  <div class="header">HTML</div>
  <div class="content">Lorem ipsum....</div>
</div>

You could also apply if you want a gradient. You can have a look at this article: CSS3. Linear gradients