Conflicto entre 2 reglas css

Red_Night · #1 (**permalink**) 17/11/2009, 03:51

Buenas de nuevo, tengo un pequeño problema que no se como solucionar. Dado el siguiente codigo css:

Código:

//imagenes centradas
.titulo_imagen { 
	text-align:center;
    }

.capitulo > .bloque{
	text-indent: 1.5em;
	text-align:justify;
	margin-right:20px;
	margin-left:20px;
    }

Os explico, basicamente lo que quiero hacer es centrar las imagenes con etiqueta .titulo_imagen y por otro lado los bloques de texto de los capitulos de mi libro justificarlos.
El problema es que tengo 2 text-align y prevalece el de .capitulo > .bloque, se sopone que con la etiqueta !important en titulo_imagen deberia aplicar esa regla a todo lo que sea titulo imagen pero no es asi.

Las apariciones de imagenes son de la sigiuente manera en el xhtml

Código HTML:

<h4 class="bloque titulo_imagen titulo" id="capitulo_2_titulo_imagen_2">
            <img id="capitulo_2_titulo_imagen_2_bloque_1" src="recursos/rec_143.jpg">
         </h4>

Con lo que solo se me ocurre para referenciar las imagenes y centrarlas la forma en la que lo puse arriba en el css. Visto lo visto necesito cambiar la regla css que me permite centrar esas imagenes o hacer que la que tengo escrita, que funciona en cuanto quito el conflicto con el otro text-align prevalezca sobre la anterior.

Si alguien está mas ducho que yo en estos temas, que no es dificil, se agradecería una mano, aunque fuese al cuello.

kseso? · #2 (**permalink**) 17/11/2009, 06:13

Cita:

Os explico, basicamente lo que quiero hacer es centrar las imagenes con etiqueta .titulo_imagen y por otro lado los bloques de texto de los capitulos de mi libro justificarlos.

Pues sí, lo estás haciendo un tanto enrevesadamente. No adivino con los códigos que has puesto para qué quieres el selector de adyacentes (>). Y nada semántico que el contenido de un hnº sea una imagen.
Ejecuta lo siguiente:

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" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0; position: relative;}
* html, * body { height:100%; overflow:auto;}
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background: #FFF;}
.capitulo {
background: #444;
width: 760px;
margin: 10px auto 0;
}
.capitulo p {
font-size: 1em;
text-align: justify;
text-indent: 50px;
color: #fff;
padding: 10px 10px 0;
}
.capitulo h4 {
font-size: 2em;
font-weight: bolder;
color: #FFCC00;
text-indent: 100px;
margin: 10px 0;
}
.titulo_img {
display: block;
margin: 0 auto;
padding: 2px;
border: 3px double #cdcdcd;
background: #777;
}
</style>
</head>
  <body>
    <div class="capitulo">
        <h4 id="capitulo_1">Capítulo 1:</h2>
        <img class="titulo_img" src="http://www.inta.es/descubreAprende/imagenes/Foto_web_inf_06.jpg" alt="imagen del capitulo" />
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>    
    </div>
    
    <div class="capitulo">
        <h4 id="capitulo_2">Capítulo 2:</h2>
        <img class="titulo_img" src="http://www.roma.viajar-italia.com/imagenes/avion-roma.jpg" alt="imagen del capitulo" />
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>
        <p>Lorem ipsum dolor sit amet consectetuer amet Nam convallis at Curabitur. Elit Pellentesque Nulla Pellentesque fermentum vel condimentum Pellentesque elit consectetuer Ut. Curabitur tristique Sed pulvinar ac Morbi tincidunt vitae dignissim adipiscing rutrum. Semper Morbi justo Vestibulum at libero lorem dolor pede pellentesque lacus. Dapibus dictum Integer odio Nullam iaculis nonummy eu pellentesque.</p>    
    </div>
  </body>
</html>

Red_Night · #3 (**permalink**) 17/11/2009, 06:51

El h4 como dices no debe ser un h4 sino un div, el problema es que el codigo xhtml no es negociable porque es lo que a mi me llega, y mi cometido es hacer una hoja de estilo para maquetar ese texto de cara a lectores de ebook. Eso me permite hacer locuras que no esten muy bien pero que funcionen. Lo del selector > basicamente es porque no encuentro una forma de referenciar lo siguiente:

Capitulo
- Parrafo
- Parrafo
- Parrafo
- Imagen
- Parrafo

Dado eso quiero que parrafo esté justificado e imagen centrada. Por la forma en que me vienen definidas las imagenes align-text: center me vale, aunque no sea correcto semanticamente. El problema es como referenciar tocando solo en el css a los parrafos que esten dentro de capitulo por una parte y por otra a las imagenes que esten en cualquier sitio.

Quiza me esté enrevesando bastante en codigo, pero es que al tener varias clases en un mismo div me vuelve loco y no se por donde meterle mano.

kseso? · #4 (**permalink**) 17/11/2009, 07:14

Es que los párrafos deben ser sí o si <p>, y quien ha hecho el html (o la aplicación que lo genera) así debería haberlo programarlo.
Pero si por ahí no puedes actuar, pon el código html (el generado por el navegador) de la caja padre de "capitulo" y su contenido (tampoco todo el yexto si es muy extenso) así como el css que interviene sobre ellas. Un enlace a una página de prueba sería mejor.

¿Esto es común a todas las imágenes:
<h4 class="bloque titulo_imagen titulo"...
?

Un saludo

Red_Night · #5 (**permalink**) 18/11/2009, 03:33

lo del h4 si es comun a todas las imagenes.

Pongo un fragmento de xhtml para que veais la estructura:

Código:

<div class="bloque capitulo contenedor" id="capitulo_5">

         <h1 class="bloque titulo_capitulo titulo" id="capitulo_5_titulo_capitulo_1">
            <em id="capitulo_5_titulo_capitulo_1_bloque_1">
               <strong id="capitulo_5_titulo_capitulo_1_bloque_1_bloque_1">Relacions familiars</strong>
            </em>
         </h1>

         <div class="bloque" id="capitulo_5_bloque_1">La mare d'en Pep
vida.</div>

<div class="bloque" id="capitulo_5_bloque_16">La dona parla, parla.
Amolla moltes coses, és clar, però no pas totes. Sempre ha estat
astuta per evitar els temes compromesos. Sap que la pròpia veu no
ts.</div>

         <h4 class="bloque titulo_imagen titulo" id="capitulo_5_titulo_imagen_1">
            <img id="capitulo_5_titulo_imagen_1_bloque_1" src="recursos/rec_156.jpg">
         </h4>

<div class="bloque" id="capitulo_5_bloque_17">En Pep parla molt poc
de la Maria Teresa, o de l'Anna. Sap que la seva mare estimava la
a l'hivern, un plat calent a taula.</div>

Ahi se observa la estructura que tienen todos los capitulos.
El css es el siguiente:

Código:

//Resaltado de capítulos
.titulo_capitulo {
	font-size: 2.5em;
	page-break-before:always;
    }

//imagenes centradas
h4{ 
	text-align:center;
    }

//Bordeado de recuadros
.recuadro {
	page-break-before:always;
	margin-top:180px;
	margin-left:100px;
    }

.capitulo > .bloque{
	text-indent: 1.5em;
	text-align:justify;
	margin-right:20px;
	margin-left:20px;
    }

Y el conflicto el de antes text-align justify y center se chocan y me dejan las imagenes sin centrar. SI quito la linea de justify en la ultima parte del css si me centra las imagenes.
No doy con la tecla, como te comenté no se me ocurre otra cosa que referenciar de otra manera los mismos apartados, pero no se como.

kseso? · #6 (**permalink**) 18/11/2009, 06:01

Hola Red_Night
La palabra mágica es especificidad del css
Con la información que facilitas (el código html):

Cita:

si creas la regla css siguiente la imagen quedará centrada sin influir en el resto:

Código css:

Ver originalh4.bloque img {
display:block;
margin:0 auto;
}

He supuesto que la clase .bloque siempre estará presente en todos los h4 que engloban a todas y cada una de las imágenes de ese tipo.

bequick · #7 (**permalink**) 23/06/2012, 16:18

Hola

La forma científica de resolver conflictos en CSS se llama especificidad.

te dejo un link que explica como calcularla

http://rightnowweb.blogspot.com/2012/06/especificidad-en-css.html

saludos

kseso? · #8 (**permalink**) 23/06/2012, 16:40

Revive un tema que lleva muerto 2 años y medio ignorando el cartel rojo.
Un tema donde el consultante no volvió ni a decir aquí estoy.
Dice lo mismo que ya se dijo (especificidad).
Y enlaza un tema que cuanto menos se podría calificar de superficial y poco riguroso con la especificación. Por no mencionar que flaco favor le ha hecho al artículo original que cita como fuente.
No es de lo mejor que se haya escrito, es sólo un artículo más al respecto, pero es el que tengo más a mano.