Put Items in Scroll

Question

Put Items in Scroll

Navigation

#1 by (1 votes)

0

Hello! I'm trying to create a horizontal scroll with certain items. But it breaks down instead of continuing to the side. I want to do a scrolling effect to show more content next.

.container {
    width: 1200px;
    margin: auto;
}

.conteudo {
    height: 435px;
    border-radius: 5px;
    box-shadow: 2px 1px 15px #888888;
    margin-top: 30px;
    margin-bottom: 30px;
}

.novos-titulos {
    font-family: "Trebuchet MS";
    background-color: #ffffff;
    width: 200px;
    text-align: center;
    border-radius: 5px;
    color: black;
    float: left;
    margin-left: 30px;
    margin-top: 15px;
    box-shadow: 2px 1px 10px #888888;
}

<div class="container">
<div class="conteudo">

                <h2>Novos Títulos</h2>

                <a href="#"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
                <div class="clearfix"></div>


                <?php

                    include_once 'conexao.php';

                    $sql = "select * from perfil ORDER BY idperfil DESC LIMIT 7";

                    $result = mysqli_query($con, $sql);

                    while ($row = mysqli_fetch_array($result)){

                ?>

                <article class="novos-titulos">

<h3><a href="perfil.php?idperfil=<?php echo $row["idperfil"];?>"><?php echo mb_strimwidth($row["titulo"], 0, 20, "..." ); ?></a></h3>

                    <a href="perfil.php?idperfil=<?php echo $row["idperfil"];?>"><img src="img/<?php echo $row["capa"]; ?>" alt=""></a>
                    <span>Total: <?php echo $row["episodios"]; ?></span>

                </article>

  <?php } mysqli_close($con);?>


</div>
</div>

html css

asked by anonymous 23.07.2017 / 23:21

1 answer

Get data from a dynamic HTML table incompatible types can not be converted to

score 1 · Accepted Answer

It's impossible to use your available code so I've created a simple example for you to understand.

The problem you're having can be easily solved as white-space: nowrap; style, basically what it does is tell the browser that that particular NEVER div will have line break. Then we add overflow options.

X axis of the div:

overflow-x: scroll;

We are saying that everything that 'overflows' the div horizontally will be displayed in scrolling form.

Y axis of the div:

overflow-y: hidden;

We're saying that whatever vertically 'overflow' the div will not be displayed. You do not have to worry about content not being displayed. with% w / w included, the Y axis will never change.

.quad{
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid;
  margin-top: 20px;
}

.scroll{
  padding: 5px;
  border: 1px solid #ccc;
  width: 30%;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 150px;
  white-space: nowrap;
}

<div class='scroll'>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
<div class='quad'>
</div>
</div>