How to level columns in HTML/CSS?

Asked

Viewed 116 times

-2

personal. Beauty?

Next, I’m starting to make small sites and would like to know how do I level the columns (Divs) of this site:

http://marlonramos.rf.gd/minervasangels/index.php?i=1

The images should be leveled to the top, but they are leveled down at the bottom of the page. How do I resolve them? Thanks in advance.

html css
  • 1

    table in div class="barra_menu" has no tag tr, only table and td. That’s what? HTML6?

  • in the footer has two td tags in a row and also has no tr tag

  • This doesn’t mean it will align the images, but it will fix the HTML

  • Your page just doesn’t open right in Google Chrome, Safari, Firefox, IE and Microsoft Edge open correctly.

  • Well, my advice is to start by taking some course of HTML5 and CSS3

  • Let me know if you saw the answer and check the demo, so I can get the demo from my server

Show 1 more comment

1 answer

0

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
    height: 1500px;
    width: 1325px;
    margin: 0px 0px;
    background-image: url("http://marlonramos.rf.gd/minervasangels/nuvem.jpg");
    background-size: cover;
    background-attachment: fixed;
}

/*cabeçalho*/
.topo{  
    height: 550px;
    width: 100%;
}

/*foto cabeçalho*/
#ma {
    margin: 0px auto;
    height: 500px;
}

.barra_menu {
    background: #E0FFFF;
    /* Old browsers */
    background: -moz-linear-gradient(0deg, #87CEFA 0%, #E0FFFF 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(0deg, #87CEFA 0%, #E0FFFF 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(0deg, #87CEFA 0%, #E0FFFF 100%);
    height: 1650px;
    margin: 0px 0px;
    height: 50px;
    width: 100%;
}

button {
    width: 200px;
    font-style: open sans, sans-serif;
    font-size: 30px;
    color: #EE1289;
    vertical-align: center;
}

/*coluna fotos da galeria*/
.coluna {
    float: left;
    width: 23%;
    display: inline-block;
    margin: 0px 10px 20px 10px;
    padding-top: 0px;
}

/*fotos da galeria*/
#fotos {
    width: 300px;
    border-radius: 30px;
}

.rodape {
    margin-bottom: 0px;
    padding: 30px;
    font-family: "Open Sans", sans-serif;
    background-color: #FF1493;
    color: #FFFFFF;
    height: 220px;
    width: 100%;
} 

table, td {
  border: 0px solid blue;
}

.redes {
    height: 100px;
    border-radius: 20px;
}

p {
    margin: 30px;
    font-family: open sans, sans-serif;
}

.active {
  background-color: #333333;
  color: whitesmoke;
}

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="icon.gif" type="image/gif">
    <title>Bem-Vindo ao paraíso de Minerva's Angels!</title>
    <link href="style.css" type = "text/css" rel="stylesheet"/>
    <meta charset="UTF-8">
    <html lang="pt-br">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
</head>

<body>      
<div class="topo">
    <a href="index.php" target= "_blank"><img src="00.jpg" id = "ma"></a>
    <br />
    <div class="barra_menu">
        <table align="center">
            <tr><td><a href="index.php"><button>Principal</button></a></td>
            <td><a href="autor.php"><button>Autor</button></a></td>
        </tr></table>
    </div>
    <br />
    <br />
</div>
    <br />
    <!--primeira coluna-->      
    <div class = "coluna">
        <a href="galerias/001.jpg" target="_blank"><img src="galerias\001.jpg" id = "fotos"></a><br />
        <a href="galerias/002.jpg" target="_blank"><img src="galerias\002.jpg" id = "fotos"></a><br />                  
        <a href="galerias/003.jpg" target="_blank"><img src="galerias\003.jpg" id = "fotos"></a><br />
        <a href="galerias/004.jpg" target="_blank"><img src="galerias\004.jpg" id = "fotos"></a><br />  
        <a href="galerias/005.jpg" target="_blank"><img src="galerias\005.jpg" id = "fotos"></a><br />
        <a href="galerias/006.jpg" target="_blank"><img src="galerias\006.jpg" id = "fotos"></a><br />  
        <a href="galerias/007.jpg" target="_blank"><img src="galerias\007.jpg" id = "fotos"></a><br />
        <a href="galerias/008.jpg" target="_blank"><img src="galerias\008.jpg" id = "fotos"></a><br />  
        <a href="galerias/009.jpg" target="_blank"><img src="galerias\009.jpg" id = "fotos"></a><br />
        <a href="galerias/010.jpg" target="_blank"><img src="galerias\010.jpg" id = "fotos"></a><br />  
        <a href="galerias/011.jpg" target="_blank"><img src="galerias\011.jpg" id = "fotos"></a><br />
        <a href="galerias/012.jpg" target="_blank"><img src="galerias\012.jpg" id = "fotos"></a><br />  
        <a href="galerias/013.jpg" target="_blank"><img src="galerias\013.jpg" id = "fotos"></a><br />
        <a href="galerias/014.jpg" target="_blank"><img src="galerias\014.jpg" id = "fotos"></a><br />  
        <a href="galerias/015.jpg" target="_blank"><img src="galerias\015.jpg" id = "fotos"></a><br />  
        <a href="galerias/061.jpg" target="_blank"><img src="galerias\061.jpg" id = "fotos"></a><br />                      
    </div>          
    <!--segunda coluna-->

    <div class = "coluna">
        <a href="galerias/016.jpg" target="_blank"><img src="galerias\016.jpg" id = "fotos"></a><br />
        <a href="galerias/017.jpg" target="_blank"><img src="galerias\017.jpg" id = "fotos"></a><br />                  
        <a href="galerias/018.jpg" target="_blank"><img src="galerias\018.jpg" id = "fotos"></a><br />
        <a href="galerias/019.jpg" target="_blank"><img src="galerias\019.jpg" id = "fotos"></a><br />  
        <a href="galerias/020.jpg" target="_blank"><img src="galerias\020.jpg" id = "fotos"></a><br />
        <a href="galerias/021.jpg" target="_blank"><img src="galerias\021.jpg" id = "fotos"></a><br />  
        <a href="galerias/022.jpg" target="_blank"><img src="galerias\022.jpg" id = "fotos"></a><br />
        <a href="galerias/023.jpg" target="_blank"><img src="galerias\023.jpg" id = "fotos"></a><br />  
        <a href="galerias/024.jpg" target="_blank"><img src="galerias\024.jpg" id = "fotos"></a><br />
        <a href="galerias/025.jpg" target="_blank"><img src="galerias\025.jpg" id = "fotos"></a><br />  
        <a href="galerias/026.jpg" target="_blank"><img src="galerias\026.jpg" id = "fotos"></a><br />
        <a href="galerias/027.jpg" target="_blank"><img src="galerias\027.jpg" id = "fotos"></a><br />  
        <a href="galerias/028.jpg" target="_blank"><img src="galerias\028.jpg" id = "fotos"></a><br />
        <a href="galerias/029.jpg" target="_blank"><img src="galerias\029.jpg" id = "fotos"></a><br />  
        <a href="galerias/030.jpg" target="_blank"><img src="galerias\030.jpg" id = "fotos"></a><br />  
        <a href="galerias/062.jpg" target="_blank"><img src="galerias\062.jpg" id = "fotos"></a><br />                      
    </div>  
    <!-- terceiracoluna-->
    <div class = "coluna">
        <a href="galerias/031.jpg" target="_blank"><img src="galerias\031.jpg" id = "fotos"></a><br />
        <a href="galerias/032.jpg" target="_blank"><img src="galerias\032.jpg" id = "fotos"></a><br />                  
        <a href="galerias/033.jpg" target="_blank"><img src="galerias\033.jpg" id = "fotos"></a><br />
        <a href="galerias/034.jpg" target="_blank"><img src="galerias\034.jpg" id = "fotos"></a><br />  
        <a href="galerias/035.jpg" target="_blank"><img src="galerias\035.jpg" id = "fotos"></a><br />
        <a href="galerias/036.jpg" target="_blank"><img src="galerias\036.jpg" id = "fotos"></a><br />  
        <a href="galerias/037.jpg" target="_blank"><img src="galerias\037.jpg" id = "fotos"></a><br />
        <a href="galerias/038.jpg" target="_blank"><img src="galerias\038.jpg" id = "fotos"></a><br />  
        <a href="galerias/039.jpg" target="_blank"><img src="galerias\039.jpg" id = "fotos"></a><br />
        <a href="galerias/040.jpg" target="_blank"><img src="galerias\040.jpg" id = "fotos"></a><br />  
        <a href="galerias/041.jpg" target="_blank"><img src="galerias\041.jpg" id = "fotos"></a><br />
        <a href="galerias/042.jpg" target="_blank"><img src="galerias\042.jpg" id = "fotos"></a><br />  
        <a href="galerias/043.jpg" target="_blank"><img src="galerias\043.jpg" id = "fotos"></a><br />
        <a href="galerias/044.jpg" target="_blank"><img src="galerias\044.jpg" id = "fotos"></a><br />  
        <a href="galerias/045.jpg" target="_blank"><img src="galerias\045.jpg" id = "fotos"></a><br />                          
    </div>  
    <!-- quarta coluna-->           
    <div class = "coluna">
        <a href="galerias/046.jpg" target="_blank"><img src="galerias\046.jpg" id = "fotos"></a><br />
        <a href="galerias/047.jpg" target="_blank"><img src="galerias\047.jpg" id = "fotos"></a><br />                  
        <a href="galerias/048.jpg" target="_blank"><img src="galerias\048.jpg" id = "fotos"></a><br />
        <a href="galerias/049.jpg" target="_blank"><img src="galerias\049.jpg" id = "fotos"></a><br />  
        <a href="galerias/050.jpg" target="_blank"><img src="galerias\050.jpg" id = "fotos"></a><br />
        <a href="galerias/052.jpg" target="_blank"><img src="galerias\052.jpg" id = "fotos"></a><br />
        <a href="galerias/052.jpg" target="_blank"><img src="galerias\052.jpg" id = "fotos"></a><br />
        <a href="galerias/053.jpg" target="_blank"><img src="galerias\053.jpg" id = "fotos"></a><br />  
        <a href="galerias/054.jpg" target="_blank"><img src="galerias\054.jpg" id = "fotos"></a><br />
        <a href="galerias/055.jpg" target="_blank"><img src="galerias\055.jpg" id = "fotos"></a><br />  
        <a href="galerias/056.jpg" target="_blank"><img src="galerias\056.jpg" id = "fotos"></a><br />
        <a href="galerias/057.jpg" target="_blank"><img src="galerias\057.jpg" id = "fotos"></a><br />  
        <a href="galerias/058.jpg" target="_blank"><img src="galerias\058.jpg" id = "fotos"></a><br />
        <a href="galerias/059.jpg" target="_blank"><img src="galerias\059.jpg" id = "fotos"></a><br />  
        <a href="galerias/060.jpg" target="_blank"><img src="galerias\060.jpg" id = "fotos"></a><br />                          
    </div>  


    <div class="rodape">
    <p align="left">Minerva's Angels é uma criação de Márlon Ramos</p>
    <br />
    <table align="center">
        <tbody>
            <tr>
            <td align="center">
                <a href="https://www.facebook.com/Minervas.Angels/" target="_blank"><img src="face.jpg" class="redes"></a>
                <br /> 
                <strong>Facebook</strong>
            </td>
            <td><p></p></td>
            <td  align="center">
                <a href="https://br.pinterest.com/brucecartoons/" target="_blank"><img src="pint.jpg" class="redes"></a>
                <br/>
                <strong align="center">Pinterest</strong>
            </td>
            <td><p></p></td>
            <td  align="center">
                <a href="https://brucecartoons.wordpress.com/" target="_blank"><img src="ma.jpg" class="redes"></a>
                <br/>
                <strong align="center">Blog</strong>            
            </td>
            </tr>           
        </tbody>
    </table>
</div>  <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

Browser other questions tagged html css

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