Ayuda con el estilo en un div

ridgeback · #1 (**permalink**) 10/01/2009, 14:06

Hola, queria poner en mi pagina web una cosa de javascript que vi por internet, pero cuando intento modificar el estilo que tiene no puedo porque no entiendo muy bien como lo hizo esa persona. El estilo es este:

Código:

/*********************** SCROLLERS ***********************/
.root 		{
		position: relative;
		height:			200px;
		width:			810px;
		margin: 			0px 0px 8px 7px;
		color: 	#FFC700;	
		}
.root p 	{
		margin:			10px 10px 5px 10px;
		text-align: justify;
		}
.thumb 		{
		position:			absolute;
		height:			9px;
		width:			15px;
		left: 			10px;
		}
.up, .dn 	{
		position:			absolute;
		left: 			10px;
		}
.up a, .up a img, .dn a, .dn a img, .thumb a , .thumb a img{
		border:			0;			 
		}
.scrollContainer { 
		position:			absolute; 
		left:			2px; 
		top:			19px; 
		width:			350px; 
		height:			200px; 
		clip:			rect(0 467 200 0); 
		overflow:			auto; 
		border-top:		2px solid #FFC700;
		border-left:		2px solid #FFC700;
		border-right:		2px solid #FFC700;
		border-bottom:		2px solid #FFC700;
		background:		#000000;
		}
.scrollContent { 
		position:			absolute; 
		left:			0px; 
		top:			0px; 
		width:			100px;
		}
/*********************** FIN DE SCROLLERS ***********************/

Lo que me ocurre es que cuando justifico el texto que tengo dentro me lo pega a la derecha y queda bastante feo. Dejo una imagen para que se me entienda:

Si alguien pudiera echarme una manita estaría eternamente agradecido

Aresillo · #2 (**permalink**) 10/01/2009, 14:25

Sin tener ni idea de a qué afectan esas clases, probaría con poner una margen...
o aquí cambiando el 0 por 7px:

Código HTML:

.root 		{
		position: relative;
		height:			200px;
		width:			810px;
		margin: 			0px [B]0px[/B] 8px 7px;
		color: 	#FFC700;	
		}

o aquí:

Código HTML:

.scrollContent { 
		position:			absolute; 
		left:			0px; 
		top:			0px; 
		width:			100px;
		}

Le añadiría esto:
margin-right: 10px;

Cambiando los 10 px por los pixeles que te interesen...

Un saludo!!

Aresillo!!
PD: Si nos pones la web de donde sacaste el javascript igual te podemos ayudar mejor, o incluso poniendonos una url donde lo tengas colgado...

ridgeback · #3 (**permalink**) 10/01/2009, 14:34

bueno, mas o menos lo he arreglado gracias a tu ayuda, porque en el .scrollContent he puesto

Código:

margin:			10px 10px 5px 10px;

y lo he cambiado con un valor negativo en el margen izquierdo, con lo que tengo menos espacio a la izquierda pero no se me pegan las letras a la derecha, asi que muchas gracias.

Cita:

Sin tener ni idea de a qué afectan esas clases, probaría con poner una margen...

Eso es lo que me pasaba a mi, que como no entiendía muy bien ese estilo y esas funciones que me baje no sabía que tenía que cambiar...

Dejo la página de donde lo bajé por si alguien quiere tenerlo, ya que me pareció útil y bonito.

http://meddle.dzygn.com/esp/weblog/modificacion.scroller/

Lo dicho, muchas gracias Aresillo

kseso? · #4 (**permalink**) 10/01/2009, 15:12

Hola Ridgeback:
La propiedad que controla el espacio que queda entre el contenido alojado dentro de un div ( u otro elemento contenedor) y su borde es padding.

margin es el espacio de separación entre ese elemento y los que se encuentran adyacentes a él.

Así que si quieres mantener un espacio de separación entre un texto y el límite del div que lo contiene, tienes que darles los valores oportunos:

Cita:

scrollContent {padding: 7px; /*o los valores que necesites, en las unidades que creas más convenientes*/}

Una diferencia sustancial es que la propiedad padding afecta al contenido del elemento, mientras que margin lo hace sobre los elementos que están fuera de él ( y que son adyacentes, claro).

Un saludo

Aresillo · #5 (**permalink**) 10/01/2009, 17:22

Sip.. sorry...
Haz caso a lo que dice Kseso...

Aresillo!!

ridgeback · #6 (**permalink**) 10/01/2009, 18:13

Gracias por tu explicación kseso?, miraré a ver si lo hago de esa manera, que es más ética

¡Gracias a los dos!

ridgeback · #7 (**permalink**) 11/01/2009, 08:21

Ahora tengo otro problemilla con ese mismo recuadro. El texto y las imagenes se perdían debajo del recuadro y cuando dabas a bajar iban apareciendo, pero quiero poner videos de youtube y me pasa esto:

¿sabéis por qué es?¿puede ser por el código del video de youtube? Es que lo copié y pegué. Es este el código:

Código:

<object width="320" height="265">
<param name="movie" value="http://www.youtube.com/v/RssRfGg5mAA&hl=es&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/RssRfGg5mAA&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>
</object>

kseso? · #8 (**permalink**) 11/01/2009, 09:02

Hola de nuevo, Ridgeback.
Creo recordar que en cierta ocasión ¿Mikmoro? comentó que el problema no se corregía via css.
La solución pasaba por añadir un valor a cierta propiedad a
"type="application/x-shockwave-flash".
Pero, lamentablemente, no la recuerdo.
Busca en esa dirección.

ridgeback · #9 (**permalink**) 11/01/2009, 12:06

Acabo de mirar por curiosidad como iba en ie y ahi va normal, es decir, el contenido que no cabe en el cuadrado no se ve hasta que bajas con la flecha. ¿Eso os da alguna idea?

Mikmoro · #10 (**permalink**) 11/01/2009, 16:16

mmm... lo cierto es que me suena algo así, pero no recuerdo exactamnete.

Si pudieras subirlo a un servidor o poner el código HTML y CSS al completo quizá se podría intentar averiguar algo.

ridgeback · #11 (**permalink**) 11/01/2009, 16:54

Este es el html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css">
<title>Candeal - Música Tradicional</title>
<link href="logos/favicon.ico" rel="shortcut icon">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div align="center">
<center><img src="logos/candealtitulo2.jpg"></center>
<script type="text/javascript" src="dom-drag.js"></script>
<script type="text/javascript" src="ypSimpleScrollC.js"></script>
<script type="text/javascript" src="scroller.js"></script>
<script type="text/javascript">
	instantiateScroller(0, "scroll0", 7, 0, 800, 300, 150);
	instantiateScroller(1, "scroll1", 7, 0, 375, 200, 150);
</script>
<div class="root" id="root0">
	<div class="scrollContainer" id="scroll0Container">
		<div class="scrollContent" id="scroll0Content">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/7RVOKTm71ww&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/7RVOKTm71ww&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/Z9ZfOu69ufU&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Z9ZfOu69ufU&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<br><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/AOu7ppwnZEA&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/AOu7ppwnZEA&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/TlbQjPnQmck&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/TlbQjPnQmck&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<br><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/g4peA9OQOsk&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/g4peA9OQOsk&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/4ByMUg0Oi0s&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4ByMUg0Oi0s&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<br><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/sm2MakAbPsQ&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sm2MakAbPsQ&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/RssRfGg5mAA&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RssRfGg5mAA&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
		</div>
	</div>
</div>
<br><br><br><br><br><br><br><br><br>
<table border="0">
<tr>
<td width="116"><a href="index.html"><center><img class="botones" src="botones/principal3.jpg"></a></center>
<td width="126"><a href="biografia.html"><center><img class="botones" src="botones/biografia3.jpg"></a></center>
<td width="131"><a href="discografia.html"><center><img class="botones" src="botones/discografia2.jpg"></a></center>
<td width="107"><a href="galeria.html"><center><img class="botones" src="botones/galeria3.jpg"></a></center>
<td width="107"><a href="prensa.html"><center><img class="botones" src="botones/prensa3.jpg"></a></center>
<td width="107"><a href="visitas.php"><center><img class="botones" src="botones/visitas3.jpg"></a></center>
<td width="116"><a href="contacto.html"><center><img class="botones" src="botones/contacto3.jpg"></a></center>
</table>
</div>
</body>
</html>

Y lo relacionado a eso del css es:

Código:

/*********************** SCROLLERS ***********************/
.root 		{
		position: relative;
		height:			200px;
		width:			810px;
		margin: 			0px 0px 8px 7px;
		color: 	#FFC700;	
		}
.root p 	{
		margin:			10px 10px 5px 10px;
		text-align: justify;
		}
.thumb 		{
		position:			absolute;
		height:			9px;
		width:			15px;
		left: 			10px;
		}
.up, .dn 	{
		position:			absolute;
		left: 			10px;
		}
.up a, .up a img, .dn a, .dn a img, .thumb a , .thumb a img{
		border:			0;			 
		}
.scrollContainer { 
		position:			absolute; 
		left:			2px; 
		top:			19px; 
		width:			350px; 
		height:			200px; 
		clip:			rect(0 467 200 0); 
		overflow:			auto; 
		border-top:		2px solid #FFC700;
		border-left:		2px solid #FFC700;
		border-right:		2px solid #FFC700;
		border-bottom:		2px solid #FFC700;
		background:		#000000;
		}
.scrollContent { 
		position:			absolute; 
		left:			0px; 
		top:			0px; 
		width:			100px;
		margin:      0px 0px 5px -5px;
		}
/*********************** FIN DE SCROLLERS ***********************/

Para hacer eso tengo tres archivos javascript pero supongo que más que eso lo que influye está en el html, si queréis que ponga el código de los archivos javascript me lo decís.

Muchas gracias.

Mikmoro · #12 (**permalink**) 11/01/2009, 17:14

Antes de mirar a fondo, corrige un par de cosas:

1.- el doctype que usas es muy específico, y diría que muy poco adecuado para tu caso. Usa este:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

2.- No declaras un juego de caracteres. Te recomiendo:

Cita:

3.-No sé por qué cierras el head y no abres el body:

Cita:

</head>
<div align="center">

debe ser:

Cita:

</head>
<body>
<div align="center">

Mira estas cosas y si todo sigue igual miramos a ver.

Y aunque de momento no hace falta, es bastante probable que el problema lo produzca un javascript.

ridgeback · #13 (**permalink**) 12/01/2009, 05:43

La verdad es que controlo lo justo digamos y cosas como el doctype no las controlo mucho, por eso puse ese, pero ya lo he cambiado por el tuyo

Lo del body ya fue simplemente despiste.

He puesto todo eso que me has dicho y no lo arregla. Yo pensé que a lo mejor era problema de los videos más que de otra cosa, porque en otra parte de la web tengo ese mismo recuadro, en un sitio con texto y en otro con fotos, y ahí no da ningún problema, eso es lo que más me extrañó; bueno, eso y que en internet explorer no dé ningún problema (ya sé que algunos códigos los leen diferentes).

Si quieres que ponga los archivos de javascript dímelo por favor, son tres archivos.

Mikmoro · #14 (**permalink**) 12/01/2009, 07:28

No, de momento sólo edita el mensaje donde pones el código y corrígelo. Luego echo un vistazo a ver si se ve algo raro.

ridgeback · #15 (**permalink**) 13/01/2009, 03:31

Ok, ya lo he cambiado, si necesitais que suba los javascript los subo cuando me digais.

Mikmoro · #16 (**permalink**) 13/01/2009, 06:04

¿Estás seguro de que con esos cambios no se ha arreglado? ¿has refrescado la caché de tu navegador? es que yo pongo tu código en un html y sale como tú quieres en Firefox, es decir, todos los videos dentro de una caja con scroll vertical.

ridgeback · #17 (**permalink**) 13/01/2009, 06:58

Puf, pues no se que puede ser... porque este es el código que tengo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css">
<title>Candeal - Música Tradicional</title>
<link href="logos/favicon.ico" rel="shortcut icon">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div align="center">
<center><img src="logos/candealtitulo2.jpg"></center>
<script type="text/javascript" src="dom-drag.js"></script>
<script type="text/javascript" src="ypSimpleScrollC.js"></script>
<script type="text/javascript" src="scroller.js"></script>
<script type="text/javascript">
	instantiateScroller(0, "scroll0", 7, 0, 800, 300, 150);
	instantiateScroller(1, "scroll1", 7, 0, 375, 200, 150);
</script>
<div class="root" id="root0">
	<div class="scrollContainer" id="scroll0Container">
		<div class="scrollContent" id="scroll0Content">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/7RVOKTm71ww&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/7RVOKTm71ww&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/Z9ZfOu69ufU&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Z9ZfOu69ufU&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<br><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/AOu7ppwnZEA&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/AOu7ppwnZEA&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/TlbQjPnQmck&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/TlbQjPnQmck&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<br><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/g4peA9OQOsk&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/g4peA9OQOsk&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/4ByMUg0Oi0s&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4ByMUg0Oi0s&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<br><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/sm2MakAbPsQ&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sm2MakAbPsQ&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/RssRfGg5mAA&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RssRfGg5mAA&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
		</div>
	</div>
</div>
<br><br><br><br><br><br><br><br><br>
<table border="0">
<tr>
<td width="116"><a href="index.html"><center><img class="botones" src="botones/principal3.jpg"></a></center>
<td width="126"><a href="biografia.html"><center><img class="botones" src="botones/biografia3.jpg"></a></center>
<td width="131"><a href="discografia.html"><center><img class="botones" src="botones/discografia2.jpg"></a></center>
<td width="107"><a href="galeria.html"><center><img class="botones" src="botones/galeria3.jpg"></a></center>
<td width="107"><a href="prensa.html"><center><img class="botones" src="botones/prensa3.jpg"></a></center>
<td width="107"><a href="visitas.php"><center><img class="botones" src="botones/visitas3.jpg"></a></center>
<td width="116"><a href="contacto.html"><center><img class="botones" src="botones/contacto3.jpg"></a></center>
</table>
</div>
</body>
</html>

El css completo es:

Código:

body{
background-color: black;
color: #FFC700;
font-family: verdana;
font-size: 8pt;
}

H1{
font-size: 24pt;
font-family: verdana;
text-align: center;
color: FFC700;
}

p.biografia{
color: #FFC700;
text-align: left;
text-indent: 2%;
font-family: verdana;
font-size: 10pt;
}

a.botones{
text-decoration: none;
color: black;
}

table.comentarios{
font-size: 9pt;
}

img.botones{
border: 0;
}

img.principal{
border-color= transparent;
}

#imagenfondo{
position: absolute; top: 65%; left: 15%;
z-index: -1;
}

HR{
color: #FFC700;
width: 75%;
size: 15px;
}

/*********************** SCROLLERS ***********************/
.root 		{
		position: relative;
		height:			200px;
		width:			810px;
		margin: 			0px 0px 8px 7px;
		color: 	#FFC700;	
		}
.root p 	{
		margin:			10px 10px 5px 10px;
		text-align: justify;
		}
.thumb 		{
		position:			absolute;
		height:			9px;
		width:			15px;
		left: 			10px;
		}
.up, .dn 	{
		position:			absolute;
		left: 			10px;
		}
.up a, .up a img, .dn a, .dn a img, .thumb a , .thumb a img{
		border:			0;			 
		}
.scrollContainer { 
		position:			absolute; 
		left:			2px; 
		top:			19px; 
		width:			350px; 
		height:			200px; 
		clip:			rect(0 467 200 0); 
		overflow:			auto; 
		border-top:		2px solid #FFC700;
		border-left:		2px solid #FFC700;
		border-right:		2px solid #FFC700;
		border-bottom:		2px solid #FFC700;
		background:		#000000;
		}
.scrollContent { 
		position:			absolute; 
		left:			0px; 
		top:			0px; 
		width:			100px;
		margin:      0px 0px 5px -5px;
		}
/*********************** FIN DE SCROLLERS ***********************/

Y lo de refrescar la caché es dar a F5 ¿no? si es eso, sí que la he refrescado... 40 veces...

A mi tambien se me ve bien si pongo solo el estilo de los scrollers...
Se me ve así:

Y yo quiero que se vea así, pero sin que se salgan del borde los videos:
[IMG]

[/IMG]

El caso es que acabo de ponerlo en una carpeta aparte sin imágenes ni nada, sólo el estilo y el html y se me ve bien pero "feo", como en la imagen de arriba pero con el fondo negro y alguna otra cosa que lleva el estilo pero con la flecha por defecto. Asi que no se que pensar...