Foros del Web » Creando para Internet » CSS »

ayuda con ancho de capas ¿variable?

Estas en el tema de ayuda con ancho de capas ¿variable? en el foro de CSS en Foros del Web. Hola. Tengo un problema con las capas en el diseño que intento hacer: tengo en una capa contenedora un marco a la izquierda y una ...
  #1 (permalink)  
Antiguo 04/02/2010, 14:27
 
Fecha de Ingreso: febrero-2010
Mensajes: 26
Antigüedad: 7 años, 10 meses
Puntos: 0
ayuda con ancho de capas ¿variable?

Hola. Tengo un problema con las capas en el diseño que intento hacer:

tengo en una capa contenedora un marco a la izquierda y una capa float:right con una tabla de fotos en miniatura a la derecha. mediante js, al pinchar en las miniaturas, se carga una foto en el marco. la capa de las tablas tiene un scroll para poder visualizar todas las miniaturas que se salen de ella.
El problema es que hay fotos bastante anchas y me cubren la capa de la tabla-miniaturas. He conseguido que esta capa se desplaze según el ancho que adopte el marco, pero se me sale de la pantalla (de la capa contenedor) y la barra de scroll no llega hasta el final de la tabla.

¿Hay alguna forma de hacer, sólo con css, que la capa se desplace pero que el scroll llegue hasta el final? o que cambie de tamaño según el ancho que tenga el marco...

Aquí les dejo el código por si acaso...

.bordes {background-color:#AD9805;}

#ancla{ border:#CCCCCC solid 5px;
position:relative;
top:7%;
height:80%;
width:99%;

}

#marco { border-color:#CCCCCC; border-style:groove; border-width:5px;
margin:25px;
float:left;

}


#contenedora{position:absolute; top:75%; width:100%;}

#contenedor { float:right;
width:773px;
overflow:auto;
}

#contenedor img {width:60px; height:60px; margin:0px;}


y parte del html...
<body>
<div id="ancla">
<div id="marco"> </div>
<div id="contenedor">
<table class="bordes">
<tr>
<td>
<img src="casarbol.jpg" title="casa del árbol" OnClick="mostrar('casadelarbolg.jpg')"/>
</td>

.
.
.

<td>
<img src="hombreton.jpg" title="hombretón" onClick="mostrar('hombretong.jpg')" />
</td>
</tr>
</table>
</div>
</div>
</body>


Espero haberme esplicado bien. He visto que en el foro hay algo parecido a esto, pero creo que no es lo mismo, y no lo ha respondido nadie desde hace un rato...

Muchas gracias por la ayuda.

Última edición por elignorante; 04/02/2010 a las 14:44
  #2 (permalink)  
Antiguo 05/02/2010, 00:40
 
Fecha de Ingreso: febrero-2010
Mensajes: 26
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: ayuda con ancho de capas ¿variable?

Al final he conseguido hacer algo. Lo he cambiado casi todo y ha quedado así. Lo pongo por si a alguien le sirve, y por si he cometido algún fallo burro o de estilo y alguien me quiere corregir....
Resumo lo que he hecho.A lo que sería la capa que contenía la tabla de las miniaturas le he dado un margin-left amplio para que me quede hacia la derecha, en vez de tablas he utilizado capas de miniaturas con display inline (así se me reordenan ellas solas, no tenía ni idea). Y he 'depurado' positions para que no haya absolutes a los que trate como algo externo al flujo del documento...


Fallo: utilizo max-with y max-heigth (para que la tabla contenedora no se me dispare por toda la pantalla) y me parece que de los explorers sólo el nuevo lo reconoce...

css:
body {background-color:#000000}


#ancla{
border:#CCCCCC solid 5px;
position:absolute;
top:7%;
height:80%;
width:98%;
overflow:auto;
}

#marco {
border-color:#CCCCCC; border-style:groove; border-width:5px;
position:static;
margin:25px 40px 50px 60px;
float:left;
}

#contenedora{
margin-left:auto; margin-top:auto;
position:relative;
max-width:408px;
max-height:300px;
overflow:auto;}

#contenedora img {
width:60px;
height:60px;
margin:1px;
border-style:double;}

#contenedora div {
display:inline;
position:relative;
background-color:#AD9805;
border-top:55px solid #AD9805;}


Html:
<body>
<div id="ancla">
<div id="marco"> </div>
<div id="contenedora">
<div>
<img src="casarbol.jpg" title="casa del árbol" OnClick="mostrar('casadelarbolg.jpg')"/>
</div>
.
.
.
<div>
<img src="bañera.jpg" title="en la bañera" onClick="mostrar('bañerag.jpg')" />
</div>
</div>
</div>
</body>
</html>

Supongo que habrá fallos, alguna cosa que sobre, o algún fallo de estilo o semántica... si lo hay por favor decidmelo y disculpadmelo... soy casi nuevo y aprendo sólo (sólo no, con los foros que ya es mucho).

Etiquetas: ancho, capas, variables
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 05:02.