How do you tell dreamweaver its time to move down?

Forum|Forum|4 years ago
January 10, 2022
2 replies
451 views

Yet again - I know just enough to get into trouble.

Hopw do I tell it that it goes UNDER the header?

This topic has been closed for replies.

Correct answer osgood_

I am sorry for being so dense. As I had said before it's been a while since I've done this. I had included a picture in the previous posting but it didn't show up.

You can take a look at these or give me a site where I can post them.

A simple fix would be to remove 'position: absolute' from the 'site-logo' selector - there is no need for any positioning on that selector. You don't really even need any positioning on the 'nav' either.

See the example code below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site Navigation</title>
<style>
body {
font-family: helvetica, arial, sans-serif;
margin: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 0 50px;
}
.site-nav {
width: 75%;
}
.site-nav ul {
display: flex;
justify-content: center;
margin: 0;
padding: 20px;
background-color: #bbb;
}
.site-nav li {
margin: 0 10px;
padding: 0;
list-style: none;
}
.site-nav a {
font-size: 12px;
text-transform: uppercase;
color: #fff;
}
main {
width: 90%;
margin: 5em auto 0 auto;
}
</style>
</head>
<body>
<header>
<a class="site-logo">
<img src="images/Avatar-Logo1.png" alt="Avatar" id="logo">
</a>
<nav class="site-nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">introduction</a></li>
<li><a href="#">what to do</a></li>
<li><a href="#">how to do it</a></li>
<li><a href="#">what to do next</a></li>
</ul>
</nav>
</header>
<!-- START MAIN CONTENT -->
<main>
<h2>Main Content</h2>
</main>

</body>
</html>

O

osgood_

Legend

As mentioned in a prior thread when your component is positioned using fixed or absolute it will be removed from the natural html flow. Any code following the component doesn't know its there so will consume its space.

The solution is to use some top padding on the body of your page or some top margin on the component which follows the fixed or absolutely positioned component, this will have the effect of pushing the desired component down the page.

christineavatarAuthor

Legend

I thank the both of you but I still have a proplem, just with the logo. It has gotten misplaced by the padding while the 'nav' was not. I've tried to move the logo into the nav listing section but that didn't work. Any suggestions?