Maccy's CSS help thread

[Maccy]

I'm trying to create some 'interactive' bits and my google skills are struggling with what I want to achieve.

Basically I want to have certain bits of content that can be shown/hidden on a page by clicking a 'show' or 'hide' type button/text. The only example I can find is here - https://www.eonenergy.com/for-your-home/saving-energy/how-you-can-help-yourself/ways-to-save

Scroll to the bottom and there's a show/hide thing. Can someone give me some info on this and if possible some links on how to achieve this?

I'd also like to know how to create a 'show' link that would create a popup within the site that makes the rest of the page go grey/faded out and show content. I'm having trouble finding an example of what I'm after here but I'll keep searching!

Cheers

EDIT - found it! https://www.eonenergy.com/for-your-home/products-and-services/EON-rewards - scroll down to Eon Rewards T & C's link

 

[Maccy]

Perfect, thanks mate

 

[Maccy]

So I need help with learning some stuff so let's have a dedicated 'me' thread as I'm going to be asking questions over the coming days!

I want to essentially create a text box that has one word right in the center of a yellow background. I've tried it here - http://jmcadam.com/junesite/ - but it looks wrong and I'm sure there's an easier, quicker way of coding this?

 

[Maccy]

Don't think I want to be working with width in px, would rather do % so it all stays relative to browser size etc.

EDIT - might've sorted it with just using padding!

 

[Maccy]

Will take a look, thanks, however at the moment I'm trying to build my core skills which can be applied in the future