Hello,
I am facing issues while coding the media query part. When width of my screen is small i am able to shift the nav bar to top, but when i click on Nav links the content is appearing over my nav bar. Have tried to give Z-index of nav bar a higher value and the main part z-index of lower value but still the content appears above my nav bar when my screen width is less than 800px.
Requesting for help as i am unable to proceed
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
*{
font-family:Poppins,Arial;
}
body{
background-color:rgba(185, 176, 207,0.15);
}
p,ul,li,a,h1,code,h2{
margin:0;
padding:0;
}
.navbar_class{
display:flex;
position:fixed;
top:0;
left:0;
height:100%;
width:250px;
border-right:1.4px dotted black;
flex-direction:column;
background-color:rgba(185, 176, 207,0.2);
}
#navbar header{
text-align:center;
font-size:30px;
color:rgb(55, 36, 106);
margin-bottom:15px;
margin-top:15px;
font-weight:bold;
}
#navbar ul{
height:88%;
list-style:none;
overflow-y:auto;
}
#navbar li:first-of-type{
border-top:1px dotted rgb(82, 69, 110);
}
#navbar li{
padding-top:12px;
padding-bottom:12px;
text-align:center;
font-size:14px;
border-bottom:0.5px dotted rgb(82, 69, 110);
transition:background-color 0.5s;
}
#navbar a{
text-decoration:none;
color:rgb(55, 36, 106);
cursor:pointer;
}
#navbar li:hover{
background-color:rgba(143, 122, 133,0.3);
}
#main-doc{
margin-left:260px;
}
.section_header{
font-size:33px;
padding:10px 10px;
color:rgb(55, 36, 106);
}
#main-doc p{
margin-left:2em;
padding-top:3px;
}
#main-doc ul{
margin-left:5em;
}
.outer_code_box{
background-color:rgba(185, 176, 207,0.15);
margin-left:3em;
padding:8px 8px;
margin-top: 0.8em;
border-radius:3px;
}
.inner_code_box{
margin-left:4em;
background-color:rgba(185, 176, 207,0.2);
z-index:100;
margin-top:5px;
margin-bottom:5px;
}
#main-doc h2{
font-size:17px;
font-weight:normal;
color:rgb(55, 36, 106);
}
#main-doc h1{
font-size:17px;
font-weight:normal;
color:rgb(55, 36, 106);
}
#main-doc ul{
list-style:none;
}
#main-doc li::before{
content:"\2022";
color:rgb(55, 36, 106);
font-weight:bold;
margin-right:10px;
width:2rem;
}
code{
display:block;
border-left:4px solid rgb(127, 113, 168);
color:black;
border-radius:4px;
padding:8px 8px;
font-family: 'Courier Prime', monospace;
}
.comment{
color:rgb(112,112,112);
font-style:italic;
}
.text_highlights{
font-weight:bold;
}
@media (max-width:800px) {
.navbar_class{
display:flex;
position:fixed;
top:0;
left:0;
width:100%;
height:250px;
border-bottom:1.4px dotted black;
flex-direction:column;
background-color:rgba(185, 176, 207,0.2);
z-index:100;
}
#main-doc{
z-index:1;
margin-top:300px;
margin-left:20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML-CSS Documentation Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Poppins&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body style="padding-bottom: 15px;">
<header>
<nav id="navbar" class="navbar_class">
<header>Java Documentation</header>
<ul class="nav_ul">
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#Java_Quickstart">Java Quickstart</a></li>
<li><a class="nav-link" href="#Java_Syntax">Java Syntax</a></li>
<li><a class="nav-link" href="#Java_Comments">Java Comments</a></li>
<li><a class="nav-link" href="#Java_Variables">Java Variables</a></li>
<li><a class="nav-link" href="#Java_DataTypes">Java DataTypes</a></li>
<li><a class="nav-link" href="#Java_Strings">Java Strings</a></li>
<li><a class="nav-link" href="#Java_Booleans">Java Booleans</a></li>
<li><a class="nav-link" href="#If..else_Statement">If..else Statement</a></li>
<li><a class="nav-link" href="#While_Loop">While Loop</a></li>
<li><a class="nav-link" href="#Java_Arrays">Java Arrays</a></li>
<li><a class="nav-link" href="#Java_Methods">Java Methods</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
</header>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header class="section_header">Introduction</header>
<p>Java is a popular programming language, created in 1995. It is owned by Oracle, and more than 3 billion devices run Java. It is used for
Mobile applications (specially Android apps), Desktop applications, Web applications, Web servers and application servers, Games, Database connection and much more.</p>
<p>Why Use Java?</p>
<ul>
<li>Java works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc.)</li>
<li>It is one of the most popular programming language in the world</li>
<li>It is easy to learn and simple to use</li>
<li>It is open-source and free</li>
<li>It is secure, fast and powerful</li>
<li>It has a huge community support (tens of millions of developers)</li>
<li>Java is an object oriented language which gives a clear structure to programs and allows code to be reused, lowering development costs</li>
<li>Java is close to C++ and C#, it makes it easy for programmers to switch to Java or vice versa</li>
</ul>
</section>
<section class="main-section" id="Java_Quickstart">
<header class="section_header">Java Quickstart</header>
<p>In Java, every application begins with a class name, and that class must match the filename.
Let's create our first Java file, called Main.java, which can be done in any text editor (like Notepad).
The file should contain a "Hello World" message, which is written with the following code:
</p>
<div class="inner_code_box">
<pre><code> public class Main {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</code></pre>
</div>
<p>Save the code in Notepad as "Main.java". Open Command Prompt (cmd.exe), navigate to the directory where you saved your file, and type "javac Main.java"</p>
<div class="inner_code_box">
<code>C:\Users\Your Name>javac Main.java</code>
</div>
<p>This will compile your code. If there are no errors in the code, the command prompt will take you to the next line. Now, type "java Main" to run the file:</p>
<div class="inner_code_box">
<code>C:\Users\Your Name>java Main</code>
</div>
<p>The output should read:</p>
<div class="inner_code_box">
<code>Hello World</code>
</div>
</section>
<section class="main-section" id="Java_Syntax">
<header class="section_header">Java Syntax</header>
<p>Every line of code that runs in Java must be inside a class. In our example, we named the class Main. A class should always start with an uppercase first letter.
The name of the java file must match the class name. When saving the file, save it using the class name and add ".java" to the end of the filename. </p>
<p>Any code inside the main() method will be executed</p>
<p>Inside the main() method, we can use the println() method to print a line of text to the screen:</p>
<div class="outer_code_box">
<h2>Example</h2>
<h1>Change the value of myNum from 15 to 20:</h1>
<div class="inner_code_box">
<pre><code>public class Main {
public static void main(String[] args) {
System.out.println("Hello World");
}
}</code></pre>
</div>
</div>
</section>
<section class="main-section" id="Java_Comments">
<header class="section_header">Java Comments</header>
<p>Comments can be used to explain Java code, and to make it more readable. It can also be used to prevent execution when testing alternative code.</p>
<p>Single-line comments start with two forward slashes (//). Any text between // and the end of the line is ignored by Java (will not be executed).</p>
<p>This example uses a single-line comment before a line of code:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code><span class="comment">// This is a comment</span>
System.out.println("Hello World");</code></pre>
</div>
</div>
</section>
<section class="main-section" id="Java_Variables">
<header class="section_header">Java Variables</header>
<p>Variables are containers for storing data values.</p>
<p>In Java, there are different types of variables, for example:</p>
<ul>
<li>String - stores text, such as "Hello". String values are surrounded by double quotes</li>
<li>int - stores integers (whole numbers), without decimals, such as 123 or -123</li>
<li>float - stores floating point numbers, with decimals, such as 19.99 or -19.99</li>
<li>char - stores single characters, such as 'a' or 'B'. Char values are surrounded by single quotes</li>
<li>boolean - stores values with two states: true or false</li>
</ul>
<p>To create a variable, you must specify the type and assign it a value:</p>
<div class="outer_code_box">
<h2>Syntax</h2>
<div class="inner_code_box">
<pre><code>type variableName = value;</code></pre>
</div>
</div>
<p>Where type is one of Java's types (such as int or String), and variableName is the name of the variable (such as x or name).
The equal sign is used to assign values to the variable.
</p>
<p>To create a variable that should store text, look at the following example:</p>
<div class="outer_code_box">
<h2>Example</h2>
<h1>Create a variable called name of type String and assign it the value "John":</h1>
<div class="inner_code_box">
<pre><code>String name = "John";
System.out.println(name);</code></pre>
</div>
</div>
<p>You can also declare a variable without assigning the value, and assign the value later:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>int myNum;
myNum = 15;
System.out.println(myNum);</code></pre>
</div>
</div>
<p>Note that if you assign a new value to an existing variable, it will overwrite the previous value:</p>
<div class="outer_code_box">
<h2>Example</h2>
<h1>Change the value of myNum from 15 to 20:</h1>
<div class="inner_code_box">
<pre><code>int myNum = 15;
myNum = 20; <span class="comment">// myNum is now 20</span>
System.out.println(myNum);</code></pre>
</div>
</div>
</section>
<section class="main-section" id="Java_DataTypes">
<header class="section_header">Java DataTypes</header>
<p>Data types are divided into two groups:</p>
<ul>
<li>Primitive data types - includes <span class="text_highlights">byte, short, int, long, float, double, boolean and char</span></li>
<li>Non-primitive data types - such as String, Arrays and Classes (you will learn more about these in a later chapter)</li>
</ul>
</section>
<section class="main-section" id="Java_Strings">
<header class="section_header">Java Strings</header>
<p>Strings are used for storing text.</p>
<p>A String variable contains a collection of characters surrounded by double quotes:</p>
<div class="outer_code_box">
<h2>Example</h2>
<h1>Create a variable of type String and assign it a value:</h1>
<div class="inner_code_box">
<pre><code>String greeting = "Hello";</code></pre>
</div>
</div>
</section>
<section class="main-section" id="Java_Booleans">
<header class="section_header">Java Booleans</header>
<p>Very often, in programming, you will need a data type that can only have one of two values, like:</p>
<ul>
<li>YES / NO</li>
<li>ON / OFF</li>
<li>TRUE / FALSE</li>
</ul>
<p>A boolean type is declared with the boolean keyword and can only take the values true or false:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>boolean isJavaFun = true;
boolean isFishTasty = false;
System.out.println(isJavaFun); <span class="comment">// Outputs true</span>
System.out.println(isFishTasty); <span class="comment">// Outputs false</span></code></pre>
</div>
</div>
<p>A Boolean expression is a Java expression that returns a Boolean value: true or false.
You can use a comparison operator, such as the greater than (>) operator to find out if an expression (or a variable) is true:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>int x = 10;
int y = 9;
System.out.println(x > y); <span class="comment">// returns true, because 10 is higher than 9</span></code></pre>
</div>
</div>
</section>
<section class="main-section" id="If..else_Statement">
<header class="section_header">If..else Statement</header>
<p>Use the if statement to specify a block of Java code to be executed if a condition is true.</p>
<div class="outer_code_box">
<h2>Syntax</h2>
<div class="inner_code_box">
<pre><code>if (condition) {
<span class="comment">// block of code to be executed if the condition is true</span>
}</code></pre>
</div>
</div>
<p>Note that if is in lowercase letters. Uppercase letters (If or IF) will generate an error.</p>
<p>In the example below, we test two values to find out if 20 is greater than 18. If the condition is true, print some text:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>if (20 > 18) {
System.out.println("20 is greater than 18");
}</code></pre>
</div>
</div>
<p>Use the else statement to specify a block of code to be executed if the condition is false.</p>
<div class="outer_code_box">
<h2>Syntax</h2>
<div class="inner_code_box">
<pre><code>if (condition) {
<span class="comment">// block of code to be executed if the condition is true</span>
} else {
<span class="comment">// block of code to be executed if the condition is false</span>
}</code></pre>
</div>
</div>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>int time = 20;
if (time < 18) {
System.out.println("Good day.");
} else {
System.out.println("Good evening.");
}
<span class="comment">// Outputs "Good evening."</span>
</code></pre>
</div>
</div>
</section>
<section class="main-section" id="While_Loop">
<header class="section_header">While Loop</header>
<p>Loops can execute a block of code as long as a specified condition is reached.Loops are handy because they save time, reduce errors, and they make code more readable.
The while loop loops through a block of code as long as a specified condition is true:</p>
<div class="outer_code_box">
<h2>Syntax</h2>
<div class="inner_code_box">
<pre><code>while (condition) {
<span class="comment">// code block to be executed</span>
}</code></pre>
</div>
</div>
<p>The condition test occurs before statement in the loop is executed. If the condition returns true, statement is executed and the condition is tested again. If the condition returns false, execution stops and control is passed to the statement following while.</p>
<p>In the example below, the code in the loop will run, over and over again, as long as a variable (i) is less than 5:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>int i = 0;
while (i < 5) {
System.out.println(i);
i++;
}</code></pre>
</div>
</div>
<p class="note">Note: Do not forget to increase the variable used in the condition, otherwise the loop will never end!</p>
<p>The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.</p>
<div class="outer_code_box">
<h2>Syntax</h2>
<div class="inner_code_box">
<pre><code>do {
<span class="comment">// code block to be executed</span>
}
while (condition);</code></pre>
</div>
</div>
<p>The example below uses a do/while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>int i = 0;
do {
System.out.println(i);
i++;
}
while (i < 5);</code></pre>
</div>
</div>
</section>
<section class="main-section" id="Java_Arrays">
<header class="section_header">Java Arrays</header>
<p>Arrays are used to store multiple values in a single variable, instead of declaring separate variables for each value.</p>
<p>To declare an array, define the variable type with square brackets:</p>
<div class="outer_code_box">
<h2>Syntax</h2>
<div class="inner_code_box">
<pre><code>String[] cars;</code></pre>
</div>
</div>
<p>We have now declared a variable that holds an array of strings. To insert values to it, we can use an array literal - place the values in a comma-separated list, inside curly braces:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>String[] cars = {"Volvo", "BMW", "Ford", "Mazda"};</code></pre>
</div>
</div>
<p>To create an array of integers, you could write:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>int[] myNum = {10, 20, 30, 40};</code></pre>
</div>
</div>
<p>You access an array element by referring to the index number.This statement accesses the value of the first element in cars:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>String[] cars = {"Volvo", "BMW", "Ford", "Mazda"};
System.out.println(cars[0]);
<span class="comment">// Outputs Volvo</span></code></pre>
</div>
</div>
<p>To change the value of a specific element, refer to the index number:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>cars[0] = "Opel";</code></pre>
</div>
</div>
<p></p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>String[] cars = {"Volvo", "BMW", "Ford", "Mazda"};
cars[0] = "Opel";
System.out.println(cars[0]);
<span class="comment">// Now outputs Opel instead of Volvo</span></code></pre>
</div>
</div>
</section>
<section class="main-section" id="Java_Methods">
<header class="section_header">Java Methods</header>
<p>A method is a block of code which only runs when it is called. You can pass data, known as parameters, into a method. Methods are used to perform certain actions, and they are also known as functions.</p>
<p>A method must be declared within a class. It is defined with the name of the method, followed by parentheses (). Java provides some pre-defined methods, such as System.out.println(), but you can also create your own methods to perform certain actions:</p>
<div class="outer_code_box">
<h2>Example</h2>
<div class="inner_code_box">
<pre><code>public class Main {
static void myMethod() {
<span class="comment">// code to be executed</span>
}
}</code></pre>
</div>
</div>
<p>Example Explained</p>
<ul>
<li>myMethod() is the name of the method</li>
<li>static means that the method belongs to the Main class and not an object of the Main class. You will learn more about objects and how to access methods through objects later in this tutorial.</li>
<li>void means that this method does not have a return value.</li>
</ul>
</section>
<section class="main-section" id="Reference">
<header class="section_header">Reference</header>
<p>All the documentation in this page is taken from <a href="https://www.w3schools.com/java/java_intro.asp" target="a_blank">W3 Schools</a></p>
</section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: