Error in positioning divs

Question

Error in positioning divs

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello, I'm making an application and I'm trying to create cards using html and css, I already managed to create the cards, but I'm not thinking of positioning side by side, does anyone know how I can do this?

The layout is getting like this, but I want it when the space runs out the next card comes down. CSSofthecards:

@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 ID

<?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>

Home 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 html5 css front-end

asked by anonymous 20.01.2018 / 22:46

2 answers

How to create a file if it does not exist? mPdf - Import another PDF together with your pages

score 0 · Answer 1

FLOAT and OVERFLOW

1 - The .w3-card-4 class suggests that it is a < LI >

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

2nd - Do not use float: right , unless it is extremely necessary. And remove the position: absolute

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

3rd - Place an overflow: hidden in the < UL > so that there is no overflow.

ul { overflow: hidden; }

score 0 · Answer 2

Avoid using the position property on elements unless you really need it. Place the cards within a% parent% to only align this element according to the structure of your page. On cards, use div to deal with the spacing between your elements and add margin so that they are side by side. 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>