Foros del Web » Creando para Internet » CSS »

No puedo asignar tamaño divs en slider

Estas en el tema de No puedo asignar tamaño divs en slider en el foro de CSS en Foros del Web. Hola Estoy usando un plugin de Jquery, slides, para mostrar un slider y quiero sobreexponer sobre las imagenes un texto. El problema es que quiero ...
  #1 (permalink)  
Antiguo 19/06/2013, 05:18
 
Fecha de Ingreso: junio-2013
Mensajes: 6
Antigüedad: 10 años, 9 meses
Puntos: 2
No puedo asignar tamaño divs en slider

Hola

Estoy usando un plugin de Jquery, slides, para mostrar un slider y quiero sobreexponer sobre las imagenes un texto.

El problema es que quiero usar un div para posicionar y dar algo de formato al texto pero no me deja asignarle un tamaño, siempre aparece con el tamaño maximo.

Este es el código del plugin:

Código:
$("#slides").slides({
	play:4000,
	pause:1500,
	hoverPause:true
});
Este es el html del slider en cuestion:

Código HTML:
<div id="slcontainer">
	     	
	     <div id="slides">
		            <div class="slides_container">
		                <div id="sld1">
		                 
		                    <div class="txtContainer">
		                   	<div class="txt">
		                   		<p>parrafo 1</p>
		                 		<p>parrafo 2</p>
		                   	</div>
		                		
		                 	</div>
		                </div>
		                .
		                .
                                . 
		                <div id="sld5">
		                	<div class="txtContainer">
		                		<p>texto</p>
		                	</div> 
		                	
		                </div>
		            </div>
		        </div>
	       </div>  

y éste el CSS


Código:
.slides_container {
    width:900px;
    height:300px;
    position:relative;
    top:0px;
    margin:0px auto;
    
}
.slides_container div {
    width:900px;
    height:300px;
    display:block;
    position:relative;
}


#slcontainer{
	text-align:center;
	
	width:950px;
	margin:auto;
}

.txtContainer{
		position:relative;
		padding-top:10px;
		padding-left:1em;
		text-align:right;
		color:#FFF;
		font-weight:bold;
                width:400px;
                height:200px;
	}
.txt{
	background:#00A400;
	width:200px;
	height:200px;
}

#sld1{
	background:url("../img/design/vozRed.jpg") no-repeat;
	background-size:900px 300px;
}
.txtContainer y .txt salen con el tamaño de 900 y 300, tapando el fondo del div del slider e impidiendo que pueda personalizar los formatos.

He probado con important y tampoco y no veo que pasa, no se si será algo del plugin o alguna tontería.

Si alguien me puede decir que pasa se lo agradecería mucho, si no pues me busco otro plugin o me lo hago a mano, que me tiene harto

Gracias
  #2 (permalink)  
Antiguo 19/06/2013, 05:29
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: No puedo asignar tamaño divs en slider

Supongo que tu problema es que todos los div están heredando de este selector:

Código CSS:
Ver original
  1. .slides_container div

Cámbialo por:

Código CSS:
Ver original
  1. .slides_container > div

Para que sólo afecte a sus hijos.
  #3 (permalink)  
Antiguo 19/06/2013, 09:05
 
Fecha de Ingreso: junio-2013
Mensajes: 6
Antigüedad: 10 años, 9 meses
Puntos: 2
Respuesta: No puedo asignar tamaño divs en slider

Probé con eso, pero el plugin crea un div "slide-controller" y le asigna el estilo a ésa y descoloca todo.

De todas maneras no se supone que debería coger el último estilo definido? si creo una regla más interna para asignar ése tamaño por qué no lo coge?

Voy a seguir cacharreando un rato, gracias por la respuesta
  #4 (permalink)  
Antiguo 19/06/2013, 09:10
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: No puedo asignar tamaño divs en slider

Pues el si crean los estilos desde el plug-in, seguramente estos sean inyectados en el HTML, como valor del atributo style, y estos tienen preferencia sobre las hojas de estilos.

Lo que podrías hacer es usar !important en tu CSS, así dichos estilos tendrán preferencia sobre los estilos en linea.

Código CSS:
Ver original
  1. selector {
  2.   atributo: valor !important;
  3. }
  #5 (permalink)  
Antiguo 19/06/2013, 10:28
 
Fecha de Ingreso: junio-2013
Mensajes: 6
Antigüedad: 10 años, 9 meses
Puntos: 2
Respuesta: No puedo asignar tamaño divs en slider

He probado con eso y tampoco hace ni caso.

Al final he asignado el estilo en cada slide y sale como quiero.
Comprobando con el firebug le aplica estilos con "style" pero nada de tamaños, no sé, me gustaría saber que ha pasado para no quedarme con la cosilla.

En fin, gracias y me buscaré otro plugin

hasta otra
  #6 (permalink)  
Antiguo 19/06/2013, 11:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: No puedo asignar tamaño divs en slider

El problema es que sin ver las cosas funcionar es difícil saber, porque lo que haga o deje de hacer ese plugin no se puede ver con el código que aportas.
  #7 (permalink)  
Antiguo 20/06/2013, 05:56
 
Fecha de Ingreso: junio-2013
Mensajes: 6
Antigüedad: 10 años, 9 meses
Puntos: 2
Respuesta: No puedo asignar tamaño divs en slider

Aquí está el codigo que crea en ejecucion visto desde el firebug en firefox

Código HTML:
Ver original
  1. <div id="slcontainer">
  2. <div id="slides">
  3. <div class="slides_container" style="overflow: hidden; position: relative; display: block;">
  4. <div class="slides_control" style="position: relative; width: 2700px; height: 300px; left: -900px;">
  5. <div id="sld1" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
  6. <div class="txtContainer">
  7. <p>parrafo1</p>
  8. <p>
  9. parrafo2
  10. </p>
  11. </div>
  12. </div>
  13. <div id="sld2" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
  14. <div id="sld3" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
  15. <div class="txtContainer">
  16. </div>
  17. <div id="sld4" style="position: absolute; top: 0px; left: 900px; z-index: 5; display: block;">
  18. <div id="sld5" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
  19. </div>
  20. </div>
  21. <ul class="pagination">
  22. </div>
  23. </div>

Pero vamos, que he conseguido lo que quería por otra vía, ya sería por curiosidad y gracias por el interés

Etiquetas: height, plugin, tamaño, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:08.