elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Css. Problema con los selectores.		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Css. Problema con los selectores.  (Leído 2,703 veces)
luchi

Desconectado Desconectado

Mensajes: 71


Ver Perfil
Css. Problema con los selectores.
« en: 1 Febrero 2015, 22:32 pm »
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
  1. <div id="comunidades">
  2.   <div id="andalucia">
  3.         <ul>
  4.           <li>
  5.             Cursos Andalucía<br>
  6.             <img src="images/comunidades/Andalucia.svg.png">
  7.                </li>
  8.                 </ul>
  9.                  <div class="provincias">
  10.                    <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
  11.                       </div>
  12.                         <div class="provincias">
  13.                          <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  
  14.                             </div>
  15.                              </div>
  16.                               </div>
  17.  

Código
  1. .provincias{
  2.             background-color: green;
  3.         }
  4.         #andalucia{
  5.         overflow: hidden;
  6.    width: 150px;
  7.    border: 1px solid #bbb;
  8.    background: #ddd;
  9.    padding: 10px;
  10.         }
Cualquier ayuda será bienvenida
En línea
3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Css. Problema con los selectores.
« Respuesta #1 en: 2 Febrero 2015, 20:33 pm »
Me demore una vida en poder entenderte. (no se si tu te expresas mal o yo soy el lento  :xD)

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
  1. display:inline;

y poner:

Código
  1. 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.
« Última modificación: 2 Febrero 2015, 20:38 pm por Nac-ho » En línea
luchi

Desconectado Desconectado

Mensajes: 71


Ver Perfil
Re: Css. Problema con los selectores.
« Respuesta #2 en: 4 Febrero 2015, 00:33 am »
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?
En línea
3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Css. Problema con los selectores.
« Respuesta #3 en: 4 Febrero 2015, 02:48 am »
A esto me refiero con el indentado:
Código
  1. <div id="comunidades">
  2. 	<div id="andalucia">
  3. 		<ul>
  4. 			<li>
  5. 				Cursos Andalucía <br/>
  6. 				<img src="images/comunidades/Andalucia.svg.png">
  7.             </li>
  8.         </ul>
  9.         <div class="provincias">
  10.             <img src="images/comunicacion/cursos_almeria_comunicacion.png" alt="Cursos comunicación Almería" 
  11.                      title= "Cursos comunicación Almería">
  12.            <br/>Cursos Almería
  13.         </div>
  14.         <div class="provincias">
  15.             <img src="images/comunicacion/cursos_cordoba_comunicacion.png" alt="Cursos comunicación Cordoba" 
  16.                     title="Cursos comunicación Córdoba">
  17.            <br/>Cursos Córdoba  
  18.         </div>
  19.     </div>
  20. </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
  2.  
  4.  
  5. <meta charset="utf8"/>
  6.  
  8. 	*{margin:0;padding:0;font-family:corbel;}
  9. 	.tr{width:1240px;}
  10. 	.tr span {display:block;text-align:center;}
  11. 	.tr .td img{display:block;width:200px;height:75px;margin:0 auto;}
  12. 	.tr .td{width:20%;padding:10px;background:#F1F1F1;border:solid 1px #000;box-sizing:border-box;float:left;}
  13. 	.tr .td ul{list-style-position: inside;}
  15.  
  16. </head>
  17.  
  19.  
  20. <div class = "tr">
  21. 	<div class = "td"> 
  22. 		<img src="ImagenComunidad.png" title="Comunidad"/>
  23. 		<span>Nombre Comunidad</span>
  24. 	</div>
  25.  
  26. 	<div class = "td"> 
  27. 		<img src="ImagenComunidad.png" title="Comunidad"/>
  28. 		<span>Nombre Comunidad</span>
  29. 	</div>
  30.  
  31. 	<div class = "td"> 
  32. 		<img src="ImagenComunidad.png" title="Comunidad"/>
  33. 		<span>Nombre Comunidad</span>
  34. 	</div>
  35.  
  36. 	<div class = "td"> 
  37. 		<img src="ImagenComunidad.png" title="Comunidad"/>
  38. 		<span>Nombre Comunidad</span>
  39. 	</div>
  40.  
  41. 	<div class = "td"> 
  42. 		<img src="ImagenComunidad.png" title="Comunidad"/>
  43. 		<span>Nombre Comunidad</span>
  44. 	</div>
  45. </div>
  46.  
  47. <div class = "tr">
  48. 	<div class = "td">
  49. 		<ul>
  50. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  51. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  52. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  53. 		</ul>
  54. 	</div>
  55.  
  56. 	<div class= "td">
  57. 		<ul>
  58. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  59. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  60. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  61. 		</ul>
  62. 	</div>
  63.  
  64. 	<div class= "td">
  65. 		<ul>
  66. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  67. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  68. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  69. 		</ul>
  70. 	</div>
  71.  
  72. 	<div class= "td">
  73. 		<ul>
  74. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  75. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  76. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  77. 		</ul>
  78. 	</div>
  79.  
  80. 	<div class= "td">
  81. 		<ul>
  82. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  83. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  84. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  85. 		</ul>
  86. 	</div>
  87. </div>
  88.  
  89. <div class = "tr">
  90. 	<div class = "td">
  91. 		<ul>
  92. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  93. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  94. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  95. 		</ul>
  96. 	</div>
  97.  
  98. 	<div class= "td">
  99. 		<ul>
  100. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  101. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  102. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  103. 		</ul>
  104. 	</div>
  105.  
  106. 	<div class= "td">
  107. 		<ul>
  108. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  109. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  110. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  111. 		</ul>
  112. 	</div>
  113.  
  114. 	<div class= "td">
  115. 		<ul>
  116. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  117. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  118. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  119. 		</ul>
  120. 	</div>
  121.  
  122. 	<div class= "td">
  123. 		<ul>
  124. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  125. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  126. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  127. 		</ul>
  128. 	</div>
  129. </div>
  130.  
  131. <div class = "tr">
  132. 	<div class = "td">
  133. 		<ul>
  134. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  135. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  136. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  137. 		</ul>
  138. 	</div>
  139.  
  140. 	<div class= "td">
  141. 		<ul>
  142. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  143. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  144. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  145. 		</ul>
  146. 	</div>
  147.  
  148. 	<div class= "td">
  149. 		<ul>
  150. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  151. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  152. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  153. 		</ul>
  154. 	</div>
  155.  
  156. 	<div class= "td">
  157. 		<ul>
  158. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  159. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  160. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  161. 		</ul>
  162. 	</div>
  163.  
  164. 	<div class= "td">
  165. 		<ul>
  166. 			<li><b>Nombre: </b>Nombre Comunidad</li>
  167. 			<li><b>Descripción: </b>Descripcion de la comunidad</li>
  168. 			<li><b>Otros: </b>Otras cosas de la comunidad</li>
  169. 		</ul>
  170. 	</div>
  171. </div>
  172. </body>
  173.  
  174. </html>
« Última modificación: 4 Febrero 2015, 03:25 am por Nac-ho » En línea
luchi

Desconectado Desconectado

Mensajes: 71


Ver Perfil
Re: Css. Problema con los selectores.
« Respuesta #4 en: 4 Febrero 2015, 22:48 pm »
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?.
En línea
3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Css. Problema con los selectores.
« Respuesta #5 en: 4 Febrero 2015, 23:19 pm »
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"/>

 :huh: :huh: :huh: :huh: :huh:
« Última modificación: 4 Febrero 2015, 23:21 pm por Nac-ho » En línea
luchi

Desconectado Desconectado

Mensajes: 71


Ver Perfil
Re: Css. Problema con los selectores.
« Respuesta #6 en: 5 Febrero 2015, 00:57 am »
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.
En línea
3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Css. Problema con los selectores.
« Respuesta #7 en: 5 Febrero 2015, 01:16 am »
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
  1. span{color:blue;}

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

Código
  2. 	<head>
  3. 		<style>span{color:red;}</style>
  4. 		<link rel="stylesheet" type="text/css" href="theme.css"/>
  5. 	</head>
  6. 	<body>
  7. 		<span>Hola Mundo</span>
  8. 	</body>
  9. </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.
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema BlueZScanner y problema de conexión
Hacking Mobile 		Kasswed 3 6,297 Último mensaje 6 Mayo 2006, 22:04 pm
por Gospel
[Aporte] JQuery (Selectores)
Desarrollo Web 		AFelipeTrujillo 0 2,967 Último mensaje 4 Enero 2011, 18:08 pm
por AFelipeTrujillo
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines