I've been attempting to create a navigation bar without much success. My goal is to position the words "Main Page", "About Me", and "Bibliography" with space between them, aligned left, center, and right respectively.
Additionally, I want to change the text color of these words to white. Here's an example of what it currently looks like, along with my code:
https://i.sstatic.net/nyco1.png
<!DOCTYPE html>
<html>
... (remaining unchanged HTML/CSS code)
</html>
There are multiple solutions available, but one effective solution involves using flexbox in your CSS. Simply add the following code to your stylesheet:
.navigation {
display: flex;
}
.navigation a {
display: block;
width:33%;
text-align: center;
color: white;
}
Here is a working example of how this code can be implemented:
h1 {
text-align: center;
}
h4 {
color: #00008B;
font-size: 2em;
}
h5 {
text-align: center;
}
body {
background-color: #FAFAFA;
}
.navigation {
color: #ffffff;
list-style-position:
box-sizing: border-box;
margin-left: 0;
padding: 0;
background-color: #000000;
}
.middle {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
.footer {
color: #0000FF;
}
.navigation {
display: flex;
}
.navigation a {
display: block;
width:33%;
text-align: center;
color: white;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Main Page</h1>
<h5>Osirin bin Osiris</h5>
<nav>
<p class="navigation">
<a class="main" href="index.html">Main Page</a>
<a class="about" href="about.html">About Me</a>
<a class="biblio" href="bibliography.html">Bibliography</a>
<p>
</nav>
<h4>History of the Internet</h4>
<img src="ARPAnet.png" alt="ARPAnet diagram" length="607" width="490" class="middle">
<p> The modern day internet arose from the intranet developed by the U.S. military in 1969 (known as ARPAnet). Arpanet connected university computers across the country. It was restricted to sharing research material and was difficult to use.
Despite this, it was the essential foundation for the modern day internet that spans the globe. It’s important to note that the world wide web is not the same thing as the internet. The world wide web is a subset of the internet. It’s a collection of webpages containing images, videos, text, and sounds that are accessed using the http protocol. The best analogy to explain this difference would be to imagine a highway. The internet can be likened to a major highway and the world wide web are passenger car. There are many passenger cars that pass on the highway however; the highway contains more than just cars. It has trucks and vans travelling for business. In the same way, the internet isn’t just used by individuals but also governments, businesses and even satellites communicating with each other using different protocols.
</p>
<h4>How a page is delivered</h4>
<p> There are many things that need to work in order to bring a webpage to a device. These are:
<ul>
<li> Internet connection </li>
<li> Web browser </li>
<li> Server </li>
</ul>
<br>
When a person types in a web address, the operating system connects to a domain name server which will send back the I.P address that matches the text address to the user’s device. As the webpage appears, the user then interacts with the site by sending and receiving requests (i.e. clicking buttons, typing words, looking up images).
<br><br>
Information does not get communicated through the internet as it appears on a website. Instead, the browser breaks down texts, words, and images into small packets of information which are then sent from a computer/smartphone to the router, to a web server and then down fibre optic cables across the globe.
</p>
<footer>
<p class="footer"><b> </b></p>
</footer>
</body>
</html>Here is a snippet of code to help guide you in the right direction. Replace your current .navigation rule with this and add the necessary styles for links:
.navigation {
color: #ffffff;
display: flex;
justify-content: space-between;
/*if you don't want the items to go all the way to the end*/
padding-left: 10px;
padding-right: 10px;
background-color: #000000;
}
.navigation a {
color: white;
}I've been diligently working on my project for about a week now, but I've encountered a small yet incredibly frustrating issue that has me stumped. The problem lies in the functionality of the responsive sidemenu with multiple dropdowns that I ha ...
I attempted to merge two different navigation bars, one sticky and the other responsive. The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Curr ...
When using "/", it refers to the root directory. This can be seen in code like: <link href="/Styles/Order.css" rel="stylesheet" /> This specifies a file path that is relative to the root directory. However, when dealing with server controls, you m ...
I've been experimenting with an Ajax image uploader that I found on this website. Currently, I have managed to create duplicate preview images: one displayed under the input field and the other elsewhere on the page labeled as "this what you chose". H ...
It might be a bit confusing, so let me clarify. I'm working on a form where users input a ticket and it gets assigned to a technician based on the service they offer. I have 3 text fields: username, email, and description of the problem. The next fie ...
What happens when a detail width is set to <td width="10"...> and something wider, like a picture that is 20 pixels wide, is placed in that detail? ...
As a PHP novice, my goal is to integrate a daily meditation feature that corresponds to the current day. For example, on January 1st, I would like to display content from 1_1.php, and on the following days, it should load 1_2.php, 1_3.php, continuing unti ...
I am trying to retrieve the content of a string that I have imported using HTML from within another script. To include the text file in question in the html file: <script src="shaders/fragmentshader.fs" id=fragmentshader></script> After impo ...
When I make an unauthenticated GET request using AJAX, my server is supposed to redirect my application. However, when I receive the redirect (a 303 with /login.html as the location), the response tab in the Firebug console shows me the full HTML of the lo ...
I'm attempting to design a card where an image pops out of the card. I've tried using z-index, but it doesn't seem to be working as expected. Here is the code I have: <div class="flex flex-col"> <div class=&quo ...
I'm having trouble changing the color of my navbar to blue in certain parts. I've tried using background: lightblue;, but for some reason, two sections remain white. How can I make them completely blue? (see screenshot below) Any help would be ap ...
Is there a way to display different images based on whether a link is active or not? <router-link to="/"> <img src=" :active = isExactActive ? pic_active.png : pic_inactive.png}}" /> //Something along these lines ...
I've attempted to add a unique style to all divs with the same class within a parent div, except for the last one. Strangely, my code doesn't seem to work as expected for this particular case. Can anyone spot what I might be overlooking? Right no ...
Hi everyone, I could really use some assistance with a project I'm currently working on. As someone who is new to programming, I am facing a challenge. My goal is to showcase the contents of a plain text file on a webpage. This text file, titled titl ...
Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...
I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...
I am currently using a text editor that utilizes wysihtml5. I suspect the text editor is embedded within an iframe. My goal is to capture the key up event inside the text editor and prevent scrolling within it. Below is the code snippet that loads the tex ...
I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...
I am in need of creating a new element at the end of another element. For instance, let's say I have this element: <div id="elmtobetrig">Element that should be followed by another element when the user hits enter after this text. <! ...
Is there a way to have a div with an opacity of 40%, but make the text inside the div show with an opacity of 100%? #box { Background-color:#000; Opacity:40%; } ...