Error in positioning of Divs

Asked

Viewed 84 times

0

Hello, I’m making an application and I want to create cards using html and css, I’ve been able to create the cards, but I’m not trying to position one next to the other, someone knows how I can do it?

The layout is getting like this, but I want when the space runs out the next card goes down. inserir a descrição da imagem aqui CSS of cards:

@font-face{
    font-family: 'IndieFlower';
    src: url("../fontes/IndieFlower.ttf");
}

*{
    padding: 0;
    margin: 0;
    border: 0;
}

.w3-card-4{
    width: 400px;
    float: right;
    top: 10px;
    left: 330px;
    position: absolute;
    background-color: #FFFFFF;
}

header{
    background-color: #FF6861;
    color: #FFFFFF;
}

footer{
    background-color: #FFFFFF;
    border-top: 1px solid #FF6861;
    height: 55px;
    text-align: right;
}

.w3-container p{
    font-family: 'IndieFlower';
}

.acoes{
    border: none;
    display: inline-block;
}

Card code

<?php 
    require_once dirname(__FILE__) . '/../classes/Tarefa.php';

    $tarefas = TarefaDAO::listarTarefas($usuario->getId());
    if($tarefas != null):
        foreach ($tarefas as $tarefa):
?>
<div class="w3-card-4">
    <header class="w3-container">
        <h1><?php echo $tarefa->getNome();?></h1>
    </header>
    <div class="w3-container">
        <p>
            <?php echo $tarefa->getDescricao();?>
        </p>
    </div>   
    <footer>
        <form>
            <input class="acoes" type="image" src="imagens/favoritar.png"/>
            <input class="acoes" type="image" src="imagens/lixeira.png"/>
            <input class="acoes" type="image" src="imagens/atualizar.png"/>
        </form>
    </footer>
    <?php endforeach;?>
    <?php endif?>
</div>

Main screen code

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/inicio.css"/>
        <link rel="stylesheet" href="css/modal.css"/>
        <link rel="stylesheet" href="css/w3.css"/>
        <link rel="stylesheet" href="css/cards.css"/>
        <script src='js/jquery-3.2.1.min.js' type='text/javascript'></script>
        <script src='js/modal.js' type='text/javascript'></script>
        <script src='js/background.js' type='text/javascript'></script>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="shortcut icon" href="imagens/todoIcone.ico"/>
        <title>TODO List | Inicio</title>
        <?php
            require_once dirname(__FILE__) . '/includes/sessaoDeUsuario.php';
            require_once dirname(__FILE__) .'/dao/TarefaDAO.php';
           loginObrigatorio();
        ?>
        <?php
            $caminhoImagem = "";
            if($usuario->getFotoPerfil() != null){
                $caminhoImagem = $usuario->getFotoPerfil();
            }else{
                $caminhoImagem = "imagens/iconSemFoto.gif";
            }
        ?>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <img id="fotoUsuario" src="<?php echo $caminhoImagem;?>"/>
                    <p class="informacoes"><?php echo $usuario->getNome();?></p>
                    <p class="informacoes"><?php echo $usuario->getEmail();?></p>
                </li>
                <li>
                    <p>_____________________________</p>
                </li>
                <li>
                    <a href="#addTarefa" rel="modal">Nova Tarefa</a>
                </li>
                <li>
                    <a href="">Atualizar Tarefa</a>
                </li>
                <li>
                    <a href="#atualizarPerfil" rel="modal">Atualizar Perfil</a>
                </li>
                <li>
                    <a href="">Favoritas</a>
                </li>
                <!--WARNING: Gambiarra abaixo--> 
                <li>
                    <p>___________</p>
                </li>
                <li>
                    <a href="funcoes/logoutUsuario.php"><img src="imagens/logout.png"/></a>
                </li>
            </ul>
        </nav>
        <div id="fundo">
            <img src="imagens/fundo_principal.jpg "/>
        </div>

        <?php include './includes/cardsTarefas.php';?>
        <?php include './includes/modalAddTarefa.php';?>
        <?php include './includes/modalAtualizarPerfil.php';?>
        <div id="mascara"></div>
    </body>
</html>
php css html5 front-end

  • With position Absolute you will not be able to do this.

2 answers

0

Avoid using the property position in the elements, unless you really need to. Put the cards inside a div father to align only this element according to the structure of your page. In cards, use margin to address the spacing between your elements and add display: inline-block so they can stand next to each other. Below is a brief example of how it would look.

.w3-card-4{
    width: 180px;
    display: inline-block;
    background-color: #FFFFFF;
    margin: 10px;
}

header{
    background-color: #FF6861;
    color: #FFFFFF;
}
<div class="container-cards">
    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 1</h1>
        </header>
    </div>

    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 2</h1>
        </header> 
    </div>

    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 3</h1>
        </header> 
    </div>

    <div class="w3-card-4">
        <header class="w3-container">
            <h1>div 4</h1>
        </header>
    </div>
</div>

0

FLOAT and OVERFLOW

1st - The class .W3-card-4 I suggest it be a < LI >

ul li.w3-card-4 { ... }

2º - Do not use float: right, unless extremely necessary. And remove the position: Absolute

ul li.w3-card-4 { float: left; position: relative }

3º - Place a overflow:Hidden in the < UL > so that there is no overflow.

ul { overflow: hidden; }

  • Why the class . W3-card-4 must be a <li>?

  • It really shouldn’t, but I believe it’s best practice for these cases.

Browser other questions tagged php css html5 front-end

You are not signed in. Login or sign up in order to post.