Foros del Web » Creando para Internet » CSS »

Bordes con texto

Estas en el tema de Bordes con texto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/06/2009, 18:50
 
Fecha de Ingreso: mayo-2009
Mensajes: 50
Antigüedad: 8 años, 6 meses
Puntos: 1
Bordes con texto

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
  #2 (permalink)  
Antiguo 10/06/2009, 04:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Bordes con texto

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Caja Fija</title>
  4. <style type="text/css">
  5. * {margin:0; padding: 0; position: relative;}
  6. #contenedor {
  7.  width: 300px;
  8.  height:300px;
  9.  margin: 20px auto;
  10.  padding: 15px;
  11.  border: 2px dotted #000;
  12.  }
  13.  
  14.  h3 {
  15.  position: absolute;
  16.  top:-15px;
  17.  left:135px;
  18.  padding: 5px;
  19.  background:#fff
  20.  }
  21. </head>
  22. <div id="contenedor">
  23. <h3>TITULO</h3>
  24. <p>Lorem ipsum dolor sit amet consectetuer id consequat quis mauris facilisis.
  25. </p>
  26. </div>
  27. </html>

Un saludo y bienvenido a FdW
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 10/06/2009, 04:46
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Bordes con texto

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!
  #4 (permalink)  
Antiguo 10/06/2009, 05:12
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Bordes con texto

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.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 10/06/2009, 07:31
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Bordes con texto

Pues si, pero para esa solución es necesario añadir un elemento contenedor que no tendría por que ser necesario.
  #6 (permalink)  
Antiguo 10/06/2009, 08:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Bordes con texto

Cita:
Iniciado por _leproso_ Ver Mensaje

--------------------------- 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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 10/06/2009, 11:49
 
Fecha de Ingreso: mayo-2009
Mensajes: 50
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Bordes con texto

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

Saludos.
  #8 (permalink)  
Antiguo 10/06/2009, 12:23
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Bordes con texto

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

Salud!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:00.