Highlighted

Problem with text area

New Here ,
Nov 19, 2020

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 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.

 

TOPICS
Code, Error, How to, Preview

Views

35

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Problem with text area

New Here ,
Nov 19, 2020

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 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.

 

TOPICS
Code, Error, How to, Preview

Views

36

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 19, 2020 0
Adobe Community Professional ,
Nov 19, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
LEGEND ,
Nov 19, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
New Here ,
Nov 19, 2020

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
Adobe Community Professional ,
Nov 19, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
New Here ,
Nov 19, 2020

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--------------*/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
New Here ,
Nov 19, 2020

Copy link to clipboard

Copied

i forgot to delete the four last line, i kind weird, maybe its a merging probleme as u said

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
LEGEND ,
Nov 19, 2020

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
Mr. One LATEST
New Here ,
Nov 19, 2020

Copy link to clipboard

Copied

Thank @osgood_  I really appreciate the hand.
Its working well now, gonna keep that in mind next time pal.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
Adobe Community Professional ,
Nov 19, 2020

Copy link to clipboard

Copied

@Mr. One 

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.

 

Validate Current Document (W3C)Validate Current Document (W3C)

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 1
New Here ,
Nov 19, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
New Here ,
Nov 19, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0
New Here ,
Nov 19, 2020

Copy link to clipboard

Copied

Thanks for the advise by the way

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2020 0