Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Campistaaa

CSS DIV Alinhada Horizontalmente

Recommended Posts

Postado (editado)

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

Screenshot_18.thumb.png.c0be85dc9ecea69cb81ad17df8042c48.png

 

Exemplo Imagem 2

Screenshot_17.png.00affd42c23963c13d01512951f488a7.png

 

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

Screenshot_19.thumb.png.8eaec62b29b41ca5b842381c7b0bcdb1.png

 

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>

 

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • 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!

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • 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ó. :(Screenshot_22.thumb.png.2c8b6e70bbdc6f11b42ff6b7e953cb8b.png

    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 <33Screenshot_23.thumb.png.d7caa6411aa4ac560164cc9572381101.png

     

    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;
    }

     

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @Campistaaa Olá,

     

    O tamanho do elemento ali que varia com o tamanho do nome, acontece porque você definiu um valor líquido ao width do elemento pai.

     

    Nesse caso, basta fixa-lo em px(pixel)

     

    Sobre o lance dos thumbnail, você pode usar a api do youtube  para trazer o thumb, o vídeo e a descrição do vídeo(vindos do youtube)

     

    Mas você pode fazer também com php, a pesquisa pode ser encontrada aqui

     

    Algumas dicas que dou para você:

     

    Tente não ficar abrindo e fechando várias vezes o bloco do php. Você pode criar toda a estrutura de repetição e divs em uma só.

     

    Altere, o mysql para  MySQLi que é a nova extensão. Esta que você está usando agora já está obsoleta e será retirado do php em uma futura versão.

     

    Existem outras dicas que poderia dar, mas como você está apenas começando, deixo isso para outra ocasião.

     

     

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×