Personal. Beauty?
Next, I'm starting to make small sites and would like to know how to level the columns (divs) of this site:
The images should be flush to the top, but they are flush at the bottom of the page. How do I solve it? Thank you in advance.
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@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;
}
<!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%pre%1.jpg" id = "fotos"></a><br />
<a href="galerias/002.jpg" target="_blank"><img src="galerias%pre%2.jpg" id = "fotos"></a><br />
<a href="galerias/003.jpg" target="_blank"><img src="galerias%pre%3.jpg" id = "fotos"></a><br />
<a href="galerias/004.jpg" target="_blank"><img src="galerias%pre%4.jpg" id = "fotos"></a><br />
<a href="galerias/005.jpg" target="_blank"><img src="galerias%pre%5.jpg" id = "fotos"></a><br />
<a href="galerias/006.jpg" target="_blank"><img src="galerias%pre%6.jpg" id = "fotos"></a><br />
<a href="galerias/007.jpg" target="_blank"><img src="galerias%pre%7.jpg" id = "fotos"></a><br />
<a href="galerias/008.jpg" target="_blank"><img src="galerias%pre%8.jpg" id = "fotos"></a><br />
<a href="galerias/009.jpg" target="_blank"><img src="galerias%pre%9.jpg" id = "fotos"></a><br />
<a href="galerias/010.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/011.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/012.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/013.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/014.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/015.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/061.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
</div>
<!--segunda coluna-->
<div class = "coluna">
<a href="galerias/016.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/017.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/018.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/019.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/020.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/021.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/022.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/023.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/024.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/025.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/026.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/027.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/028.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/029.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/030.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/062.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
</div>
<!-- terceiracoluna-->
<div class = "coluna">
<a href="galerias/031.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/032.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/033.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/034.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/035.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/036.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/037.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/038.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/039.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/040.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/041.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/042.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/043.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/044.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/045.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
</div>
<!-- quarta coluna-->
<div class = "coluna">
<a href="galerias/046.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/047.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/048.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/049.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/050.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/052.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/052.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/053.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/054.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/055.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/056.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/057.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/058.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/059.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/060.jpg" target="_blank"><img src="galerias0.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>
2.jpg" id = "fotos"></a><br />
<a href="galerias/003.jpg" target="_blank"><img src="galerias%pre%3.jpg" id = "fotos"></a><br />
<a href="galerias/004.jpg" target="_blank"><img src="galerias%pre%4.jpg" id = "fotos"></a><br />
<a href="galerias/005.jpg" target="_blank"><img src="galerias%pre%5.jpg" id = "fotos"></a><br />
<a href="galerias/006.jpg" target="_blank"><img src="galerias%pre%6.jpg" id = "fotos"></a><br />
<a href="galerias/007.jpg" target="_blank"><img src="galerias%pre%7.jpg" id = "fotos"></a><br />
<a href="galerias/008.jpg" target="_blank"><img src="galerias%pre%8.jpg" id = "fotos"></a><br />
<a href="galerias/009.jpg" target="_blank"><img src="galerias%pre%9.jpg" id = "fotos"></a><br />
<a href="galerias/010.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/011.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/012.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/013.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/014.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/015.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/061.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
</div>
<!--segunda coluna-->
<div class = "coluna">
<a href="galerias/016.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/017.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/018.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/019.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/020.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/021.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/022.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/023.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/024.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/025.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/026.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/027.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/028.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/029.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/030.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/062.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
</div>
<!-- terceiracoluna-->
<div class = "coluna">
<a href="galerias/031.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/032.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/033.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/034.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/035.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/036.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/037.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/038.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/039.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/040.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/041.jpg" target="_blank"><img src="galerias1.jpg" id = "fotos"></a><br />
<a href="galerias/042.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/043.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/044.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/045.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
</div>
<!-- quarta coluna-->
<div class = "coluna">
<a href="galerias/046.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/047.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/048.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/049.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/050.jpg" target="_blank"><img src="galerias0.jpg" id = "fotos"></a><br />
<a href="galerias/052.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/052.jpg" target="_blank"><img src="galerias2.jpg" id = "fotos"></a><br />
<a href="galerias/053.jpg" target="_blank"><img src="galerias3.jpg" id = "fotos"></a><br />
<a href="galerias/054.jpg" target="_blank"><img src="galerias4.jpg" id = "fotos"></a><br />
<a href="galerias/055.jpg" target="_blank"><img src="galerias5.jpg" id = "fotos"></a><br />
<a href="galerias/056.jpg" target="_blank"><img src="galerias6.jpg" id = "fotos"></a><br />
<a href="galerias/057.jpg" target="_blank"><img src="galerias7.jpg" id = "fotos"></a><br />
<a href="galerias/058.jpg" target="_blank"><img src="galerias8.jpg" id = "fotos"></a><br />
<a href="galerias/059.jpg" target="_blank"><img src="galerias9.jpg" id = "fotos"></a><br />
<a href="galerias/060.jpg" target="_blank"><img src="galerias0.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>