No puedo ordenar elementos dentro de una clase

B4l4 · #1 (**permalink**) 16/04/2009, 14:02

Hola buenas, soy un poco novatillo en esto del css.

Mirar os espongo mi problema: Tengo una clase llamada centro:

Código HTML:

#centro {
	position:absolute;
    width:902px;
    height:1434px;
    left:391px;
    top:320px;
    overflow:visible;
    border:1px solid ;
    /*background-color:#4682B4;*/
	text-align:center;
	padding-top:5px;

}

La cual da estilos al bloque central de mi web, pero ahora quiero darle estilos a parte a como se colocan unos videos que pongo en dicho bloque por lo que he creado esta clase o mejor dicho subclase:

#centro .video{
/*padding-left:20px;
padding-right:30px;
margin: 0 auto;
border-left:10px;*/
padding: 10px 15px 0px 15px;

}

No se si es la definicion correcta, en los 2 archivos php, el que carga el bloque y el que introduce los videos cargo el archivo css, en el bloque central aplico los estilos asi:

Código PHP:

  echo '<div id="centro" class="centro">';

include "listar_archivos.php";

echo "</div>";

y dentro de listar archivos asi:

Código PHP:

  echo'<div id = "centro" class="video">';

    echo'<object width="425" height="349">

        <param name="movie" value="'.$video.'>

        </param><param name="allowFullScreen" value="true"></param>

        <embed src="'.$video.'" type="application/x-shockwave-flash" allowfullscreen="true" width="380" height="295>

        </embed>

        </object>';

    echo'</div>';

No se si es la forma correcta de hacerlo ya que se me descuadran los videos y no se como arreglarlo, simplemente quiero separarlos un poco entre si con el padding ya que se me crean todos juntos.

Gracias por vuestra ayuda!!!!

B4l4 · #2 (**permalink**) 16/04/2009, 16:00

Alguien me echa una mano por favor?

willyfc · #3 (**permalink**) 16/04/2009, 16:29

En serio quieres mostrarlos así?, no se si te has equivocado, a ver y si lo pones así:

Código:

#centro {
    width:902px;
	min-height:200px;
    height:auto!important;
	height:200px;
    overflow:auto;
    border:1px solid ;
    background-color:#4682B4;
	text-align:center;
	padding-top:5px;
	margin:0 auto;

}

por que no empezamos por aquí ya que no me convence que quieras verlo como se ve ahora.

B4l4 · #4 (**permalink**) 16/04/2009, 16:35

Vale pero el problema es ke me aparecen los videos el uno pegao al otro y quiero dejar un espacio de unos 2-3 cm entre ellos, una separacion de cada video al video de al lado y al de abajo, como se haria eso?

willyfc · #5 (**permalink**) 16/04/2009, 16:44

ahhh, disculpa es que no había entendido bien, bueno lo que pasa es que estas volviendo a poner el id="centro", mira:

Código PHP:

  echo'<div class="video">'; 

    echo'<object width="425" height="349"> 

        <param name="movie" value="'.$video.'> 

        </param><param name="allowFullScreen" value="true"></param> 

        <embed src="'.$video.'" type="application/x-shockwave-flash" allowfullscreen="true" width="380" height="295> 

        </embed> 

        </object>'; 

    echo'</div>';

mira a ver si se arregla. y no se cual es la class centro que también declaras

B4l4 · #6 (**permalink**) 16/04/2009, 16:48

Muchas gracias por ayudarme de verdad.

Esta es la class centro:

Código PHP:

  #centro {
    width:902px;
    min-height:200px;
    height:auto!important;
    height:200px;
    overflow:auto;
    border:1px solid ;
    background-color:#4682B4;
    text-align:center;
    padding-top:5px;
    margin:0 auto;

}

Esa es la que controla el bloque, despues e pensado que para separar los video deberia crear otra clase o id dentro del bloque (clase principal), y creo ke se define asi:

Código PHP:

  #centro .video{

//Aqui deberia de haber codigo para que los videos tengan espacios entre si

}

Arreglue lo de class que me digistes pero sigue igual :/

willyfc · #7 (**permalink**) 16/04/2009, 17:16

para que se una clase tiene que tener punto no almohadilla.

#centro = id.
.centro = class.

esa es una aclaración, y como los quieres acomodar,uno al lado del otro?, o todos en vertical?

B4l4 · #8 (**permalink**) 16/04/2009, 17:19

pues se me crean 1 al lado del otro, filas de 2 videos , en 4 o 5 columnas, lo que pasa es que estan pegados los unos a los otros.

Como seria pues?

willyfc · #9 (**permalink**) 16/04/2009, 17:40

para que lo entiendas iría de esta manera la declaración correcta:

en el archivo que recibe al include sería así:

Código html:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#centro {
    width:902px;
    min-height:200px;
    height:auto!important;
    height:200px;
    overflow:auto;
    border:1px solid ;
    background-color:#4682B4;
    text-align:center;
    padding-top:5px;
    margin:0 auto;
 
}
#centro .video{
padding: 10px 15px 10px 15px;
 
}
</style>
</head>
 
<body>
<div id="centro">   
    <?php include("video.php"); ?>
</div>
</body>
</html>

y la hoja que inlcuyes sería así:

Código html:

Ver original<div class="video">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="782" height="234">
    <param name="movie" value="imagenes/baan.swf">
    <param name="quality" value="high">
    <embed src="imagenes/baan.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="782" height="234"></embed>
  </object>
</div>
<div class="video">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="782" height="234">
    <param name="movie" value="imagenes/baan.swf">
    <param name="quality" value="high">
    <embed src="imagenes/baan.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="782" height="234"></embed>
  </object>
</div>

esto es solo un ejemplo.

y pues creo que no puedes ponerle padding por que si te fijas cuanto mide cada uno de tus flash, verás que no caben, ya que miden 425px de ancho y el ancho del contenedor es solo de 902px entonces no caben, tendría que mostrar de a dos o tal vez de una.

B4l4 · #10 (**permalink**) 16/04/2009, 18:31

Bueno despues de mucho probar ya no se que hacer, la verdad es que se crea un sub-bloque dentro del bloque general y alli se meten todos lo videos, la id que cree da estilo a todo el conjunto de videos pero no a cada uno, ya no se que hacer, los videos quedan perfectamente puesto como bloques uno al lado del otro y ocupan todo el bloque, no hay forma de dejar espacio entre ellos.

willyfc · #11 (**permalink**) 16/04/2009, 18:58

pues creo que más claro no puedo ser, esta muy simple, pero dejame a ver que vea como te lo puedo explicar, con el código que t dí deberías poderlo hacerlo, pero tomando en cuenta medidas, es que es lógico que cuatro o cinco videos que miden mas de 400px d ancho no quepan en una caja que apenas mide 900 y algo pxs. muestra e cada fila 2 y solo muestra dos columnas y aplica el código que te pase y si se siguen bajando quitale padding y ya.