Foros del Web » Creando para Internet » CSS »

Problemilla con background y texto

Estas en el tema de Problemilla con background y texto en el foro de CSS en Foros del Web. Hola, estoy probando un código que debe de tener algún fallo. El efecto buscado es tener un div para albergar un texto, cuyo título aparezca ...
  #1 (permalink)  
Antiguo 23/10/2008, 05:47
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Problemilla con background y texto

Hola, estoy probando un código que debe de tener algún fallo. El efecto buscado es tener un div para albergar un texto, cuyo título aparezca con un background de lado a lado en la parte superior del div. Por ahora no tengo éxito, y el background se queda corto -no llega a los bordes derecho ei zquierdo del div-. Además, tampoco puedo aplicar estilos de margen al texto que debe ir dentro del div; quiero ponerle una sangría izquierda a principio de párrafo y tras cada punto y aparte, y que las líneas tengan la misma longitud, cosa que no puedo hacer con el final de línea (en el margen derecho).

El código es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>advertencias</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
body {
background: red;
}

#contenido {
width: 790px;
position: absolute;
top: 120px;
left: 300px;
background: green;
}

#minibox {
width: 260px;
height: 480px;
background: white;
border-with: 4px;
border-style: solid;
border-color: maroon;
padding-right: 6px;
padding-bottom: 9px;
padding-left:6px;
}

h2 {
font-family: Arial;
font-wigth: bold;
background: black;
text-align: center;
padding-top: 0;
}

h4 {
font-family: Courier;
color: navy;
text-align: justify;
text-indent: 0.75 cm;
margin: 10px 10px 10px 10px;
}

</style>
</head>
<body>
<div id="contenido">
<div id="minibox">
<h2><span style="padding-top: 0;">Titulo</span> </h2>
<p><h4>Texto...</h4></p>
</div>
</div>
</body>
</html>

Muchas gracias por anticipado y un saludo al personal forero
  #2 (permalink)  
Antiguo 23/10/2008, 07:10
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Problemilla con background y texto

Esto es lo que tu quieres más o menos:

Código:
h2 {
	background: #00FF66;
	display: block;
	margin: 0px;
	padding: 0px;}
  #3 (permalink)  
Antiguo 23/10/2008, 07:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemilla con background y texto

Para que eltítulo tenga un fondo de color todo lo ancho del div, si es un título, usa una etiqueta hn (n=número en función de su relevancia)
Por ejemplo:
Cita:
minibox h3 {display: block;
width:100%;
color:#xxxxxx}
Para el texto del div:
Cita:
minibox p {
text-aling: justify; /*texto justificado*/
test-indent: 15px; /sangría de 10 px al inicio de cada párrafo}
Un saludo

Edito: Hola Talmente, veo que andamos a la par, de choque en choque ;)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 23/10/2008, 07:35
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Problemilla con background y texto

Si Kseso?, esto enriquece el asunto
  #5 (permalink)  
Antiguo 23/10/2008, 11:18
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Gracias a los dos, probaré con esos cambios que me indicáis.
  #6 (permalink)  
Antiguo 25/10/2008, 12:10
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Pues no he podido hacer lo del background de lado a lado. El texto justificado sí, aunque la justificación separa mucho las palabras en alguna línea.
Bueno, gracias de todas formas, seguiré probando a ver...
  #7 (permalink)  
Antiguo 25/10/2008, 12:28
Avatar de Negora  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 4 meses
Puntos: 5
Respuesta: Problemilla con background y texto

Ten cuidado, que el estilo para el selector * lo tienes sin cerrar.
  #8 (permalink)  
Antiguo 25/10/2008, 12:47
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Gracias por la observación, Negora
  #9 (permalink)  
Antiguo 25/10/2008, 12:55
Avatar de Negora  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 4 meses
Puntos: 5
Respuesta: Problemilla con background y texto

Isin: Te recomiendo que siempre que vayas a probar CSSs y su resultado uses un navegador que te indique errores, como Firefox u Opera, ya que si no te puedes pasar años probando y resulta que el fallo provenía de la sintaxis y no de la lógica ;) . O eso, o usar una herramienta de desarrollo que detecte estas cosillas, claro.
  #10 (permalink)  
Antiguo 25/10/2008, 13:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemilla con background y texto

No estoy en absoluto seguro de lo que quieres conseguir, pero a ver si sobre esta idea me dices qué es lo que te falla:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>advertencias</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background: red;}
#contenido {width: 790px;
position: absolute;
top: 120px;
left: 300px;
background: green;
}
#minibox {width: 260px;
height: 480px;
background: white;
border-with: 4px;
border-style: solid;
border-color: maroon;
padding-bottom: 9px;
}
h2 {font-family: Arial;
font-wigth: bold;
background: black;
text-align: center;
color: #fff;
}
p {font-family: Courier;
color: navy;
text-align: justify;
text-indent: 0.75 em;
margin: 10px;
}
</style>
</head>
<body>
<div id="contenido">
<div id="minibox">
<h2>Titulo</h2>
<p>Texto...</p>
</div>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 27/10/2008, 13:19
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Mikmoro, probaré esas pequeñas modificaciones que has aportado al código original y pondré un post para comentar si me funcionó.

Saludos
  #12 (permalink)  
Antiguo 28/10/2008, 06:57
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Muchas gracias, Mikmoro, el código revisado funciona muy bien . Lo que me planteo ahora es lo siguiente: por un lado, distanciar el minibox del borde esterno del contenido (del contenedor); esto es que tomando como referencia el resultado visual de ese código, se vea un poquillo de color verde del contenedor entre el rojo del body y el marrón del borde del minibox.

También se me ocurre otra cosa: si quiero poner cuatro minibox dentro del contenedor verde, por ejemplo dos arriba y dos más abajo, todos equidistantes entre sí ¿qué debo hacer? ¿Usar el atributo class para diferenciarlos de acuerdo a su posición? ¿Determinar simplemente un posicionamiento para el minibox ya existente y repetir ese código, recurriendo a <span style> para variar ese posicionamiento en cada uno de los otros tres?
  #13 (permalink)  
Antiguo 28/10/2008, 11:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemilla con background y texto

Cita:
Iniciado por Isin Ver Mensaje
Muchas gracias, Mikmoro, el código revisado funciona muy bien . Lo que me planteo ahora es lo siguiente: por un lado, distanciar el minibox del borde esterno del contenido (del contenedor); esto es que tomando como referencia el resultado visual de ese código, se vea un poquillo de color verde del contenedor entre el rojo del body y el marrón del borde del minibox.
Simplemente añádele un margen como margin: 4px; a #minibox

Cita:
Iniciado por Isin Ver Mensaje
También se me ocurre otra cosa: si quiero poner cuatro minibox dentro del contenedor verde, por ejemplo dos arriba y dos más abajo, todos equidistantes entre sí ¿qué debo hacer? ¿Usar el atributo class para diferenciarlos de acuerdo a su posición? ¿Determinar simplemente un posicionamiento para el minibox ya existente y repetir ese código, recurriendo a <span style> para variar ese posicionamiento en cada uno de los otros tres?
Primero decide los tamaños de cada caja y del contenedor, y después vemos cómo hacer que sean equidistantes, si han de serlo entre ellos o también con respecto a los bordes, etc..
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 28/10/2008, 12:22
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Te agradezco tu ayuda, Mikmoro. En cuanto a las dimensiones de las cajas y los contenedores, básicamente son las del código; puede que luego las modifique un pelín, pero -suponiendo que tales variaciones se produzcan- serían mínimas. Preguntaba lo del class y del span style más que nada para saber cómo abordar el asunto.

Durante las pruebas noté dos cosillas que, seguramente por mi inexperiencia en esto del diseño, me llamaron la atención. Una fue que si el texto sobrepasaba la capacidad del minibox, éste se prolongaba hacia abajo en IE, mientras que en Firefox la caja mantenía su tamaño, y el texto sobrante quedaba fuera y debajo de ella. Otra fue que al producirse el "exceso de texto", el borde inferior de minibox y contenedor quedaba pegado a la parte inferior de la pantalla, mientras que en Firefox se mantenía siempre una separación, viéndose el color del body antes de acabar la pantalla por abajo. Discrepancias entre navegadores, supongo ...
  #15 (permalink)  
Antiguo 28/10/2008, 12:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemilla con background y texto

Sí, mientras que IE siempre crece si crece el contenido, para firefox un height es fijo, es decir, no crece al crece su contenido.

Eso lo resuelves diciéndole a FF que height 480px no es su alto, sino su alto mínimo, de esta manera:

Cita:
#minibox {width: 260px;
height: 480px;
background: white;
border-with: 4px;
border-style: solid;
border-color: maroon;
padding-bottom: 9px;
min-height: 480px;
height: auto!important;
height: 480px;

}
En cuanto al espacio inferior no sé dequé se trata.

Y en cuanto a la disposición de las cajas, efectivamente podrías empezar por quitarle el ID y cambiarlo por un class, de manera que pongas esa misma clase a las cajas, pero vamos, habría muchas maneras de hacer eso.
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 28/10/2008, 12:34
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Entiendo... Y de esas muchas maneras de lograrlo, ¿cuál sería la más sencilla -en código- y fiable -de cara a prevenir incompatibilidades entre navegadores-?
  #17 (permalink)  
Antiguo 28/10/2008, 12:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemilla con background y texto

Probablemente hacer dos columnas (izda. y dcha.) que alberguen cada una a las dos cajas de cada lado, pero tendría que plantearme cómo lo voy a hacer para estar seguro.
__________________
Visita mi nueva web idplus.org
  #18 (permalink)  
Antiguo 28/10/2008, 12:53
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: Problemilla con background y texto

Gracias por tu poinión; iré probando a ver cómo me sale, y ya postearé las pegas que puedan surgirme (que seguro alguna surge ).

Gracias de nuevo y saludos
  #19 (permalink)  
Antiguo 28/10/2008, 13:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemilla con background y texto

Si surge aquí estamos.

Saludos.
__________________
Visita mi nueva web idplus.org
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 14:59.