No puedo asignar tamaño divs en slider

[redjon40]

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

[pzin]

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

Código CSS:

.slides_container div
 

Cámbialo por:

Código CSS:

.slides_container > div
 

Para que sólo afecte a sus hijos.

[redjon40]

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

[pzin]

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:

selector {
  atributo: valor !important;
}
 

[redjon40]

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

[pzin]

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.

[redjon40]

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

Código HTML:

<div id="slcontainer">
<div id="slides">
<div class="slides_container" style="overflow: hidden; position: relative; display: block;">
<div class="slides_control" style="position: relative; width: 2700px; height: 300px; left: -900px;">
<div id="sld1" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
<div class="txtContainer">
<p>parrafo1</p>
<p>
parrafo2
</p>
</div>
</div>
<div id="sld2" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
<div id="sld3" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
<div class="txtContainer">
</div>
<div id="sld4" style="position: absolute; top: 0px; left: 900px; z-index: 5; display: block;">
<div id="sld5" style="position: absolute; top: 0px; left: 900px; z-index: 0; display: none;">
</div>
</div>
<ul class="pagination">
</div>
</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