CSS DIV Alinhada Horizontalmente

Campistaaa · 2 de julho de 2017

Eu queria saber se alguém poderia me ajudar a criar div's alinhada horizontalmente, eu criei um só que foi de lista um em baixo do outro(exemplo imagem:1), eu queria colocar tipo caixa por caixa e cada caixa aparecesse uma imagem do vídeo(exemplo imagem:2), eu criei um site com sistema de upload de vídeo e queria que na timeline da aba HOME aparecesse todos os videos só que os videos em modo caixa por caixa. Queria colocar também no bando de dados upload de imagem junto com o vídeo, eu criei um que dava upload de vídeo e queria implementar de imagem junto com o vídeo para aparecer na HOME.

Exemplo Imagem 1

Exemplo Imagem 2

Eu queria implementar uplaod de imagem junto com o upload de video para que a imagem que foi enviada aparecesse na aba home

Código aba Home(index.php)

<html>
<head>
<title>Video Upload System</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel='stylesheet' href="mystyle.css" />
<img class="logo" src="template/logo.png"/>
</head>
<body>
<?php
    include 'connect.php';
?>
<?php
    include 'topnav.php';
?>
<div id='box'>
    <?php
        $query = mysql_query("SELECT id, name, url FROM videos");
        while($run = mysql_fetch_array($query)){
            $video_id = $run['id'];
            $video_name = $run['name'];
            $video_url = $run['url'];
    ?>
        <a href='view.php?video=<?php echo $video_url; ?>'>
        <div id='url'>
            <?php echo $video_name; ?>
        </div>
        </a>
    <?php
        }
    ?>
</div>
</body>
</html>

CSS do Site(mystyle.css)

li {
    display: inline;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #4CAF50;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}
body {
    background:#222;
    color:#fff;
    font-family:tahoma;
    font-size:12px;
}
#box {
    background:#333;
    padding:10px;
    width:50%;
    margin:50px auto;
}
input {
    background:#444;
    color:#fff;
    border:0px;
    padding:10px;
    margin:5px 0px;
}
a {
    text-decoration:none;
    color:#fff;
}
#url {
    background:#444;
    padding:10px;
    margin:5px;
}

Upload de Video(upload.php)

<html>
<head>
<title>Video Upload System</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel='stylesheet' href="mystyle.css" />
<img class="logo" src="template/logo.png"/>
</head>
<body>
<?php
    include 'connect.php';
?>
<?php
    include 'topnav.php';
?>
<div id='box'>
    <form method='post' enctype="multipart/form-data">
    <?php
        if(isset($_FILES['video'])){
            $name = $_FILES['video']['name'];
            $type = explode('.', $name);
            $type = end($type);
            $size = $_FILES['video']['size'];
            $random_name = rand();
            $tmp = $_FILES['video']['tmp_name'];
            if($type != 'mp4' && $type != 'MP4' && $type != 'flv'){
                $message = "Formato  de video não suportado !";
            } else {
                move_uploaded_file($tmp, 'videos/'.$random_name.'.'.$type);
                mysql_query("INSERT INTO videos VALUES('', '$name', '$random_name.$type')");
                $message = "Enviado com sucesso ! ";
            }
            echo "$message <br/><br/>";
        }
    ?>
        Selecione o Video: <br/>
        <input type='file' name='video' />
        <br/><br/>
        <input type='submit' value='ENVIAR' />
    </form>
</div>
</body>
</html>

DiF · 2 de julho de 2017

@Campistaaa Olá,

Você pode fazer os box que ficarão as imagens usando inline-block.....

Veja um exemplo online: https://jsfiddle.net/obdryxmt/

Mas lembre-se jamais use ID quando tiver mais de um elemento igual. Nesse caso é necessário CLASS para que funcione.

Quanto a imagem, você pode criar o thumbnail no momento que faz o upload dos vídeos. usando o ffmpeg-php

Ou, para ser mais fácil, antes você cria manualmente o print do vídeo... e cria um sistema de upload de imagens relacionada com o vídeo.

Se quiser aprender sobre o ffmpeg-php veja estes links

Capturando miniatura de videos com php

Criando thumbnails com php

Campistaaa · 2 de julho de 2017

Você e uma pessoa mt *****, serio mesmo, eu te iludo. Mt inteligente, responde as duvidas das pessoas rapidas, você e uma grande pessoa, parabéns!

Campistaaa · 24 de agosto de 2017

Boa noite, eu fiz o que você tinha dito para criar as div's só que não sai do jeito que você queria e nem eu poderia me ajudar? Olha o print como ta saindo! Eu queria q cada nome fosse para uma div diferente, tem dois link em uma caixa só.

adicionado 40 minutos depois

@DiF E que tipo eu queria organizar os videos, tipo quando eu upar um video cria uma box com ele la dentro para cada video, e queria colocar o texto em baixo, e depois ia colocar a thumbnail em cima tipo youtube. Eu di uma melhorada só que saiu não muito bom, a primeira caixa está normal mas a segunda a caixa aumenta dependendo do nome do video, pfv me ajuda <33

index.php

<html>
<head>
<title>Video Upload System</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel='stylesheet' href="mystyle.css" />
<img class="logo" src="template/logo.png"/>
</head>
<body>
<?php
	include 'connect.php';
?>

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

<div class='caixa'>
	<?php
		$query = mysql_query("SELECT id, name, url FROM videos");
		while($run = mysql_fetch_array($query)){
			$video_id = $run['id'];
			$video_name = $run['name'];
			$video_url = $run['url'];
	?>
		<a href='view.php?video=<?php echo $video_url; ?>'>
		<div id='caixa'>
			<?php echo $video_name; ?>
		</div>
		</a>
	<?php
		}
	?>
</div>

</body>
</html>

mystyle.css

li {
    display: inline;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #008b29;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

.active {
    background-color: #006f3d;
}

body {
    background:#222;
    color:#fff;
    font-family:tahoma;
    font-size:12px;
}

.box2{
  width: 250px;
  height: 150px;
  display: inline-block;
  background:#333;
}

#box {
    background:#333;
    padding:10px;
    width:50%;
    margin:50px auto;
}

#view {
    background:#333;
    padding:10px;
    width:70%;
    margin:15px;
}

input {
    background:#444;
    color:#fff;
    border:0px;
    padding:10px;
    margin:5px 0px;
}

a {
    text-decoration:none;
    color:#fff;
}

#url {
    background:#444;
    padding:10px;
    margin:5px;
}

#caixa {
    background:#333;
    padding: 80px;
  	display: inline-block;
    margin:5px;
}