I have a technical document page. I added a media query to it.
Problem:
When that media query applies my text goes under the navbar as i scroll the page right.
What i want:
I want my text to remain in its place as i scroll the page to right and not to go underneath my navbar.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="techdocpage.css">
</head>
<nav id="navbar">
<header id="header"> CSS Documentation </header>
<p class="nav-links"> <a class="nav-link" href="#what_is_css?">What is CSS? </a></p>
<hr>
<p class="nav-links"> <a class="nav-link" href="#css_syntax"> CSS Syntax </a> </p>
<hr>
<p class="nav-links"> <a class="nav-link" href="#css_modules">CSS Modules </a></p>
<hr>
<p class="nav-links"> <a class="nav-link" href="#external_stylesheet"> External Stylesheet </a></p>
<hr>
<p class="nav-links"> <a class="nav-link" href="#internal_stylesheet">Internal Stylesheet </a></p>
<hr>
<p class="nav-links"> <a class="nav-link" href="#inline_styles"> Inline Styles </a></p>
<hr>
</nav>
<main id="main-doc"> <!-- Should Contain the main documentation -->
<section class="main-section" id="what_is_css?">
<header> <h1> What is CSS? </h1> </header>
<p> CSS (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language. In the Introduction to HTML module we covered what HTML is, and how it is used to mark up documents. These documents will be readable in a web browser. Headings will look larger than regular text, paragraphs break onto a new line and have space between them. Links are colored and underlined to distinguish them from the rest of the text. What you are seeing is the browser's default styles — very basic styles that the browser applies to HTML to make sure it will be basically readable even if no explicit styling is specified by the author of the page. <br>
However, the web would be a boring place if all websites looked like that. Using CSS you can control exactly how HTML elements look in the browser, presenting your markup using whatever design you like. </p>
<br>
<h3> What is CSS for? </h3>
<p>As we have mentioned before, CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc.
A document is usually a text file structured using a markup language — HTML is the most common markup language, but you may also come across other markup languages such as SVG or XML.
Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer screen, projector or printer. <br>
CSS can be used for very basic document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation. Have a look at the links in this paragraph for specific examples.</p>
<br>
<h3 id="css_syntax"> CSS Syntax </h3>
<p>CSS is a rule-based language — you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page. For example "I want the main heading on my page to be shown as large red text."
The following code shows a very simple CSS rule that would achieve the styling described above:</p>
<div class="codeline"> <code> h1 {
color: red; <br>
font-size: 5em;
} </code>
</div>
<p>The rule opens with a selector . This selects the HTML element that we are going to style. In this case we are styling level one headings </p>
</section>
<section class="main-section" id="css_modules">
<header><h3> CSS Modules </h3> </header>
<p>As there are so many things that you could style using CSS, the language is broken down into modules. You'll see reference to these modules as you explore MDN and many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the Backgrounds and Borders module to find out what its purpose is, and what different properties and other features it contains. You will also find links to the CSS Specification that defines the technology (see below).
At this stage you don't need to worry too much about how CSS is structured, however it can make it easier to find information if, for example, you are aware that a certain property is likely to be found among other similar things and are therefore probably in the same specification.
For a specific example, let's go back to the Backgrounds and Borders module — you might think that it makes logical sense for the background-color and border-color properties to be defined in this module. And you'd be right.</p>
</section>
<section class="main-section" id="external_stylesheet">
<header> <h3> External Stylesheet </h3></header>
<p> An external stylesheet contains CSS in a separate file with a .css extension. This is the most common and useful method of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them with the same CSS stylesheet. In the Getting started with CSS, we linked an external stylesheet to our web page.
You reference an external CSS stylesheet from an HTML <link> element: The href attribute of the <link> element needs to reference a file on your file system. In the example above, the CSS file is in the same folder as the HTML document, but you could place it somewhere else and adjust the path. Here are three examples:</p>
</section>
<section class="main-section" id="internal_stylesheet">
<header> <h3> Internal Stylesheet </h3> </header>
<p> An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a style element contained inside the HTML head.
<p>The HTML for an internal stylesheet might look like this:
In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files.</p>
<p>But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.</p>
</section>
<section class="main-section" id="inline_styles">
<header> <h3> Inline Styles </h3></header>
<p>Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute. The implementation of an inline style in an HTML document might look like this:
<ul>
<li>Inline CSS has the highest priority.</li>
<li>It is the best</li>
<li>33</li>
<li>44</li>
<li>22</li>
</ul>
<!-- How can i solve the misinterpretation?
Found a solition for that. If i embed each misinterpreptable part inside span elements then computer will not get them as whole and interprept them as different spans. Perfect!-->
<div class="codeline" id="codeline-2"><code> <span><</span>!</span><span>DOCTYPE</span> <span>html></span> </code>
<code> <p><span><</spans><span>html></span></p> </code>
<code><span><</span><span>head></span></code>
<br>
<span><</span><span>meta</span> charset="utf-8">
<br>
<span><</span><span>title></span> My CSS experiment <span><</span><span>/title></span>
<br>
<span><</span><span>/head></span>
<br>
<span><</span><span>body></span>
<br>
<span><</span><span>h1</span> style="color: blue;background-color: yellow;border: 1px solid black;"Hello World!"</h1>
<span><</span>p style="color:red;">This is my first CSS example<span><</span>/p>
<br>
<span><</span><span>/body></span>
<br>
<code><span><</span><span>/html></span> </code> </div>
Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.
There are a few circumstances where inline styles are more common. You might have to resort to using inline styles if your working environment is very restrictive. For example, perhaps your CMS only allows you to edit the HTML body. You may also see a lot of inline styles in HTML email to achieve compatibility with as many email clients as possible.
</p>
</section>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>
My CSS code:
* {
margin: 0;
padding: 0;
}
body {
background-color: #F7F5F2;
}
#navbar {
position: fixed;
display: flex;
flex-direction: column;
text-align: center;
width: 300px;
height: 100%;
border-right: 1px solid white;
font-size: 1.2rem;
background-color: #5D8BF4;
padding: 5px 5px;
}
#header {
font-size: x-large;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
background-color: #5D8BF4;
align-items: center;
color: #fff;
margin-bottom: 100px;
}
.nav-links {
display: flex;
align-items: center; /* aligns cross axis */
justify-content: center; /* aligns main axis */
height: 50px;
background-color: #5D8BF4;
color: #fff;
}
.navbar-header:hover {
text-decoration: underline;
cursor:pointer;
}
a {
text-decoration: none;
color: #fff;
}
li {
margin-left: 30px;
}
main {
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 1rem;
position: absolute;
margin-left: 310px;
height: 3000px;
}
h1 {
margin: 10px;
}
h3 {
margin: 10px;
}
section {
padding: 20px;
}
p {
font-size: large;
margin-left:10px;
color: black;
}
hr {
border: 1px solid #fff;
border-bottom: 0px;
}
.codeline {
padding: 10px;
margin: 20px 0 10px 50px;
width: 500px;
height: 100px;
background-color: gray;
border-radius: 5px;
}
#codeline-2 {
width: 50%;
height: 300px;
border-radius: 5px;
}
@media(max-width:600px) {
#navbar {
position: fixed;
display: flex;
flex-direction: column;
text-align: center;
width: 150px;
height: 100%;
border-right: 1px solid white;
font-size: 1.2rem;
background-color: #5D8BF4;
padding: 5px 5px;
}
main {
position: static;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 1rem;
margin-left: 150px;
height: 1800px;
}
#codeline-2 {
width: 80%;
height: 300px;
border-radius: 5px;
}
}
