Css. Problema con los selectores.

[luchi]

Hola gente. tengo un problema que me está volviendo loco con los selectores de CSS . El caso esque necesito una tabla en la que el <thead> sea la comunidad autónoma con una imagen grande de la comunidad y un texto, debajo tendrán que ir las provincias en un <tr> formado por tres <td>, cada <td> será una provincia (también formadas por una imagen (más pequeña que la de la comunidad) y un texto, si hay más de tres provincias, se creará otro <tr>).
Esto es una forma de explicarlo ya que debido a lo mal que se llevan las tablas en html con el responsive no es mi intención crear una tabla convencional, así que lo he echo con divs, pero hay dos problemas:
1º No hay manera que se coloque de éste modo que explico.
2º El más acuciante: no funcionan correctamente los selectores. Sólo funciona el que está debajo, son un id de la comunidad, en éste caso "#andalucia" y la clase ".provincias". Éste problema va ligado al anterior, ya que aunque en el código que os muestro debajo en ".provincias" sólo hay un fondo verde, si coloco un "display: inline" o un "float: left" para que se coloque no funciona.
Puede que el problema venga de que no lo enfoco de modo adecuado, pero en cualquier caso, necesito un cable.
Os dejo el código:

Código (html4strict) [Seleccionar] Expandir

<div id="comunidades">
  <div id="andalucia">
        <ul>
          <li>
            Cursos Andalucía<br>
            <img src="images/comunidades/Andalucia.svg.png">
               </li>
                </ul>
                 <div class="provincias">
                   <img src="images/comunicacion/cursos_almeria_comunicacion.png" width="53" height="68" alt="Cursos comunicación Almería" title="Cursos comunicación Almería"><br>Cursos Almería
                      </div>
                        <div class="provincias">
                         <img src="images/comunicacion/cursos_cordoba_comunicacion.png" width="53" height="68" alt="Cursos comunicación Cordoba" title="Cursos comunicación Córdoba"><br>Cursos Córdoba 
                            </div>
                             </div>
                              </div>


Código (css) [Seleccionar] Expandir

.provincias{
            background-color: green;
        }
        #andalucia{
        overflow: hidden;
   width: 150px;
   border: 1px solid #bbb;
   background: #ddd;
   padding: 10px;
        }
Cualquier ayuda será bienvenida

[3n31ch]

Me demore una vida en poder entenderte. (no se si tu te expresas mal o yo soy el lento  )

Ok en respuesta a tu duda, lo que tienes que hacer para que te tome en cuenta el css (y así poder ajustar todo lo que quieras) es evitar poner:

Código (css) [Seleccionar] Expandir

display:inline;

y poner:

Código (css) [Seleccionar] Expandir

display:inline-block;

De esta manera podrás tratar tu elemento inline como un elemento block, y así si podrás ocupar background y float.

Dime si te funciona. Si no intenta explicarme mejor tu problema porque la verdad es que me cuesta mucho entenderte. (y modifica el código poniendo el indentado correcto por favor)
PD: a la próxima que pongas código intenta respetar el indentado.

[luchi]

Hola.
Gracias por responder y por el esfuerzo.
Pues esque tadavía no he puesto "display:inline;" y no me funciona. Yo lo que quiero hacer es como una especie de tabla: una fila con comunidades(imagen y texto de cada comunidad) y debajo de cada comunidad varias filas con provincias(imagen y texto de cada provincia). Hay más código CSS encima, pero ése es justamente el que no me funciona.
¿a qué te refieres con el indentado?

[3n31ch]

A esto me refiero con el indentado:

Código (html4strict) [Seleccionar] Expandir

<div id="comunidades">
<div id="andalucia">
<ul>
<li>
Cursos Andalucía <br/>
<img src="images/comunidades/Andalucia.svg.png">
           </li>
       </ul>
       <div class="provincias">
           <img src="images/comunicacion/cursos_almeria_comunicacion.png" alt="Cursos comunicación Almería"
                    title= "Cursos comunicación Almería">
          <br/>Cursos Almería
       </div>
       <div class="provincias">
           <img src="images/comunicacion/cursos_cordoba_comunicacion.png" alt="Cursos comunicación Cordoba"
                   title="Cursos comunicación Córdoba">
          <br/>Cursos Córdoba  
       </div>
   </div>
</div>

Te enviare un mensaje, para ver si te puedo ayudar. Me es muy complicado hacerlo por acá sin ver tu código completo y sin ver algún boceto delo que quieres.

(yo le haría un indentado menor porque aun asi es dificil de entender)



He hecho un ejemplo que quizás te ayude, espero que te sea de ayuda.

Código (html4strict) [Seleccionar] Expandir

<html>

<head>

<meta charset="utf8"/>

<style>
*{margin:0;padding:0;font-family:corbel;}
.tr{width:1240px;}
.tr span {display:block;text-align:center;}
.tr .td img{display:block;width:200px;height:75px;margin:0 auto;}
.tr .td{width:20%;padding:10px;background:#F1F1F1;border:solid 1px #000;box-sizing:border-box;float:left;}
.tr .td ul{list-style-position: inside;}
</style>

</head>

<body>

<div class = "tr">
<div class = "td">
<img src="ImagenComunidad.png" title="Comunidad"/>
<span>Nombre Comunidad</span>
</div>

<div class = "td">
<img src="ImagenComunidad.png" title="Comunidad"/>
<span>Nombre Comunidad</span>
</div>

<div class = "td">
<img src="ImagenComunidad.png" title="Comunidad"/>
<span>Nombre Comunidad</span>
</div>

<div class = "td">
<img src="ImagenComunidad.png" title="Comunidad"/>
<span>Nombre Comunidad</span>
</div>

<div class = "td">
<img src="ImagenComunidad.png" title="Comunidad"/>
<span>Nombre Comunidad</span>
</div>
</div>

<div class = "tr">
<div class = "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>
</div>

<div class = "tr">
<div class = "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>
</div>

<div class = "tr">
<div class = "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>

<div class= "td">
<ul>
<li><b>Nombre: </b>Nombre Comunidad</li>
<li><b>Descripción: </b>Descripcion de la comunidad</li>
<li><b>Otros: </b>Otras cosas de la comunidad</li>
</ul>
</div>
</div>
</body>

</html>

[luchi]

Hola.
Por fin funciona normal el CSS, para ello, en lugar de poner el CSS en el documento, lo puse en la hoja de estilos aparte. Me fastidia por que sólo se aplica para un archivo, pero al fin funciona con normalidad. No sé qué ha podido pasar, pero gracias por tu ayuda.
Una última cosa: no acabo de entender lo del indentado, si te refieres al código, lo puse en HTML4 Strict ¿cuál hubiera sido el correcto?.

[3n31ch]

Indentado: http://es.wikipedia.org/wiki/Indentaci%C3%B3n

Respecto a tu problema... quieres decir que el CSS lo pusiste en las etiquetas <style></style> en lugar de hacer uso de <link rel="stylesheet" type="text/css" href="theme.css"/>

[luchi]

Si. tengo <link rel="stylesheet" type="text/css" href="theme.css"/> para estilos que afectan a toda la web y <style></style> para ésto ya que sólo afecta a un archivo. Si lo pongo en la hoja de estilos aparte del archivo funciona bien, si lo coloco en el archivo, no se comporta de forma normal.

[3n31ch]

Ok quizás sea lo siguiente:

No se como tienes organizado tu código es por esta razón que me cuesta mucho ayudarte (entiéndeme, me estas dando extractos pequeños y no puedo hacer pruebas necesarias  )

Quiero explicarte algo, y quizás sea ese el problema.

Este es el contenido del archivo theme.css:

Código (css) [Seleccionar] Expandir

span{color:blue;}

Teniendo en cuenta esto si yo creo un código html de la siguiente manera:

Código (html4strict) [Seleccionar] Expandir

<html>
<head>
<style>span{color:red;}</style>
<link rel="stylesheet" type="text/css" href="theme.css"/>
</head>
<body>
<span>Hola Mundo</span>
</body>
</html>

El resultado sera:
Hola Mundo

Pero si pongo la etiqueta <link rel="stylesheet" type="text/css" href="theme.css"/> antes del style entonces el resultado seria:
Hola Mundo

Ya que predomina el ultimo. Quizas tu codigo <style> esta chocando con el código del archivo externo.

Por otro lado si no es esto también puede ser un problema con el cache de tu browser, me ha pasado que desarrollando no se visualizan los cambios de mi código, pero cuando lo ejecuto en otro browser si se ven los cambios. Esto sucede porque se guardo de alguna manera el CSS en una especie de base de datos que se utiliza para que la pagina web cargue mas rápido la próxima vez que se acceda. Comprueba en distintos browsers.