Problemilla con background y texto

Isin · #1 (**permalink**) 23/10/2008, 04:47

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

talmente · #2 (**permalink**) 23/10/2008, 06:10

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

Código:

h2 {
	background: #00FF66;
	display: block;
	margin: 0px;
	padding: 0px;}

kseso? · #3 (**permalink**) 23/10/2008, 06:17

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 ;)

talmente · #4 (**permalink**) 23/10/2008, 06:35

Si Kseso?, esto enriquece el asunto

Isin · #5 (**permalink**) 23/10/2008, 10:18

Gracias a los dos, probaré con esos cambios que me indicáis.

Isin · #6 (**permalink**) 25/10/2008, 11:10

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...

Negora · #7 (**permalink**) 25/10/2008, 11:28

Ten cuidado, que el estilo para el selector * lo tienes sin cerrar.

Isin · #8 (**permalink**) 25/10/2008, 11:47

Gracias por la observación, Negora

Negora · #9 (**permalink**) 25/10/2008, 11:55

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.

Mikmoro · #10 (**permalink**) 25/10/2008, 12:19

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>

Isin · #11 (**permalink**) 27/10/2008, 12:19

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

Saludos

Isin · #12 (**permalink**) 28/10/2008, 05:57

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?

Mikmoro · #13 (**permalink**) 28/10/2008, 10:18

Cita:

Iniciado por Isin

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

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..

Isin · #14 (**permalink**) 28/10/2008, 11:22

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

...

Mikmoro · #15 (**permalink**) 28/10/2008, 11:29

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.

Isin · #16 (**permalink**) 28/10/2008, 11:34

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-?

Mikmoro · #17 (**permalink**) 28/10/2008, 11:46

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.

Isin · #18 (**permalink**) 28/10/2008, 11:53

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

Mikmoro · #19 (**permalink**) 28/10/2008, 12:21

Si surge aquí estamos.

Saludos.