Ayuda: por favor contestenme.prbolema con lista de video

[ar1980]

Hola a todos. Estoy a punto de terminar con mi web, pero me quede atascado con la lista de videos http://www.ciudadmascotera.com.ar/videos.html
Me ayudo muchisimo wolfmoon pero bbueno,estoy tratando de poder centrar la lista y no puedo. La misma esta diseñada para que en una sola fila este: imagen/descripcion/comentario.
El problema es que me sale en una fila imagen y no a la misma altura descripcion y abajo el comentario En ie 6 se ve mal,pero no encimado y en el mozilla se ve mal y encimado.Ayudenme por favor a poder centrar los tres y mantenerlos a un mismo nivel.
Otra cosa cuando escribo en la lista solo se ve hasta la segunda imagen la tercera me aparece como que no se ve nada de esa misma fila.Como hacer para ver lo que escribo,por que si la tercera no se ve no me quiero imaginar como tengo que hacer la imagen numero 10 que va quedando cada vez mas abajo(y no se ve,despues de la segunda,en el dreamweaver cs3)
Si quieren les dejo la direccion de la pagina http://www.ciudadmascotera.com.ar/videos.html y sino pidanme el html y el scc y lo subo.Les agradesco a todos y mil gracias

[ar1980]

este es el HTML de la lista de videos,el cual necesitaria alguna ayuda para arreglar:

<div id="videos" >
<div class="capa_contenido_imagen" >

<div>
<table>
<tr>
<td width="120" height="100" align="center" valign="middle">[img]img/img_videos/video_parque_las_heras_1.jpg[/img]
<map name="m_video_parque_las_heras_1" id="m_video_parque_las_heras_1">
<area shape="poly" coords="0,0,120,0,120,90,0,90,0,0" href="videos.html" target="_self" alt="" />
</map></td>
</tr>
</table>
</div>
</div>
<div class="capa_contenido_descripcion">
<table>
<tr>
<td colspan="2" align="center" valign="middle"><h3 class="Estilo10">Titulo 1</h3></td>
</tr>
<tr>
<td width="62"><u>Lo envio:</u></td>
<td width="126" align="center" valign="middle">Diego Maradona :P</td>
</tr>
<tr>
<td><u>Categoria:</u></td>
<td align="center" valign="middle">Gracioso</td>
</tr>
<tr>
<td><u>Duracion:</u></td>
<td align="center" valign="middle">3:03</td>
</tr>
</table>
<h4 align="center" class="descripcion_lista"></h4>
<div> </div>
</div><div class="capa_contenido_descripcion_comentario">
<div>
<table>
<tr>
<td align="center" valign="top">Este video fue filmado el 30/12 en el parque las Heras,aca estan los dogs jugando como siempre.</td>
</tr>
</table>


</p>
</div>
</div>
<div class="corte"></div>

<div class="capa_contenido_imagen" >

<div>
<table>
<tr>
<td width="120" height="100" align="center" valign="middle">[img]img/img_videos/video_parque_las_heras_2.jpg[/img]
<map name="m_video_parque_las_heras_2" id="m_video_parque_las_heras_2">
<area shape="poly" coords="0,0,120,0,120,90,0,90,0,0" href="videos_2.html" target="_self" alt="" />
</map></td>
</tr>
</table>
</div>
</div>
<div class="capa_contenido_descripcion">
<table>
<tr>
<td colspan="2" align="center" valign="middle"><h3 class="Estilo10">Titulo 2</h3></td>
</tr>
<tr>
<td width="62"><u>Lo envio:</u></td>
<td width="126" align="center" valign="middle">Claudio P. Caniggia</td>
</tr>
<tr>
<td><u>Categoria:</u></td>
<td align="center" valign="middle">Gracioso</td>
</tr>
<tr>
<td><u>Duracion:</u></td>
<td align="center" valign="middle">2:13</td>
</tr>
</table>
<h4 align="center" class="descripcion_lista"></h4>
<div> </div>
</div><div class="capa_contenido_descripcion_comentario">
<div>
<table>
<tr>
<td align="center" valign="top">EN ESTE VIDEO CONOCERA A LOS INTEGRANTES DE LA PANDILLA... </td>
</tr>
</table>

</div>
</div>
<div class="corte"></div>
<div class="capa_contenido_imagen" >

<div>
<table>
<tr>
<td width="120" height="100" align="center" valign="middle">[img]img/img_videos/video_parque_las_heras_3.jpg[/img]
<map name="m_video_parque_las_heras_3" id="m_video_parque_las_heras_3">
<area shape="poly" coords="0,0,120,0,120,90,0,90,0,0" href="videos#3.html" target="_self" alt="" />
<area shape="rect" coords="1,11,131,96" href="videos_3.html" />
</map>

</td>
</tr>
</table>
</div>
</div>
<div class="capa_contenido_descripcion">
<table>
<tr>
<td colspan="2" align="center" valign="middle"><h3 class="Estilo10">Titulo 3</h3></td>
</tr>
<tr>
<td width="62"><u>Lo envio:</u></td>
<td width="126" align="center" valign="middle">Roberto Carnaggi</td>
</tr>
<tr>
<td><u>Categoria:</u></td>
<td align="center" valign="middle">Gracioso</td>
</tr>
<tr>
<td><u>Duracion:</u></td>
<td align="center" valign="middle">1:33</td>
</tr>
</table>
<h4 align="center" class="descripcion_lista"></h4>
<div> </div>
</div><div class="capa_contenido_descripcion_comentario">
<div>
<table>
<tr>
<td align="center" valign="top">Aqui estan en constante ejercicio para el enfrentamiento que se produce con las tribus llamada "HUMANOS SALVAJES" que a veces quieren desalojarnos de las tierras porque nos acusan de no ser com...
</td>
</tr>
</table>


</p>
</div>
</div>
<div class="corte"></div>
</div>

y esta es la parte del scc


.corte { clear: both;}

#videos {
border:1px solid #000;
width: 594px;
height:220px;
overflow:auto;
float: left;
position: relative;
top: 10px;
left: 2px;
right: auto;
}

#videos .capa_contenido_imagen {
float: left;
width: 130px;
height:105px;
border-bottom:1px solid #000;
position: relative;
}
#videos .capa_contenido_descripcion {
float: left;
width: 200px;
height:105px;
border-bottom:1px solid #000;
position: relative;
}
#videos .capa_contenido_descripcion_comentario {
float: left;
width: 260px;
height:105px;
border-bottom:1px solid #000;
position: relative;
}
#videos .capa_contenido div {
text-align:left;
padding:5px 5px 5px 5px;
text-decoration: none;
color:#000000;
font-weight:bold;
}

#videos .capa_contenido div h1 {
font-size:10px;
color:#000099;
text-align:center;
margin:0;
padding:0px;
}
#videos .capa_contenido_descripcion .descripcion_lista {
margin: 0px;
}

Saludos y gracias a todos los colaboradores

[nosabernada]

Hola,

la verdad esque yo lo veo bien, no se lo que quieres hacer.

Si me permites una recomendacion, te recomiendo hacer una lista con php en un documento externo para que no haga falta modificar todas las paginas de videos.

El terecer video, no se a que te refieres, quizas le hayas dado una longitud maxima o algo parecido. A mi tambien me aparecen dos videos.

Adios

[ar1980]

Hola,

la verdad esque yo lo veo bien, no se lo que quieres hacer.

Si me permites una recomendacion, te recomiendo hacer una lista con php en un documento externo para que no haga falta modificar todas las paginas de videos.

El terecer video, no se a que te refieres, quizas le hayas dado una longitud maxima o algo parecido. A mi tambien me aparecen dos videos.

Adios

Hola nosabernada si entras a la pagina lo vas a ver,bien"mal" je... http://www.ciudadmascotera.com.ar/videos.html
se ve que la imagen/descripcion/comentario no estan los tres alineados a la misma altura.Vas a ver que esta: imagen un poco mas abajodescripcion y abajo esta el comentario.Contame un poco como es eso de php. que deberia hacer?aunque ahora lo mas importante para mi es alinear Img/descripcion/comentario.saludos

[nosabernada]

Hola,

pues mira, resulta que no te caben las tras tablas, y entonces lo que hace es bajar la ultima, por cierto tampoco queda mal asi, se solucionaria aciendo mas pequeñas las otras, o aciendo mas grande el campo.

lo del php te lo explico rapido:

<?php
  include 'videos.php';
?>

lo que hace es incluir el archivo, video.php. Dentr o del archivo video.php debes poner todo lo que quieras incluir, haciendo que todos los archivos tengan la misma relacion. Si el archivo de videos.html lo tienes dentro de la carpeta, te recomiendo poner el de videos.php fuera haaciendo que entonces solo tengas que hacer un solo archivo, no se si me explico, entonces seria:

<?php
  include '../videos.php';
?>

si no me entiendes dimelo.

Adios

[ar1980]

Hola,

pues mira, resulta que no te caben las tras tablas, y entonces lo que hace es bajar la ultima, por cierto tampoco queda mal asi, se solucionaria aciendo mas pequeñas las otras, o aciendo mas grande el campo.

lo del php te lo explico rapido:

<?php
  include 'videos.php';
?>

lo que hace es incluir el archivo, video.php. Dentr o del archivo video.php debes poner todo lo que quieras incluir, haciendo que todos los archivos tengan la misma relacion. Si el archivo de videos.html lo tienes dentro de la carpeta, te recomiendo poner el de videos.php fuera haaciendo que entonces solo tengas que hacer un solo archivo, no se si me explico, entonces seria:

<?php
  include '../videos.php';
?>

si no me entiendes dimelo.

Adios

no creo que sea porque no entren ya que el total del div video es de 594 px y los subdivs son de 130 px width,el otro es de 200 px width, y el tercero 260 px width total =590 px
y me podrias explicar un poco mas lo del php? para que tener el html si copio todo lo del html y le cambio la extension por php? es asi o me equivoco?saludos y mil gracias

[wolfmoon]

No entiendo porque utilizas las tablas?

[ar1980]

No entiendo porque utilizas las tablas?

Hola wolf es que mucho todavia no conosco.como hago para hacer las divisiones

Lo envio: Alejandra y Ariel
Categoria: Paseo
Duracion: 3:24

lo hago sin tablas eso?
Por otro lado.Como se hace para que un divs no baje la altura que le digo,porque cuando escribo sigue bajando y me deforma todo.Hay alguna manera de que cuando escriba no se baje?gracias nuevamente

[ar1980]

No entiendo porque utilizas las tablas?

Hola wolf es que mucho todavia no conosco.como hago para hacer las divisiones

Lo envio: Alejandra y Ariel
Categoria: Paseo
Duracion: 3:24

lo hago sin tablas eso?
Por otro lado.Como se hace para que un divs no baje la altura que le digo,porque cuando escribo sigue bajando y me deforma todo.Hay alguna manera de que cuando escriba no se baje?gracias nuevamente

Dentro de un div se pone un class?
si quiero poner un titulo y abajo la descripcion(dentro de un divs menu) como se pondria? yo pondria dentro de un div menu, un div titulo y a abajo otro div descripcion o pondria dentro de un div menu, una tabla con dos filas y una columna.
Estan mal estas formas???

[pitufo]

Hola.

Con una tabla no creo que tengas problemas.

En una celda la imagen, en otra la descripción y en otra el comentario.




Bye.

[ar1980]

Hola.

Con una tabla no creo que tengas problemas.

En una celda la imagen, en otra la descripción y en otra el comentario.




Bye.

vos decis? Entonces como seria? lo que quiero hacer es una lista de videos.
Empiezo por un div id de videos y a este le pongo scroll,luego div id posicion de video y adentro pongo una tabla con 3 columnas y una fila,luego en la primer columna y fila pongo la imagen, la segunda columna la divido en un fila para titulo y tres filas mas y dos columnas para....
TiTuLO
Lo envio: Alejandra y Ariel
Categoria: Paseo
Duracion: 3:24
Y la tercer fila y columna la dejo tal como esta para poner el comentario.

Asi estaria bien ?gracias

Diganme si se entendio saludos

[pitufo]

Hola.

Ya me enrede todo. Hablas de divs, tablas, escroll.

Puedes poner un ejemplo o dibujar algo de como lo quieres. Así podremos guiarte mejor






Bye.

[ar1980]

Hola.

Ya me enrede todo. Hablas de divs, tablas, escroll.

Puedes poner un ejemplo o dibujar algo de como lo quieres. Así podremos guiarte mejor






Bye.

jajaja.me imagino
Lo que quiero es hacer una lista como la de youtube pero que a la misma altura ete el comentario.
youtube al comentario lo tiene arriba de la lista.

bueno yo quiero:

\\\\\\\\\\\titulo centrado primer video //////////////
imagen \ Lo envio: Alejandra y Ariel /comentario
imagen \ Categoria: Paseo////////////
imagen \ Duracion: 3:24//////////////

\\\\\\\\\\\titulo centrado segundo video //////////////
imagen \ Lo envio: Alejandra y Ariel///comentario
imagen \ Categoria: Paseo/////////////
imagen \ Duracion: 3:24///////////////

\\\\\\\\\\\titulo centrado tercero video///////////////
imagen \ Lo envio: Alejandra y Ariel///comentario
imagen \ Categoria: Paseo/////////////
imagen \ Duracion: 3:24///////////////

\\\\\\\\\\\titulo centrado cuarto video //////////////
imagen \ Lo envio: Alejandra y Ariel///comentario
imagen \ Categoria: Paseo/////////////
imagen \ Duracion: 3:24///////////////

\\\\\\\\\\\titulo centrado etc video //////////////
imagen \ Lo envio: Alejandra y Ariel///comentario
imagen \ Categoria: Paseo/////////////
imagen \ Duracion: 3:24///////////////

Asi que fuece la lista. Y que como son varios videos que se pueda ir bajando la lista.Para que entre en los 594 px widcht , 220 px height

Se entendio ahora :? .Cualquier cosa avisen y veo como explicarme mejor.saludos y gracias a todos

como se ve en la pagina,a mi me queda asi:

\\\\\\\\\\\titulo centrado primer video //////////////
imagen \ Lo envio: Alejandra y Ariel /
imagen \ Categoria: Paseo////////////
imagen \ Duracion: 3:24//////////////
Comentario /





\\\\\\\\\\\titulo centrado primer video //////////////
imagen \ Lo envio: Alejandra y Ariel /
imagen \ Categoria: Paseo////////////
imagen \ Duracion: 3:24//////////////
Comentario /








\\\\\\\\\\\titulo centrado primer video //////////////
imagen \ Lo envio: Alejandra y Ariel /
imagen \ Categoria: Paseo////////////
imagen \ Duracion: 3:24//////////////
Comentario




//////////////

\\\\\\\\\\\titulo centrado primer video //////////////
imagen \ Lo envio: Alejandra y Ariel /
imagen \ Categoria: Paseo////////////
imagen \ Duracion: 3:24//////////////
Comentario





//////////////

\\\\\\\\\\\titulo centrado primer video //////////////
imagen \ Lo envio: Alejandra y Ariel /
imagen \ Categoria: Paseo////////////
imagen \ Duracion: 3:24//////////////
Comentario




//////////////

[ar1980]

mira si queres pegalo en tu dream o el que uses y capas que lo ves mejor.a mi me queda el comentario abajo y no queda bien alineada la imagen con la descripcion del video.
Estos codigos fueron de gran ayuda empleados por wolfmoon y retocados por mi,por eso estara mal :P je... el me lo paso pero igual al youtube,yo le quiero agregar al costado el comentario,en la misma lista:

HTML

<div id="videos" >
<div class="capa_contenido_imagen" >

<div>
<table>
<tr>
<td width="120" height="100" align="center" valign="middle">[img]img/img_videos/video_parque_las_heras_1.jpg[/img]</td>
</tr>
</table>
</div>
</div>
<div class="capa_contenido_descripcion">
<table>
<tr>
<td colspan="2" align="center" valign="middle"><h3 class="Estilo10">La hora del juego</h3></td>
</tr>
<tr>
<td width="62"><u>Lo envio:</u></td>
<td width="126" align="center" valign="middle">Alejandra y Ariel</td>
</tr>
<tr>
<td><u>Categoria:</u></td>
<td align="center" valign="middle">Paseo</td>
</tr>
<tr>
<td><u>Duracion:</u></td>
<td align="center" valign="middle">3:24</td>
</tr>
</table>
<h4 align="center" class="descripcion_lista"></h4>
<div> </div>
</div><div class="capa_contenido_descripcion_comentario">
<div>
<table>
<tr>
<td align="center" valign="top">Esta es la hora de jugar,con el pupo volador...[img]img/caritas/tongue.gif[/img],Bruma,linda y Rodolfo (orejas de milanesa[img]img/caritas/xd.gif[/img] ).Unos fenomenos.</td>
</tr>
</table>


</p>
</div>
</div>
<div class="corte"></div>

<div class="capa_contenido_imagen" >

<div>
<table>
<tr>
<td width="120" height="100" align="center" valign="middle">[img]img/img_videos/video_parque_las_heras_2.jpg[/img]</td>
</tr>
</table>
</div>
</div>
<div class="capa_contenido_descripcion">
<table>
<tr>
<td colspan="2" align="center" valign="middle"><h3 class="Estilo10">Parque Las Heras</h3></td>
</tr>
<tr>
<td width="62"><u>Lo envio:</u></td>
<td width="126" align="center" valign="middle">Alejandra y Ariel</td>
</tr>
<tr>
<td><u>Categoria:</u></td>
<td align="center" valign="middle">Paseo</td>
</tr>
<tr>
<td><u>Duracion:</u></td>
<td align="center" valign="middle">7:52</td>
</tr>
</table>
<h4 align="center" class="descripcion_lista"></h4>
<div> </div>
</div><div class="capa_contenido_descripcion_comentario">
<div>
<table>
<tr>
<td align="center" valign="top">en este video conocerá a los integrantes de la pandilla.&quot; [img]img/caritas/tongue.gif[/img]...</td>
</tr>
</table>


</p>
</div>
</div>
<div class="corte"></div>
<div class="capa_contenido_imagen" >

<div>
<table>
<tr>
<td width="120" height="100" align="center" valign="middle">[img]img/img_videos/video_parque_las_heras_3.jpg[/img]</tr>
</table>
</div>
</div>
<div class="capa_contenido_descripcion">
<table>
<tr>
<td colspan="2" align="center" valign="middle"><h3 class="Estilo10">Corriendo.</h3></td>
</tr>
<tr>
<td width="62"><u>Lo envio:</u></td>
<td width="126" align="center" valign="middle">Alejandra y Ariel</td>
</tr>
<tr>
<td><u>Categoria:</u></td>
<td align="center" valign="middle">Paseo</td>
</tr>
<tr>
<td><u>Duracion:</u></td>
<td align="center" valign="middle">7:08</td>
</tr>
</table>
<h4 align="center" class="descripcion_lista"></h4>
<div> </div>
</div><div class="capa_contenido_descripcion_comentario">
<div>
<table>
<tr>
<td align="center" valign="top">Aqui estan en constante ejercicio para el enfrentamiento que se produce con las tribus llamadas HUMANOS SALVAJES, que a veces quieren desalojarnos de las tierras porque los acusan de no ser com... </td>
</tr>
</table>


</p>
</div>
</div>
<div class="corte"></div>
</div>

CSS


.corte { clear: both;}

#videos {
border:1px solid #000;
width: 594px;
height:220px;
overflow:auto;
float: left;
position: relative;
top: 10px;
left: 2px;
right: auto;
}

#videos .capa_contenido_imagen {
float: left;
width: 130px;
height:105px;
border-bottom:1px solid #000;
position: relative;
}
#videos .capa_contenido_descripcion {
float: left;
width: 200px;
height:105px;
border-bottom:1px solid #000;
position: relative;
}
#videos .capa_contenido_descripcion_comentario {
width: 260px;
height:150;
border-bottom:1px solid #000;
position: relative;
}
#videos .capa_contenido div {
text-align:left;
padding:5px 5px 5px 5px;
text-decoration: none;
color:#000000;
font-weight:bold;
}

#videos .capa_contenido div h1 {
font-size:10px;
color:#000099;
text-align:center;
margin:0;
padding:0px;
}
#videos .capa_contenido_descripcion .descripcion_lista {
margin: 0px;
}

Saludos.Espero que si no se entendio el post anterior ete si

[pitufo]

Hola.

Hice algo sencillo, espero que te sirva.

HTML

<div id="videos">
	<table>
		<caption>Titulo del Video Uno</caption>
		<tr>
			<td class="foto">
				
			</td>
			
			<td class="descripcion">
				

<span>Lo envio:</span> Alejandra y Ariel</p>
				

<span>Categoria:</span> Paseo</p>
				

<span>Duracion:</span> 3:24 </p>
			</td>
			
			<td class="comentario">
				

en este video conocerá a los integrantes de la pandilla.</p>
			</td>
		</tr>
	</table>
</div>

Para cada vídeo duplicas todo el código de la tabla y simplemente cambias la información. El div no lo dupliques pues es que que contendrá todos los vídeos.




CSS

#videos { width: 420px; border: solid 1px #D6D6D6; padding: 0.50em 0 0 0.50em; height: 400px; overflow: scroll; }
table { width: 400px; font-size: 90%; margin-bottom: 1em; font-family: Times, serif; border: solid 1px #F0F0F0}
caption { text-align: center; font-weight: bold; font-size: larger; }
td {padding: 0 0.50em; }
td p {margin: 0 0.20em; color: #484848;}
.foto { width: 120px; vertical-align: middle;  padding: 0;}
.descripcion { width: 120px; vertical-align: text-top; background-color: #F0F0F0;}
.descripcion span { font-weight: bold; margin-right: 0.50em; }
.comentario { width: 160px; vertical-align: top; background-color: #EDEDEF;}

Cuando dupliques las demás tablas se tendría que ver como se muestra en la imagen.










Bye.