[SOLUCIONADO] Lineas a izquierda y derecha de texto

innobba · #1 (**permalink**) 27/03/2013, 03:56

Hola, no consigo hacer esto con CSS, se que existe la posibilidad de lograrlo poniendo una imagen de fondo, pero no lo consigo, alguien me puede ayudar?

Gracias

#2 (**permalink**) 27/03/2013, 04:18

La idea sería hacer un div contenedor que tenga el background de la linea y dentro de este un div centrado mas pequeño que contenga el texto con un background blanco (como en tu ejemplo).

Prueba esto a ver si te sirve:

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
  <style>
    #contenedor{
      background:url(http://i537.photobucket.com/albums/ff338/CarbayonesAzules/linea-web.jpg) repeat-x center;
      width:50%;
    }
    
    #texto{
      text-align:center;
      width:50%;
      background:white;
      margin:auto;
    }
  </style>
</head>
<body>
  <div id="contenedor">
    <div id="texto">
      EDITORIAL
    </div>
  </div>
</body>
</html>

innobba · #3 (**permalink**) 27/03/2013, 04:52

Perfecto la idea es esta, y funciona perfectamente, hay posibilidad de incluirlo dentro de un h2 { }, soy bastante nuevo en CSS, lo siento si la pregunta es un poco absurda.

Muy agradecido CraYzoR por tu respuesta y la rapidez, muchas gracias.

#4 (**permalink**) 27/03/2013, 05:20

No sé si he entendido muy bien la pregunta, pero si quieres un H2 en el texto no hay ningún problema:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
#contenedor{
background:url(http://i537.photobucket.com/albums/ff338/CarbayonesAzules/linea-web.jpg) repeat-x center;
width:50%;
}

#texto{
text-align:center;
width:50%;
background:white;
margin:auto;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="texto">
<h2>EDITORIAL</h2>
</div>
</div>
</body>
</html>

innobba · #5 (**permalink**) 27/03/2013, 05:30

Lo siento, creo que me he explicado mal, lo tengo que incluir en el h2, es una plantilla de Shopify, y hay estilos que ya están creados, no se si es posible, es que voy un poco perdido:

h1 { color: {{ settings.header_color }}; font-weight:{{ settings.header_weight }}; font-size:{{ settings.main_heading_font_size }}; line-height:{{ settings.main_heading_line_height }}; }

h2 { text-align:center; color: {{ settings.header_color }}; font-weight:{{ settings.header_weight }}; font-size:{{ settings.sub_heading_font_size }}; line-height:{{ settings.sub_heading_line_height }}; }

h3 { color: {{ settings.header_color }}; font-weight:{{ settings.header_weight }}; font-size:{{ settings.footer_heading_font_size }}; line-height:{{ settings.footer_heading_line_height }}; }

h4 { font-size: 13px; line-height: 18px; }

h5 { font-size: 12px; line-height: 18px; }

h6 { font-size: 10px; line-height: 18px; text-transform:uppercase; }

Lo siento, y gracias por tu tiempo.

pzin · #6 (**permalink**) 27/03/2013, 05:38

Otra opción usando sólo CSS:

Código CSS:

Ver original.lineas_horizontales {
  position: relative;
  left: 20px;
  display: inline-block;
  padding: 10px;
}
 
.lineas_horizontales:before,
.lineas_horizontales:after {
  position: absolute;
  top: 50%;
  left: -20px;
  display: block;
  height: 5px;
  width: 20px;
  background: black;
  content: " ";
}
 
.lineas_horizontales:after {
  left: auto;
  right: -20px;
}

Código HTML:

Ver original<h1 class="lineas_horizontales">Algo</h1>
<h2 class="lineas_horizontales">Alguna otra cosa</h2>

Igual hay algo que no he tenido en cuenta pero a priori no veo problemas.

innobba · #7 (**permalink**) 27/03/2013, 05:54

Ok, gracias lo probaré y os digo.

Un saludo