CSS layout problem with div

krimmi83 · August 2, 2018

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!

Edited August 2, 2018 by krimmi83

dsonesuk · August 2, 2018

No other element appears above the body tag except the container head tag <head>...</head> this will contain other tags that not seen when you view your website, such as title, meta, script, css, links etc.

ALL element tags that make up your website which you will view is placed in the body tag. You would never style the body, html other than height, padding, margins, background, and font styles at most. All the styling such as display: float etc would be used for inner container elements of a main parent container element that would surround the inner elements of header, side panels, footer etc.

Until this is corrected and passes validation at https://validator.w3.org/ it would differcult to proceed as it is now.

krimmi83 · August 3, 2018

15 hours ago, dsonesuk said:

No other element appears above the body tag except the container head tag <head>...</head> this will contain other tags that not seen when you view your website, such as title, meta, script, css, links etc.

ALL element tags that make up your website which you will view is placed in the body tag. You would never style the body, html other than height, padding, margins, background, and font styles at most. All the styling such as display: float etc would be used for inner container elements of a main parent container element that would surround the inner elements of header, side panels, footer etc.

Until this is corrected and passes validation at https://validator.w3.org/ it would differcult to proceed as it is now.

Thanks Dsonesuk,

I tested my html file on your website and there was 2 errors. first one, I had the header above the body (clap clap clap) and second, my img had no alt. Those are the only errors I get. So far, the website is not hosted since I want to tests things and get better before hosting it. Planning on installing IIS on my old computer at home so I can host it myself.

~~I checked my code again and again and I don't understand why the layout get all messed up like that. Should I make class and subclass so I could deal with the width of each block?~~

I found it! Found a page on w3schools... Must have skipped it... My mistake : https://www.w3schools.com/css/css_website_layout.asp

Thanks!

Edited August 3, 2018 by krimmi83

Sign In

CSS layout problem with div

Recommended Posts

krimmi83

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

krimmi83

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity