Tell us what’s happening:
I’m having problems with putting the navbar on the left corner and on the right the text. I’ve tried all type of positioning, overflow, margin, top, left and these things but nothing. the navbar is fixed there and the text stay down below. Could you please help me? (I’m having problems with this issue, I’ve already finished this work, I wanted only to do my site similar to the example).
thank you
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<hmtl lang='en'>
<head>
<link rel='stylesheet' href='styles.css' />
</head>
<body>
<nav id='navbar'>
<header id='nav-header'>Pozzuoli Solfatara's Documentation</header>
<ul id='ul-navbar'>
<li><a class='nav-link' href='#Introduction'>Introduction</a></li>
<li><a class='nav-link' href='#Terra_dei_fuochi'>Terra dei fuochi</a></li>
<li><a class='nav-link' href='#Ringell'>Ringell</a></li>
<li><a class='nav-link' href='#Lota'>Lota</a></li>
<li><a class='nav-link' href='#Villacchione'>Villacchione</a></li>
</ul>
</nav>
<main id='main-doc'>
<section class='main-section' id='Introduction'>
<header>Introduction</header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
</section>
<section class='main-section' id='Terra_dei_fuochi'>
<header>Terra dei fuochi</header>
<p>This guide assumes you have the following basic background:</p>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<code>var x = 42.</code>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
</section>
<section class='main-section' id='Ringell'>
<header>Ringell</header>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
</section>
<section class='main-section' id='Lota'>
<header>Lota</header>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<code>var x = 42.</code>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
</section>
<section class='main-section' id='Villacchione'>
<header>Villacchione</header>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
<code>var x = 42.</code>
<code>var x = 42.</code>
</section>
</main>
</body>
/* file: styles.css */
body {
display: flex;
flex-direction: row;
font-family: arial;
line-height: 1.5;
}
header {
font-size: 1.6em;
}
#navbar {
width: 25%;
height: 100vh;
margin: 20px;
}
#nav-header {
text-align: center;
}
#main-doc {
width: 75%;
height: 100vh;
font-weight: thin;
}
.nav-link {
text-decoration: none;
}
code {
background-color: #f8f877
}
#ul-navbar {
list-style-type: none;
}
#ul-navbar li {
border: 1px solid black;
padding: 15px;
background-color: rgb(242, 237, 237);
}
style
#ul-navbar li:link {
color: dark grey;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
