Bordes con texto

_leproso_ · #1 (**permalink**) 09/06/2009, 17:50

Buenas a todos,
Escribo porque me surgió un problema menor, pero que me gustaría poder resolver para mejorar el aspecto de mi web. He buscado en Google pero es difícil expresar mi problema en palabras, razón por la cual, los molesto.
Lo que quiero lograr es lo siguiente:

--------------------------- texto-----------------------------------------

(La linea de guiones simboliza el borde y la palabra "texto", el título)

No pude colocar foto por las medidas del foro para evitar que haga spam, pero creo que el ejemplo de arriba servirá.Como pueden ver mi objetivo es colocar un título en el borde.
Muchas gracias,
atte Leproso

kseso? · #2 (**permalink**) 10/06/2009, 03:35

Caja contenedora con posicion relativa, texto desplazo en alguna etiqueta (span, hnº) con posición absoluta y desplazado con top/left.

Mira una forma de hacerlo

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Caja Fija</title>
<style type="text/css">
* {margin:0; padding: 0; position: relative;}
#contenedor {
 width: 300px;
 height:300px;
 margin: 20px auto;
 padding: 15px;
 border: 2px dotted #000;
 }
 
 h3 {
 position: absolute;
 top:-15px;
 left:135px;
 padding: 5px;
 background:#fff
 }
</style>
</head>
<body>
<div id="contenedor">
<h3>TITULO</h3>
<p>Lorem ipsum dolor sit amet consectetuer id consequat quis mauris facilisis. 
</p>
</div>
</html>

Un saludo y bienvenido a FdW

AlbertoGarcia · #3 (**permalink**) 10/06/2009, 03:46

Esta podría ser una solución, usar una imagen de fondo centrada:

HTML:

<h2 class="titulo"><span>texto</span></h2>

CSS:

.titulo {
background: url(imagenes/linea.gif) left center repeat-x;
text-aling: center;
}

.titulo span { /*esta regla es para que la imagen no se vea por detrás del texto*/
display: block;
padding: 1em;
background-color: #fff; /*el mismo color del fondo de la página o contenedor*/
}

Salud!

hades87 · #4 (**permalink**) 10/06/2009, 04:12

Yo veo mas usable y estándar la solución que ha dado kseso? ya que si pones una imagen puede que no se vea y de esa forma dificultas las cosas.

AlbertoGarcia · #5 (**permalink**) 10/06/2009, 06:31

Pues si, pero para esa solución es necesario añadir un elemento contenedor que no tendría por que ser necesario.

kseso? · #6 (**permalink**) 10/06/2009, 07:27

Cita:

Iniciado por _leproso_

--------------------------- texto-----------------------------------------

(La linea de guiones simboliza el borde y la palabra "texto", el título)

Si hay un borde, será de algo, Alberto, yo he supuesto que sea un div contenedor, pero pueden ser otros elementos.

La consulta, entiendo, que se trata de desplazar lo que él llama "título" respecto a su posición natural en el html. El resto, son elementos de apoyo para que vea el efecto.

Un saludo

_leproso_ · #7 (**permalink**) 10/06/2009, 10:49

Muchísimas gracias Kseso. Entendiste perfectamente mi consulta y pude aplicar tu solución sin problemas.

Saludos.

AlbertoGarcia · #8 (**permalink**) 10/06/2009, 11:23

Tienes razón kseso?, yo simplemente partí de la suposición de que no tenía por qué haber elemento contenedor.

Salud!