.active

[OBXKH]

Hello,

please see

About Buck Island

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

<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

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

cannot get

<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

https://forallthetime.com/BI23

it DOESNT auto-fill, as it usualy does at that point

help, please

 

[VBService]

cannot get

<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

I did this manually by the DevTools and ... ta, da

 

[VBService]

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

<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

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 */
}

 

[VBService]

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 ]

<div class="box brown">Lorem</div>
<div class="box green">Lorem</div>
<div class="box pink">Lorem</div>

.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%);
  }

 

[OBXKH]

In your code you forgot to write the name of the image file in fully: IMAGES/SANY0432-300x225.jpg
View attachment 2792

I did this manually by the DevTools and ... ta, da
View attachment 2793

thanks! i am wrapping up a project here.... fully intend to learn dv tools right after! i already have a suggestion to guide me! wish me luck

 

[OBXKH]

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

i hope i am clear!

thanks!

 

[Saul H.]

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.

 

[OBXKH]

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!

 

[Saul H.]

I will review it in steps:
CSS Approach:
Refer to query selector.
A:hover or A:active depending on objective.
Specify conditional manipulations.