CSS de varios elementos en una línea...

[bittxo]

Hola amigos. Tengo una duda complicada. Espero poder explicarme bien.

En un proyecto que desarrollo para web, sólo puedo modificar el CSS de la página, es decir no puedo variar el código asp de programación para modificar o añadir nombres de clase a los elementos.

O sea, tengo que modificar el aspecto a través de las hojas de estilo, usando los nombres de clase y elementos que ya figuran en el código fuente.

Bien ahora paso a la duda.

Tengo dos secciones a cambiar el carrito de la compra y el blog, ambos módulos incluidos en esa programación asp. Estos serían los códigos de ambas páginas:

- Carrito:

<div id="maincontainer" class="sccatalog itemlist">
<div class="sectiontbarea">
Título
</div>
</div>

- Blog:

<div id="maincontainer" class="blogarticles itemlist">
<div class="sectiontbarea">
Título
</div>
</div>



Como veis, ambas páginas tienen a los elementos (div, span, etc...) duplicados el nombre. Hay muchos que no os pongo para no hacerlo demasiado largo.

Comparten los nombres de las clases, con lo que todos los cambios que hago, afectan a ambas páginas por igual, aunque quiero que sean diferentes claro.

Pensé en usar el único elemento de clase o id, que varía entre ellos, para que los resultados se mostraran diferentes:

#maincontainer.sccatalog.itemlist .sectiontbarea {
border: 2px solid #F00;
}

#maincontainer.blogarticles.itemlist .sectiontbarea {
border: 4px solid #666;
}




Pues bien, de esta manera aunque ambas zonas tienen grosores diferentes de línea, muestra la misma en ambos, aunque el sccatalog y blogarticles sean de zonas diferentes. El itemlist hace que aparezca en ambos lo mismo...

En que me equivoco en el código CSS para no apuntar correctamente cada línea a una zona distinta?









Edito una aclaración... El código CSS se ve perfectamente en Mozilla, es decir, cada página tiene el grosor de la línea de un tamaño. Es Iexplorer el que no interpreta bien este código, y muestra el mismo para los dos, el del que está más abajo en la hoja de estilo...

Qué código CSS es bueno para que ambos browsers muestren lo mismo? El problema es no poder dar nombres de clases distintos y heredar obligado lo que ya está hecho... Pero entiendo que igual que Mozilla lo entiende, habrá forma de que Explorer lo haga...

[BloodShadow]

No entendi muy bien la pregunta, pero con esos estilos que haces no estas heredando nada, te recomiendo, como tu lo dices, usar el unico elemento que varia entre ellos, el cual es la clase blogarticles.

Sobreescribe al final del css esa clase.

Otro resultado podria ser que, hagas estilos nuevos de esas clases y el id, hasta el final de la hoja de estilo para que reemplaze todos los estilos que trae :) jajaja eso seria lo mas tramposo pero lo mas factible xD ya que estarias sobreescribiendo todos los estilos, lo cual te permitiria darle el formato que tu quieras...

Espero te sirva de algo mi ayuda, saludos

[bittxo]

Ya he sobreescrito usando ese cambio. Si te fijas, los códigos de asp yo he hecho dos css distintos para cada uno, usando esa diferencia.

El problema es que en Mozilla lo veo bien, pero en Iexplorer no.

O sea, en Mozilla veo cada página con una línea de un color y de un grosor. Pero en Iexplorer las veo las dos iguales. Los cambios de uno no afectan al otro...

No sé si me explico.

[dluxox_]

tienes actualizados los navegadores?

[BloodShadow]

Iniciado por bittxo

Ya he sobreescrito usando ese cambio. Si te fijas, los códigos de asp yo he hecho dos css distintos para cada uno, usando esa diferencia.

El problema es que en Mozilla lo veo bien, pero en Iexplorer no.

O sea, en Mozilla veo cada página con una línea de un color y de un grosor. Pero en Iexplorer las veo las dos iguales. Los cambios de uno no afectan al otro...

No sé si me explico.

Pero no estas heredando nada. Una herencia es tipo arbol, va en bajada por decirlo asi y tu aca haces

#maincontainer
.sccatalog <-- aca se rompe tu herencia
.itemlist
.sectiontbarea

Basandome en tu maquetacion la herencia seria algo asi:

Carrito:

#maincontainer .sectiontbarea { }

O

.sccatalog .sectiontbarea { }

O

.itemlist .sectiontbarea { }


Carrito:

#maincontainer .sectiontbarea { }

O

.blogarticles .sectiontbarea { }

O

.itemlist .sectiontbarea { }

[bittxo]

A ver si así me explico mejor:


- Carrito (listado de productos):

<div id="maincontainer" class="sccatalog itemlist">
<div class="sectiontbarea">
Título
</div>
</div>

- Carro (detalle de un producto)

<div id="maincontainer" class="sccatalog itemdetail">
<div class="sectiontbarea">
Título
</div>
</div>




- Blog (listado de entradas):

<div id="maincontainer" class="blogarticles itemlist">
<div class="sectiontbarea">
Título
</div>
</div>

- Blog (detalle de una entrada):

<div id="maincontainer" class="blogarticles itemlist">
<div class="sectiontbarea">
Título
</div>
</div>





Esto hacen cuatro páginas. Quiero que cada una sea diferente, sin embargo lo que consigo con mi css, es que las dos itemlist sean iguales y las dos itemdetail sean iguales. Se copian una a otra, por el nombre similar.


- Código CSS

#maincontainer.sccatalog.itemlist .sectiontbarea {
border: 1px solid #F00;
}

#maincontainer.sccatalog.itemdetail.sectiontbarea {
border: 2px solid #F00;
}

#maincontainer.blogarticles.itemdetail.sectiontbar ea {
border: 3px solid #666;
}

#maincontainer.blogarticles.itemlist .sectiontbarea {
border: 6px solid #666;
}








No sé si me entiendes ahora. Poniendo esos códigos, en Mozilla se ve bien pero en Iexplorer no.

[bittxo]

Intentaré ser más conciso....


Alguien me puede decir porque este código CSS lo ofrece bien Mozilla pero Iexplorer no lo interpreta?

#maincontainer.sccatalog.itemlist .sectiondataarea table td+td{
background: #666;
width: 150px;
}


Con él controlo un td concreto dentro de una table, que está contenida dentro de varios div's. Como os decía no puedo cambiar las class de los elementos, así que tengo que jugar a las relaciones con el CSS...

Hay forma de que Iexplorer interprete bien ese código o que tenga que organizarlo de otra forma para que él lo interprete?

Si se ve mi página en FF veo en una tabla, uno de los td en gris y de una medida concreta. En Iexplorer no se ve el color de fondo y la medida se la pasa por el forro... O sea, que no construyo bien el código para Explorer.

Os agradería enormemente la ayuda pues me estoy volviendo loco. No sé si debo usar algún hack para IE o bien usar argucias de css como el important o los guiones, etc...

Algún cable por favor, que estoy atascado aquí y no puedo avanar a otros temas...

[alexk]

Código:

#maincontainer.sccatalog.itemlist .sectiondataarea table td+td

por usar un selector CSS3
http://librosweb.es/css_avanzado/cap..._de_css_3.html
la que haz liado, si tubieras el ejemplo en linea seria mejor... que me mareo mucho con tanta letra... ser mas preciso con el problema seria mejor

[bittxo]

Sin el + tampoco se ve en Mozilla...

No puedo mostrar el sitio aún...

Veamos, tengo que dar estilo a distintos td de una tabla, sin poder renombrar las clases, sino usando las ya existentes.

Necesito una cadena en .css que me conecte con esos td para controlar cada uno por separado, su ancho, altura, color...

No sé como explicarme mejor...