.active

Joined
Feb 15, 2021
Messages
99
Reaction score
0
Hello,

please see


i tried everything i could think of here

my goal is to have the current link have a certain / different background when that page is viewed

Code:
<li><a href="rentals.html" class="active">Rentals</a></li>

 .active {
  background-color: #514fdb; ;
 }

this is not working :(

also on https://forallthetime.com/BI23/index.html

line 59, having trouble putting an image into my HTML here

this works

Code:
<img src="https://forallthetime.com/drop2/IMAGES/1.jpg" alt="nature scene">

cannot get

Code:
<img src="https://forallthetime.com/BI23/IMAGES/SANY0432-300x225.jpg" alt="chair">

to work for me :(

i have succesfuly FTP my IMAGES to /public_html/BI23/IMAGES in filezila, so you can see how i am lost


i have an IMAGES folder but cannot get an image in tht folder to work

also, when i get to
Code:
https://forallthetime.com/BI23
it DOESNT auto-fill, as it usualy does at that point

help, please
 
Joined
Jul 4, 2023
Messages
356
Reaction score
41
cannot get

Code:
<img src="https://forallthetime.com/BI23/IMAGES/SANY0432-300x225.jpg" alt="chair">
In your code you forgot to write the name of the image file in fully: IMAGES/SANY0432-300x225.jpg
1708500845734.png


I did this manually by the DevTools and ... ta, da :cool:
1708501481507.png
 
Last edited:
Joined
Jul 4, 2023
Messages
356
Reaction score
41
tried everything i could think of here

my goal is to have the current link have a certain / different background when that page is viewed

Code:
<li><a href="rentals.html" class="active">Rentals</a></li>

.active {
background-color: #514fdb; ;
}
this is not working :(
is working fine, but you used unfortunately the same background color for ;)
CSS:
nav {
    display: flex;
    justify-content: end;
    background-color: #514fdb; /* :P */
    font-size: 26px;
    font-family: "Lemon", serif;
    font-weight: 400;
    font-style: normal;
}

.active {
    background: #514fdb; /* :P */
}
 
Joined
Jul 4, 2023
Messages
356
Reaction score
41
See how easy it is to obtain shades of the selected color using the hsl method in css.

HSL(): [ 1 ] [ 2 ]

[ working code on-line ]
HTML:
<div class="box brown">Lorem</div>
<div class="box green">Lorem</div>
<div class="box pink">Lorem</div>
CSS:
.box {
    width: 100px;
    aspect-ratio: 1; /* height: 100px */
    padding: 1rem;
    margin: 2rem;
    text-align: center;
    font: 400 normal 1.4rem/1 system-ui, monospace;
  }
  .brown {
    border: 5px solid hsl(33, 100%, 30%);
    background-color: hsl(33, 100%, 45%);
    color: hsl(33, 100%, 80%);
  }
  .green {
    border: 5px solid hsl(136, 100%, 30%);
    background-color: hsl(136, 100%, 45%);
    color: hsl(136, 100%, 80%);
  }
  .pink {
    --color: 334; /* using css variable */
    border: 5px solid hsl(var(--color), 100%, 30%);
    background-color: hsl(var(--color), 100%, 45%);
    color: hsl(var(--color), 100%, 80%);
  }

1708518172541.png
 
Last edited:
Joined
Feb 15, 2021
Messages
99
Reaction score
0
follow up

please see

https://forallthetime.com/BI-900/index.html 2

on the sidebar nav, i want the link to have a solid white background and black text when that page is being viewed… then to another page and that link has a solid white background and black text when being viewed etc

i thought .active in my CSS would do that, cannot makeit work that way
:frowning:


i hope i am clear!

thanks!
 
Joined
Aug 22, 2023
Messages
41
Reaction score
7
Refer to .active, and use conditional occurrences to execute this: a:hover, for instance.
Refer to in Javascript DOM Manipulation, using conditional occurrences: mouseover, addEventListener, click, onClick. Manipulate the style when this transpires.
 
Joined
Feb 15, 2021
Messages
99
Reaction score
0
to be honest, i know almost nothing of JavaScript :(
Refer to .active, and use conditional occurrences to execute this: a:hover, for instance.
Refer to in Javascript DOM Manipulation, using conditional occurrences: mouseover, addEventListener, click, onClick. Manipulate the style when this transpires.

i simply dont follow

thanks for your time, though :)

could you simplify your reponse? talking to a novice here

maybe provide the code AND an explanation of your thoughts?

this maybe helpful, getting the code i need and a lesson

again, thanks!
 
Joined
Aug 22, 2023
Messages
41
Reaction score
7
I will review it in steps:
CSS Approach:
Refer to query selector.
A:hover or A:active depending on objective.
Specify conditional manipulations.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top