Copy link to clipboard
Copied
I'm writing a website from scrach and i my main body content its been overwrite on my topnav bar, i dont even what i got to do.I had some top Margin but it didn't work. i dont know if my code wrong or somethnig.
also i notice that my body section have just a size of 1032 x 32 i dont know if it for something and i dont know how to change it.
Please help
1) You need to add top: 0; to your nav css:
nav {
position: fixed;
top: 0;
background: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
2) You don't have a .main css class, its just the 'main' html container you are using, so delete the period infront of the css selector name and add a top margin to the main container to push the content down so it becomes visible:
main {
margin: 12em 0 0 0;
}
When you have a fixed navigation and use css to push the content down its just really a bit of a guessing
...Copy link to clipboard
Copied
You are going to need to post a link to the page in question or code from your page to review. Without seeing the code it is difficult to say exactly what is causing your issue.
Copy link to clipboard
Copied
To be of any help we need to see the code you are using. Can you paste the code and any css the page uses in the forum or better still if you are able to upload the page to a remote server and provide a link to it.
Copy link to clipboard
Copied
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pata'Sucre</title>
<!-- Custom Style-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!------------------Navigation------------>
<header>
<nav class="topnav">
<div class="nav-menuflex-row">
<div class="toggle-collapse">
<div class="toggle-icons">
<i class="fas fa-bars"></i>
</div>
</div>
<div>
<ul class="nav-item">
<div class="nav-brand"> <a href="#" class="logo-header"> <img src="img/logo.png" height="105" width="105"></a> </div>
<li class="nav-link">
<a href="#" class="nav-button">Home</a>
</li>
<li class="nav-link">
<a href="#" class="nav-button">Product</a>
</li>
<li class="nav-link">
<a href="#" class="nav-button">Gallery</a>
</li>
<li class="nav-link">
<a href="#" class="nav-button">Contact</a>
</li>
<li class="nav-link">
<a href="#" class="nav-button">About Us</a>
</li>
</ul>
</div>
<div class="social">
<a href="#"><img src="img/Social/Facebook Black.png" title="Facebook" class="social-png"></a>
<a href="#"><img src="img/Social/Instagram Black.png" title="Instragram" class="social-png"></a>
<a href="#"><img src="img/Social/Email Black.png" title="Email" class="social-png"></a>
<a href="#"><img src="img/Social/Paypal Black.png" title="Paypal" class="social-png"></a>
</div>
</div>
</nav>
</header>
<!--------MAIN SITE SECTION---------------->
<main>
<div class="main-welcome"><h1>A Tasty World</h1></div>
</main>
<!---------x-----MAIN SITE SECTION-------x--->
<!-----------x----Navigation-----x----->
<!--------Custom Javascript File -------->
<script src="./js/main.js"></script>
</body>
</html>
Copy link to clipboard
Copied
We still need to see the rest of the code included for this page (ie: CSS). This is only part of the puzzle because if you have issues with margins those would be in your CSS document which needs to be assessed alongside your HTML.
Copy link to clipboard
Copied
@Import url(../fonts/fonts.css);
/*---------Global Classes-----------*/
:root(
/* theme -font-family*/
--Amatic:'Amatic',bold;
--Conforta:'Conforta', bold;
--dancingstyle:'dancingstyle'bold;
)
a {
text-decoration: none;
}
ul {
list-style: none;
color:#EF19C6 ;
}
/*---------xGlobal Classes----------*/
/*---------NavBar---------*/
nav {
position: fixed;
background: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
.topnav {
width: 100%;
}
.nav-button{
color:#EF19C6 ;
text-decoration: none;
}
.nav{
background:white;
padding: 0 2rem;
height: 0rem;
min-height:10vh;
transition: height 1s ease-in-out;
}
.nav .nav-menuflex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.nav-item {
display: flex;
margin: 0;
padding: .5rem;
font-size: 1.5rem;
font-family:dancingstyle;
}
.nav .nav-brand a{
font-size: 1.6rem;
padding: 1rem 0;
text-decoration: none;
}
.social{
margin: .5rem;
float: right;
}
.social-png {
height: 30px;
width: 30px;
}
.nav-link {
margin: 2rem;
font-family: Conforta;
font-style:normal;
font: bolder;
font-size-adjust: auto;
font-synthesis: style;
}
logo-header{
float: left;
margin: 0;
padding-top: 1.5rem;
}
/*-------xNavBarx---------*/
.main{
margin: inherit;
}
/*------------media query--------------*/
Copy link to clipboard
Copied
i forgot to delete the four last line, i kind weird, maybe its a merging probleme as u said
Copy link to clipboard
Copied
1) You need to add top: 0; to your nav css:
nav {
position: fixed;
top: 0;
background: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
2) You don't have a .main css class, its just the 'main' html container you are using, so delete the period infront of the css selector name and add a top margin to the main container to push the content down so it becomes visible:
main {
margin: 12em 0 0 0;
}
When you have a fixed navigation and use css to push the content down its just really a bit of a guessing game. Use em instead of px for the top margin because if a user zooms their browser text at least the content gets pushed down. If you use px the content wont move down and you'll find the nav, if you keep zooming the text, will eventually obscure the content.
The idea is to keep the fixed navigation as narrow in depth as is possible, yours looks a bit deep to me for a fixed nav bar.
Copy link to clipboard
Copied
Thank @osgood_ I really appreciate the hand.
Its working well now, gonna keep that in mind next time pal.
Copy link to clipboard
Copied
In order to build websites, you need a working knowledge of HTML, CSS and to some extent JavaScript code. Without understanding code, it's unlikely you'll get the results you're hoping for. Read the chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
Validate your code and fix reported errors. In DW, go to Window > Results > Validation. Check current document. See screenshot.
Copy link to clipboard
Copied
I have already done all the HTML tutorial and CSS Tutorial lessons and test
I'm actually working on my javascript and C++ skill while i'm building my website.
Copy link to clipboard
Copied
also its not the first website i build i have never seen such a problem but its my first time using dreamweaver for that purpose so i'm a bit confuse
Copy link to clipboard
Copied
Thanks for the advise by the way