Hi,
I'm getting lost with css layout and I'd like it if someone could explain just this. I'm trying to have a webpage (for now, just one page where I can practice my html/css). My plan is to have a menu on the top, lots of image under it and then just copyright. So far, my HTML code looks like this :
<!DOCTYPE html>
<html lang="en-US">
<!--GOTTA DO THE LAYOUT IN FLEX!!!-->
<head>
<title>Wallpaper paradise</title>
<!--Call the stylesheet called "ui.css"-->
<link rel="stylesheet" type="text/css" href="css/ui.css">
<meta charset="UTF-8">
<!--Add a description for the website. Then add keywords for search engine. Finaly tells people I'm the author of the website-->
<meta name="description" content="The wallpaper paradise. Trying to get as many quality wallpapers I can get!">
<meta name="keywords" content="wallpaper, dimension, women, abstract, videogames, photography, fanarts">
<meta name="author" content="Krimmi83">
<!--Take control of the viewport! (responsive web design introduction). The viewport element
gives the browser instructions on how to control the page's dimensions and scaling.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header>
<h1><!--<img src="images/logo.png" width="100%">-->Wallpaper Paradise</h1>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="news.html">News</a>
<a href="latest.html">Latest</a>
<a href="random.html">Random</a>
<a href="faq.html">FAQs</a>
</div>
</header>
<body>
<p>tesst</p>
<div><p>test</p></div>
<div class="flex-photo" >
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<img src="images/logo.png">
</body>
</html>
Then, we got my CSS code :
* {
box-sizing: border-box;
}
html, body {
height: 25%;
}
html {
display: table;
margin: auto;
font-family: 'Open Sans', sans-serif;
}
body {
background-image: url("../images/blue-gradients.jpg");
background-color: #00ccff;
background-repeat: no-repeat;
background-attachment: fixed;
display: table-cell;
vertical-align: middle;
text-align:center;
}
p {
text-align: center;
color: white;
}
h1 {
color: white;
margin-left: 20px;
text-align: center;
font-size: 200%;
}
img {
max-width:100%;
height:auto;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
float: left;
text-align: center;
padding: 5px;
margin-bottom: 5px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #e2e2e2;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.flex-photo {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
clear: both;
border: 1px solid black;
width: 100%;
}
.flex-photo div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
border: 1px solid black;
}
@media only screen and (max-width: 700px) {
.topnav {
display: none !important;
}
}
The problem is that I want to menu to appear at the top of the page and everything else under it. The thing that I don't understand (pretty sure there's more than one things, but let's start with this) is that if I remove my flex-photo class (in the css, put it as a comment), everything lines-up verticaly, but as soon as I add the flex-photo class, my layout get all messed up.
Ps: Image 1 is with the flex-photo as a comment in the CSS file and image 2 is without the comment. (image 1 : I'm using the class and image 2 I'm not)
Thanks!
