1

Holas, estoy tratando de crear un encabezado dentro de un bloque pre a través de su atributo rel, algo como esto:

introducir la descripción de la imagen aquí

como verán en la imagen tiene un encabezado con el texto HTML, algo así quiero lograr pero no he podido, este es mi código pre:

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;
}

Intenté hacer un :after pero el texto me quedaba muy lejos del contenedor, ¿se podrá hacer o habrá una mejor manera de hacerlo?

Saludos.

2 respuestas 2

0

Puedes simplificarlo más que eso. Crea un div contenedor al que le das el formato general y a la cabecera prácticamente no tendrás que darle más que los colores:

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

También podrías aplicarle si quieres un degradado. Puedes echarle un vistazo a este artículo: CSS3. Degradados lineales

1
  • Muchas gracias! ya lo adapté y queda perfecto! gracias!
    – Enecumene
    Commented el 18 may. 2016 a las 0:21
0

Lo puedes hacer usando el pseudo-elemento ::before (te hará la vida más fácil que ::after si lo que quieres es un título) sin necesidad de crear ninguna etiqueta adicional. Con content:attr(nombre-de-atributo) puedes leer el nombre que se pondrá en el título, y definirlo como un bloque para que ocupe todo el ancho del contenedor.

Aquí dejo un ejemplo (le pongo márgenes negativos porque he puesto padding al pre para que se parezca más a la imagen que has puesto):

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.