So i'm writing my code, i'm trying to make my first page. I did a div header with my logo in it, a div nav and div article, in this order.
The thing is, when I see the code and design in dreamweaver, I can see everything looking how it is suppose to look. It seems fine, until I try to see a live preview in a browser. What is suppose to appear first appears third and what is third.. does not appear actually but whatever. I'm new to making websites.
How it is in dreamweaver: div logo, nav and article
How it is in Edge, Opera or another browser: article (which does not appear lol), nav and logo.
I tried to figure it out.. I just don't understand, my code is written correctly. The browser seems to don't respect the chronology of what I've wrote.
I also have some strange yellow bars around my different sections and I want them to disappear. Do you know how?
Thanks in advance to the persons who will answer 
1 Correct answer
Let's say, this is what you're tyring to do.
The entire code would look like this. I'm using embedded CSS here for expediency.
...<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body {
margin: 0;
padding: 0;
background: darkgrey;
}
header {
background: midnightblue;
color: white;
}
header img { width: 100%; }
.flex-grid { di
11
Replies
Let's say, this is what you're tyring to do.
The entire code would look like this. I'm using embedded CSS here for expediency.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body {
margin: 0;
padding: 0;
background: darkgrey;
}
header {
background: midnightblue;
color: white;
}
header img { width: 100%; }
.flex-grid { display: flex; }
.col { flex: 1; }
nav {
text-align: center;
width: 80%;
margin: 0 auto;
}
nav ul { list-style: none; }
nav ul li { display: inline; }
nav ul li a {
text-decoration: none;
padding: 5%;
color: antiquewhite;
}
nav ul li a:hover, nav ul li a:active, nav ul lia:focus {
color: midnightblue;
text-decoration: underline
}
article {
background: antiquewhite;
padding: 5%;
}
footer { text-align: center }
</style>
</head>
<body>
<header class="flex-grid">
<div class="col"><img src="https://placeimg.com/300/150" alt="my logo"></div>
<div class="col">
<h1>Hello World!</h1>
<h2>Welcome to my awesome website</h2>
</div>
</header>
<nav>
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<article>
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore nobis, itaque est dolor! Sit provident sapiente corrupti obcaecati blanditiis, iste at, ullam quasi quam eligendi sunt! Ea, dolorem, iure! Placeat.</p>
</article>
<footer>
<p>Footer text</p>
<small>XYZ Company © 2018</small> </footer>
</body>
</html>
Did you define a local site folder for your project yet? This is a critical 1st step.
Go to Site > New Site > and create a folder on your hard drive. Example, C:\myTestSite.
Next, go to File > New > Starter Templates. Select one and hit the CREATE button. See screenshots.
Immediately save your newly created web page to your local site folder. Name it index.html. You should see it in your Files Panel (F8).
Right click on the document's tab and select Open in Browser.
Post back if you have any questions.
AdChoices