Foros del Web » Creando para Internet » CSS »

como poneis un banda-decorativa debajo de un texto?

Estas en el tema de como poneis un banda-decorativa debajo de un texto? en el foro de CSS en Foros del Web. Quisiera meter una banda negra debajo de un texto-titular que va en blanco. Algo asi: Como lo haríais, porque por mas vueltas que le doy ...
  #1 (permalink)  
Antiguo 20/03/2011, 05:35
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
como poneis un banda-decorativa debajo de un texto?

Quisiera meter una banda negra debajo de un texto-titular que va en blanco. Algo asi:



Como lo haríais, porque por mas vueltas que le doy no soy capaz de conseguirlo.

gracias de antemano
  #2 (permalink)  
Antiguo 20/03/2011, 08:32
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: como poneis un banda-decorativa debajo de un texto?

Indica un background-color al elemento que quieras aplicarle la banda negra.

Por ejemplo:
Código CSS:
Ver original
  1. H3{
  2. background-color:#ff005a;
  3. }
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #3 (permalink)  
Antiguo 20/03/2011, 09:44
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: como poneis un banda-decorativa debajo de un texto?

ya pero con eso no podria decirle cuanto quiero que mida de alto esa banda ni tampoco extenderla a todo el ancho de la linea de texto y mas aún en este titular que son dos palabras.
  #4 (permalink)  
Antiguo 20/03/2011, 10:15
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como poneis un banda-decorativa debajo de un texto?

pss como te indican...
Código HTML:
Ver original
  1. <h3 class="titulo">titulo</h3>
  2. <div class="contenido">
  3. <p>txt</p>
  4. </div>
Código CSS:
Ver original
  1. .titulo{background-color:#000;padding:0 10px;}
  2. .contenido{padding:10px;}
no veo la complicacion... esa es una manera pero hay muchas...
  #5 (permalink)  
Antiguo 20/03/2011, 10:38
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: como poneis un banda-decorativa debajo de un texto?

la verdad es que no me gusta tener codigo css aparte de donde van los estilos me pierdo mucho al revisar el codigo... yo lo haría con un div:

Código HTML:
Ver original
  1. <div id=test stile="color: white; background-color: black; width: 100px; height:100px">
  2. Este texto es blanco con fondo negro
  3. </div>
  4. Este texto es del color por defecto para el texto y fondo por defecto

Espero que no me haya equivocado.
Buena suerte amigo...
  #6 (permalink)  
Antiguo 20/03/2011, 10:46
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como poneis un banda-decorativa debajo de un texto?

Cita:
Iniciado por APadin Ver Mensaje
la verdad es que no me gusta tener codigo css aparte de donde van los estilos me pierdo mucho al revisar el codigo... yo lo haría con un div:

Código HTML:
Ver original
  1. <div id=test stile="color: white; background-color: black; width: 100px; height:100px">
  2. Este texto es blanco con fondo negro
  3. </div>
  4. Este texto es del color por defecto para el texto y fondo por defecto

Espero que no me haya equivocado.
Buena suerte amigo...
para eso estan las hojas de estilo para estar separadas al markup... pero bueno
pasate por aqui para entender mas el por que.
http://www.librosweb.es/css/index.html

id="test" faltaron las " " y es style no stile
  #7 (permalink)  
Antiguo 20/03/2011, 14:04
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: como poneis un banda-decorativa debajo de un texto?

he probado lo que me comentas alexk. Y si me funciona pero siempre y cuando lo ponga fuera del div. Si lo meto dentro del div no me funciona. Bueno si funciona pero con los margenes que lleve o el div o el parrafo. Y sino le aplico "parrafo" no me lo hace.

no se si me he explicado bien. El tema es que yo quiero que vaya dentro del div. Las especificaciones que yo tengo creadas de margenes y demas no se las he aplicado a ese div sino al párrafo. Pero el resultado es el mismo que en el ejemplo que tu me has puesto. Me pasa lo mismo cuando lo meto dentro del div.

Como solución, pero no me convence mucho, es que si pongo margen derecho hasta ocupar todo el ancho del div, si me lo hace, pero claro tendría que crear una class especifica para cada titular.

Lo curioso es que funcione fuera del div pero no dentro. ¿porque?

Última edición por 00israel; 20/03/2011 a las 14:18
  #8 (permalink)  
Antiguo 21/03/2011, 13:53
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: como poneis un banda-decorativa debajo de un texto?

alexk a ver si puedes terminar de echarme una mano. Te lo agradeceria mucho. es que me he quedado en este punto encasillado y no consigo avanzar.

No se si esto seria una solucion pero si en lugar de aplicarle al titulo la etiqueta <p> le aplico la etiqueta <pre> si que me funciona.

Que diferencia habria entre p y pre.

El problema es que ademas he variado toda la etiqueta p metiendole un margen de 15 pro todos los lados. Y no es muy buena idea. Con lo cual en este caso me salva la etiqueta <pre>

que me dices?

Última edición por 00israel; 21/03/2011 a las 14:05
  #9 (permalink)  
Antiguo 21/03/2011, 16:28
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: como poneis un banda-decorativa debajo de un texto?

pues no entiendo su pones el codigo completo o mejor aun la URL del sitio en cuestion mejor.. por que hablas como si supiera todo lo que estas viendo pero no...
  #10 (permalink)  
Antiguo 22/03/2011, 14:10
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 15 años, 10 meses
Puntos: 5
Respuesta: como poneis un banda-decorativa debajo de un texto?

tienes toda la razon perdoname.

mira este es un ejemplo donde he estado trasteando. Este es el XHTML:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prueba</title>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenedor">
  <div id="botones-titulares">
    <p class="titulares-trabajo">Titulación<br />
      Trayectoria Profesional<br />
      Experiencia Docente<br />
      <a href="publicaciones.html">Publicaciones</a> </p>
  </div>
  <div id="barra-texto">
  <br/>
    <pre span class="titular-blanco-entexto">Trayectoría Profesional</pre>
    <p>Nueva York es posiblemente uno de los destinos más apetecibles para un turista, un lugar donde se entremezclan por igual recuerdos, sensaciones y realidad, tanto la primera vez que llegas a ella, como las ocasiones posteriores en que he tenido la oportunidad de visitarla, no en vano es la ciudad más utilizada como escenario cinematográfico en la historia del cine y la televisión. Así pues, uno tiene siempre la impresión de haber estado allí antes.<br />
      <br />
    </p>
  </div>
  <div id="creditos">
    <div id="creditos-pilar">TERAPEUTA...</div>
    <div id="creditos-isra">Mapa del sitio | 2011 © | diseño...</div>
    <div id="final"></div>
  </div>
</div>
</body>
</html> 
y este es el css:
Código:
@charset "UTF-8";
* {
	margin: 0px;
	padding: 0px;
}
#contenedor {
	width: 734px;
	margin-top: 310px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#contenedor #creditos #creditos-pilar {
	font-family: Cuprum, arial, serif;
	font-size: 11px;
	text-align: left;
	float: left;
	width: 340px;
	padding-top: 12px;
	padding-left: 25px;
}
#contenedor #creditos #creditos-isra {
	font-family: Cuprum, arial, serif;
	font-size: 11px;
	text-align: right;
	float: right;
	width: 355px;
	padding-top: 12px;
	padding-right: 12px;
}
#contenedor #botones-titulares {
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000000;
}
#contenedor #barra-texto {
	background-color: #eeeeee;
	width: 734px;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
	position: relative;
}
#contenedor #creditos #final {
	clear: both;
	height: 50px;
	width: 734px;
}
a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
p {
	font-family: cuprum, arial, serif;
	font-size: 15px;
	margin-top: 15px;
	margin-right: 25px;
	margin-bottom: 15px;
	margin-left: 25px;
	font-style: italic;
	color: #666666;
}
.grande {
	font-family: raleway, sans-serif;
	font-size: 18px;
	font-style: normal;
	color: #000000;
}
.titular-blanco-entexto {
	font-family: Raleway, sans-serif;
	font-size: 17px;
	color: #FFFFFF;
	background-color: #000000;
	padding-left:25px;
	vertical-align: middle;
	padding-top: 5px;
	padding-bottom: 2px;
}
.titulares-trabajo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	color: #999999;
}

Etiquetas: Ninguno
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 16:51.