Currently doing a Web Dev assignment, wanted to have my navbar a different color for the set page so that it does not change when clicked but the page loads. Not sure how to change this, hopefully there is someone to help me out, looking for a quick answer because it is for a assingment.
Thanks in advance!
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #6699cc;
padding: 20px;
color: #e6e6e6;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
color: #993333;
}
/* When the nav bar is selected */
.topnav
{
color: white;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Page 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style1.css">
<style></style>
</head>
<body>
<div class="header">
<h1>Page 1</h1>
</div>
<div class="topnav">
Home
Page 1
Page 2
Page 3
Link
</div>
</style>
</head>
<body>
<p>Select what background you'd like to use here!</p>
<button id="aqua">Dark Cyan</button>
<button id="green">Green</button>
<button id="slate_gray">Slate Gray</button>
<button id="reset">Reset</button>
<script>
document.querySelector('#aqua').onclick = function() {
document.querySelector('body').style.backgroundColor = '#008B8B';
}
document.querySelector('#green').onclick = function() {
document.querySelector('body').style.backgroundColor = '#99ff99';
}
document.querySelector('#slate_gray').onclick = function() {
document.querySelector('body').style.backgroundColor = '#708090';
}
document.querySelector('#reset').onclick = function() {
document.querySelector('body').style.backgroundColor = '#F8F8FF';
}
</script>
The CSS code:
A quick fix would be to create a .current class. Then apply the current class to the link of the page that you are on.. Something like
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #6699cc;
padding: 20px;
color: #e6e6e6;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
color: #993333;
}
.topnav .current {
background:gray;
color: black;
}
/* When the nav bar is selected */
.topnav
{
color: white;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Page 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style1.css">
<style></style>
</head>
<body>
<div class="header">
<h1>Page 1</h1>
</div>
<div class="topnav">
Home
Page 1
Page 2
Page 3
Link
</div>
</style>
</head>
<body>
<p>Select what background you'd like to use here!</p>
<button id="aqua">Dark Cyan</button>
<button id="green">Green</button>
<button id="slate_gray">Slate Gray</button>
<button id="reset">Reset</button>
<script>
document.querySelector('#aqua').onclick = function() {
document.querySelector('body').style.backgroundColor = '#008B8B';
}
document.querySelector('#green').onclick = function() {
document.querySelector('body').style.backgroundColor = '#99ff99';
}
document.querySelector('#slate_gray').onclick = function() {
document.querySelector('body').style.backgroundColor = '#708090';
}
document.querySelector('#reset').onclick = function() {
document.querySelector('body').style.backgroundColor = '#F8F8FF';
}
</script>
The CSS code:
HTML - HOME PAGE (index.html)
<div class="topnav">
Home
Page 2
Page 3
Link
</div>
Then on the next page you add the class to the next link. So for page 2 it will look like this
HTML - PAGE 2 (page2.html)
<div class="topnav">
Home
Page 2
Page 3
Link
</div>
Removed the current class from home link and added it to the second link. And on each page you add the class to the link of the page you are on.
Related
For my website I want to make a responsive design for stacking elements under each other. I made this work for the first section (class named withwithout1), but I can't make it work for the class named withwithout2. Keep in mind I want to keep the elements the same way I made them for the larger screen size option.
In short: How can I manage to place the elements under each other in the order I want them to (So text first than the image).
/* Withwithout styling */
.withwithout {
height:58rem;
position: relative;
}
.withwithout1 {
display: grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.withwithout1left {
text-align: center;
margin-top: 8rem;
}
.withwithout1left h4 {
color: var(--color-withwithout);
}
.withwithout1left h2 {
margin: 0.2rem 0rem 1rem;
}
.withwithout1right {
text-align: center;
}
.withwithout1right img {
max-width: 65%;
}
.withwithout2 {
display: grid;
margin-top: 2rem;
position: relative;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.withwithout2left {
text-align: center;
}
.withwithout2left img {
max-width: 60%;
}
.withwithout2right {
text-align: center;
margin-top: 2rem;
}
.withwithout2right h4 {
color: var(--color-withwithout);
}
.withwithout2right h2 {
margin: 0.2rem 0rem 1rem;
}
#media screen and (max-width: 1070px) {
.startingbackground_div p {
font-size: 0.93rem;
}
.startingbackground_div h1 {
font-size: 2rem;
}
.startingbackground2_left h2 {
font-size:1.59rem;
}
.startingbackground2_left p {
font-size:0.93rem;
width:100%;
margin-left:3rem;
}
.withwithout1left h2{
font-size: 1.75rem;
}
}
#media screen and (max-width: 890px) {
.nav_menu {
display:none;
}
.login_nav {
display:none;
}
.hamburger {
display:flex;
}
.nav_container {
padding-left: 0.3rem;
margin-left: auto;
}
.startingbackground_container {
display:block;
margin-top: 9rem;
}
.startingbackground_div p {
font-size: 1.1rem;
}
.startingbackground_div h1 {
font-size: 2.8rem;
}
.startingbackground {
height: 90vh;
}
.solutions {
margin-top: 2rem;
overflow:hidden;
}
.solutions_right img {
display:flex;
margin:auto;
margin-top:5rem;
width:77%;
height:auto;
}
.startingbackground2 {
height:18rem;
}
.startingbackground2 h2 {
margin-top: 4rem;
font-size:1.04rem;
}
.startingbackground2 p {
font-size:0.79rem;
}
.startingbackground2_right {
margin-top:4.5rem;
max-width: 70%;
}
.withwithout {
height:100rem;
}
.withwithout1 {
position: relative;
display: inline-block;
text-align: center;
}
.withwithout1left h2 {
font-size:1.4rem;
}
.withwithout1right {
max-width: 60%;
margin-top: 3rem;
margin-left: 7rem;
}
.withwithout2 {
position: relative;
display: inline-block;
text-align: center;
}
.withwithout2right {
margin-top:-35rem;
}
.withwithout2left {
margin-top:16rem;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<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=Open+Sans:wght#400;500;600&display=swap" rel="stylesheet">
<!-- Animations -->
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<section class="withwithout">
<div class="container withwithout_container">
<div class="withwithout1">
<div class="withwithout1left">
<h4>Without Draftflex</h4>
<h2>Many tools can be required for the <br> draft-to-deal proces</h2>
<p>In many projects, all kinds of tools can be helpful. <br> However, the combination of these application is what <br> is desired. Using many different tools can interfere <br> with an easy workflow and may decrease efficiency <br> and productivity.</p>
</div>
<div class="withwithout1right">
<img src="/Icons/replaces.png" alt="replaces">
</div>
</div>
<div class="withwithout2">
<div class="withwithout2left">
<img src="/Icons/replaces2.png" alt="replaces2">
</div>
<div class="withwithout2right">
<h4>Without Draftflex</h4>
<h2>An integration of these tools is <br> what improves the workflow</h2>
<p>By the use of DraftFlex, the combined <br> process of all these applications is used. <br> This helps boost the performance <br> and competence. An easy workflow is key <br> in every business, and this is what DraftFlex <br> stimulates. </p>
</div>
</div>
</div>
</section>
You can use separate divs instead of making them as nested divs.
then manage their positions
Hello I am new to HTML and CSS, and I was trying to display the contents of a div element when I hover over a li element. So basically what I am trying to do is when I hover over one li element (say: ls1), I want to display dv2. However, my code does not display the contents even when I hover over it. Please help!! Thank you.
const list_dv1 = document.querySelectorAll('.dv1 li');
function show_item() {
list_dv1.forEach((item) =>
item.classList.remove('hovered'));
this.classList.add('hovered');
}
list_dv1.forEach((item) =>
item.addEventListener('mouseover', show_item));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
position: relative;
background-color: black;
height: 100vh;
width: 100%;
}
.dv1 {
background-color: yellow;
cursor: pointer;
}
.dv1 li:hover {
transform: scale(1.2);
}
ul {
list-style-type: none;
display: flex;
}
li {
margin: 20px;
}
.dv2 {
background-color: greenyellow;
color: black;
}
.dv2 {
display: none;
}
.ls1:hover+.dv2 {
display: block;
}
.dv3 {
background-color: yellowgreen;
color: black;
}
<!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">
<link rel="stylesheet" href="styles.css">
<title>Practice Hiding Elements</title>
</head>
<body>
<div class="main">
<div class="dv1">
<ul>
<li class="ls1">Hover over me once</li>
<li class="ls2">Hover over me twice</li>
</ul>
</div>
<div class="dv2">You found me!</div>
<div class="dv3">You found me twice!</div>
</div>
</body>
</html>
Hello I have a problem.
Why my css doesn't work on my head page in html?
Someone can help me the link of my code if you to see the result on run: https://jsfiddle.net/02kf1msd/`.
I use bulma for the style.
I want to have the logo and the menu in the same header line: logo on left and menu nav on right.
HTML Code:
<head>
<meta charset="utf-8">
<title>Oumar Pathe SOW Portfolio </title>
<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="src/css/main.css">
<!--css-->
<!--font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!--font-->
</head>
<!--head-->
<!--body-->
<body>
<!--head-->
<div class="block">
<head class="header">
Oumar Pathé SOW Portfolio
<nav class="header-menu">
Accueil
Apropos
Réalisations et Expériances
Contact
</nav>
</head>
</div>
<!--head-->
CSS Code:
.header header {
width: 100%;
margin-left: 0;
margin-right: 0;
height: 70px;
line-height: 70px;
background-color: rgba( 0 , 0 , 0, 0);
position:fixed;
top: 0;
z-index: 999;
}
.header .header-logo {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
float: left;
margin-left: 30px;
}
.header .header-menu{
float: right;
margin-right: 30px;
}
.header .header-menu a {
margin-right: 15px;
color: #FFFFFF;
}
.header .header-menu a:hover {
color: #3498db;
}
Why my access doesn't apply on this code?
sometimes Bulma style overrides your CSS codes so you will need to use !important after some of your CSS attributes.
second use navbar-end and navbar-start classes to make the logo on left and menu nav on right,
https://bulma.io/documentation/components/navbar/
I'm currently trying to create a spelling quiz as part of a project website using HTML, CSS and JScript.
The concept is: the user is shown a word with two letters missing (shown by the underscores). They then select which answer is right (the three button options) and an alert message should come back on the window to say if they are correct or incorrect.
My idea behind the code I wrote so far was to have an event listener on the button that when clicked would trigger the alert either saying correct or incorrect if I have programmed it to be so.
My code isn't working, could anyone help me?
var aChoice = document.getElementById("S1");
aChoice.addEventLister("Click", C1)
function C1 ()
{
alert("Correct");
}
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
#S1 {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class ="Albl">Answer:
<button id="S1">a i</button>
<button id="S1">i a</button>
<button id="S1">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
(More code I was intending to write on Javascript here for logic purposes.)
var bChoice = document.getElementById("S2");
bChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
var cChoice = document.getElementById("S3");
cChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
1.You cannot have more than one id="S1"! Since the id attribute is unique for the entire html document. In your case, it is better to use the class. Since there may be more buttons with answer options, like this:
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
2.Now on js ... I corrected your code. Also, you need to change the method of accessing elements (buttons). Like this:
var aChoice = document.querySelector(".btn");
3.Now everything is ready, but not completely! You need the logic for determining the correctness of the choice of the option by buttons.
var aChoice = document.querySelectorAll(".btn");
aChoice.forEach(function(aChoice_current, index) {
aChoice_current.addEventListener('click', function(){
if (index == 0) {
console.log('The answer is correct! :)');
} else {
console.log('The answer is not correct! :(');
}
})
})
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
.btn {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
MY issue is simple.
I have a header-box with 3 divs inside;
A background image (relative)
a overlay; background-color with opacity (relative)
and a text.
The issue is that i can't position my text in the middle;
I created a javascript function handeling the issue, but the script doesn't do anything
The only way to set the top, left value for the element is to write it into the css file.
Any guesses? (And no the JS / JQuery code did work; tested it without the div-boxing madness)
Here are the files:
Index.html:
<head>
<title> Website </title
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/fontboxes.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<!-- jQuery Einbindung -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function adjust() {
getElementById("mediumfontbox").style.top = 125;
}
</script>
</head>
<body>
<header>
<img src="img/header1.jpg"> </img>
<div id="overlay1"></div>
<div class="mediumfontbox" onload="adjust()"> Inspirational Quote </div>
</header>
<div class="main"></div>
<footer id="overlay1">
<div id="copy">Copyright by Vancold</div>
</footer>
</body>
header.css
header
{
width:100%;
height:100%;
}
header > *
{
position:absolute;
}
img
{
z-index: 0;
width: 100%;
height:100%;
top: 0px; left:0px;
}
header > .mediumfontbox
{
z-index: 2;
}
header > #overlay1
{
z-index:1;
height: inherit;
}
header > #overlay2
{
z-index:1;
height: inherit;
}
header > #overlay3
{
z-index:1;
height: inherit;
}
fontboxes.css
.smallfontbox
{
width: 125px;
height: 125px;
}
.mediumfontbox
{
width: 250px;
height: 250px;
}
.bigfontbox
{
width: 500px;
height: 500px;
}
.font
{
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 32px;
}
layout.css
* {
margin: 0px;
padding: 0px;
}
#overlay1
{
background: blue;
opacity: 0.125;
width: 100%;
}
#overlay2
{
background: red;
opacity: 0.125;
width: 100%;
}
#overlay3
{
background: green;
opacity: 0.125;
width: 100%;
}
Your script is running in the header of your file, before anything is rendered in the body. Try moving your script to the end of your document body.
The style value for top should be a string with a unit - for example '125px'.
getElementById is a function of document.
onload doesn't apply to div. Put it on body.
#mediumfontbox {
position: absolute;
}
<head>
<script>
function adjust() {
document.getElementById("mediumfontbox").style.top = '125px';
}
</script>
</head>
<body onload="adjust()">
<div id="mediumfontbox">
Inspirational quote
</div>
</body>