Horse Eden : Den's CSS Guide: Overlapping images + CSS essentials

Year: 192 Season: Fall

$: 0

Forecast:

Afternoon Showers, Sleet Possible

Forecast:

Wed 01:28pm

Stables Online: 125

Azure Estates

01:24:59 Lillie Pt 4

In need of a Quest stud? I've got a couple EEE-WEE Wb stallions Packed with color! Some homo as well! Tobiano, Splash Whites, Frame and better yet most dont have Sabino! Best part? They're breeding fees are under 1k ebs!
-HEE Click-

Green River Stables

01:20:48

AA mares for sale
-HEE Click-

3 Upgrades available
1mo - 100k
3mo - 175k
First come first serve, pm me :)

Sweet Valley

01:16:55 I Buy Brindles!!!!!!

-HEE Click-

Come And Join SVB! A random item will be gifted to everyone who joins as a welcome gift!

Port Royal Equines

01:05:45 ISH Bravery 4 Sale!

-HEE Click-
(I)SH straws! EWW+, Bravery, and retired ABLB.

-HEE Click-
New chonk set at auction!

-HEE Click-
EEE+ mares at brood. 4k. Some are w producers!

Glacier Bay Cove

01:00:35 Arctic Katz

Sherpa map in my store

Fantasy Horses

12:53:48 Bravery + AD ISH

Auction! Discounted Quality!
- ISH, TB, and WB!
- P+ rated
- EEE and Elite bravery!
- AD, SD, and bravery
- Wild captures, some maps used!
- Ages 2 & 3!
- Rare color like apricot and dapple grey!
- Mostly mares, a few stallions
- 1k to 2k ONLY!
- Ends on the 25th at 12pm GT!
-HEE Click-

Rancho Redondo

12:45:17 Trini

AUCTION. TB Rated Color Fillies and Mares 200 sb (for most of them lol)

-HEE Click-

Horse Haven Stables

12:37:43 HHS⎹ Lyla

-HEE Click-
EEE-WWW Mares auction! Includes:
-Wild PEE-E SH Mare
-EEW/EWE/WEE SH and ISH Mares
-EWW SH Mare
-WWW ISH Mare
Come check 'em out! Need them gone :)

pandemoniu_m

12:30:23 pheezy

-HEE Click-

EWE/EEE I/SH Colts
PEE/PPE Combo mares + fillies
Unbred W Bravery Mares

-HEE Click-

Fluffy's Cosy Home

12:23:05 Fluffy

I have:
*WWW/WW Straws
*Studs
*Items in my store
*Decors
*Sale horses
-HEE Click-

You must be a registered member for more
than 1 day before you can use our chatbox.

Rules Hide
You are in: Sales
View Main Chat

Azure Estates

01:24:59 Lillie Pt 4

Green River Stables

01:20:48

AA mares for sale
-HEE Click-

3 Upgrades available
1mo - 100k
3mo - 175k
First come first serve, pm me :)

Sweet Valley

01:16:55 I Buy Brindles!!!!!!

-HEE Click-

Come And Join SVB! A random item will be gifted to everyone who joins as a welcome gift!

Port Royal Equines

01:05:45 ISH Bravery 4 Sale!

-HEE Click-
(I)SH straws! EWW+, Bravery, and retired ABLB.

-HEE Click-
New chonk set at auction!

-HEE Click-
EEE+ mares at brood. 4k. Some are w producers!

Glacier Bay Cove

01:00:35 Arctic Katz

Sherpa map in my store

Fantasy Horses

12:53:48 Bravery + AD ISH

Rancho Redondo

12:45:17 Trini

AUCTION. TB Rated Color Fillies and Mares 200 sb (for most of them lol)

-HEE Click-

Horse Haven Stables

12:37:43 HHS⎹ Lyla

-HEE Click-
EEE-WWW Mares auction! Includes:
-Wild PEE-E SH Mare
-EEW/EWE/WEE SH and ISH Mares
-EWW SH Mare
-WWW ISH Mare
Come check 'em out! Need them gone :)

pandemoniu_m

12:30:23 pheezy

-HEE Click-

EWE/EEE I/SH Colts
PEE/PPE Combo mares + fillies
Unbred W Bravery Mares

-HEE Click-

Fluffy's Cosy Home

12:23:05 Fluffy

I have:
*WWW/WW Straws
*Studs
*Items in my store
*Decors
*Sale horses
-HEE Click-

You must be a registered member for more
than 1 day before you can use our chatbox.

Refresh

Forums

→ Horse Eden is a fun game! Sign Up Now! ←

Forums > Member Help > Guides

1 2 3

Den's CSS Guide: Overlapping images + CSS essentials

July 19, 2020 04:56 PM

Cherry River Elites

Posts: 1000
#742022
Give Award

Thanks so much!

But I have a question. I'm trying to get rid of the header so it's just my dots, but it won't let me remove the default header. How do I do this?

Den's CSS Guide: Overlapping images + CSS essentials

July 19, 2020 05:01 PM

Rocky Creek Ranch

Posts: 1656
#742024
Give Award

Try adding this at the bottom of your code :

.gameheader {
background: none;
border: 0 !important;
}

Den's CSS Guide: Overlapping images + CSS essentials

July 19, 2020 05:12 PM

Cherry River Elites

Posts: 1000
#742026
Give Award

...

That worked perfectly, thank you so much!

I'm in the company of geniuses O.O

Den's CSS Guide: Overlapping images + CSS essentials

August 5, 2020 12:10 AM

Ryshadium RIDs

Posts: 653
#753267
Give Award

Thank you so much for this! I have a question. I am trying to get my header to change when I hover over it. I would like the secondary header (the one that shows when hovered) to be on top of the nav bar like in your tutorial. So I would like to switch from "Horse Eden Eventing" to "Ryshadium RIDs" in the images below. They work indivually, but I can't get the hover figured out. Could you help me, please?

Here are the images:

http://u.cubeupload.com/InkSpren/Screenshot371.png

http://u.cubeupload.com/InkSpren/Screenshot372.png

Here is the code I'm using for the first:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/6aaRyshadiumHEEPaletteH.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

And here is the code for the second image:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/cb9RyshadiumUsernamePal.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

Thank you for your time!

Edited at August 5, 2020 12:14 AM by Ryshadium RIDs

Den's CSS Guide: Overlapping images + CSS essentials

August 6, 2020 06:48 AM

Former Stable

Posts: 0
#754232
Give Award

Ryshadium RIDs said:

Thank you so much for this! I have a question. I am trying to get my header to change when I hover over it. I would like the secondary header (the one that shows when hovered) to be on top of the nav bar like in your tutorial. So I would like to switch from "Horse Eden Eventing" to "Ryshadium RIDs" in the images below. They work indivually, but I can't get the hover figured out. Could you help me, please?

Here are the images:

http://u.cubeupload.com/InkSpren/Screenshot371.png

http://u.cubeupload.com/InkSpren/Screenshot372.png

Here is the code I'm using for the first:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/6aaRyshadiumHEEPaletteH.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

And here is the code for the second image:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/cb9RyshadiumUsernamePal.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

Thank you for your time!

I'd ask Dark! (The unknown) about this, Ink!

Den's CSS Guide: Overlapping images + CSS essentials

August 6, 2020 07:30 AM

Former Stable

Posts: 0
#754240
Give Award

Try the following:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/6aaRyshadiumHEEPaletteH.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

.gameheader:hover div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/cb9RyshadiumUsernamePal.png);
}

I've bolded the part that's added to the code for your first image. Normally, to add special styling for an element when you hover over the header, you'd append :hover to the selector name (e.g. .gameheader div[style]:first-child:hover). However, since .gameheader div[style]:first-child has pointer-events set to none (so that people can still click on links and such that are beneath the header), this also prevents the hovering action from being detected. So instead, you can specify that you want to change the style for div[style]:first-child when .gameheader is hovered over (as shown in the bolded code above).

Edited at August 6, 2020 07:31 AM by Dense Moors

Den's CSS Guide: Overlapping images + CSS essentials

August 6, 2020 05:13 PM

Ryshadium RIDs

Posts: 653
#754540
Give Award

Thank you, Dense! I suspected it had something to do with :hover, but I couldn't figure out where to put the darn thing.

Thanks to you too, Marauder.

Edited at August 6, 2020 05:14 PM by Ryshadium RIDs

Forums > Member Help > Guides

1 2 3

Refresh