Maccy's CSS help thread

Maccy

Maccy

Maccy

Commissario
Joined
23 Nov 2004
Posts
42,627
Location
Herts
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
 
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?
 
css - have a container div then have another div for the 'text box'. Give it a width and then set the margin to 0 which will position it in the middle of the container.

#container {
width: 900px;
}

#main {
width: 600px;
margin: 0 auto;
}

and in the HTML you need the 2 div's:
<div id="container">
<div id="main">
</div>
</div>

In this example you'l be left with 150px's worth of space to the left and right of the 'text box', put whatever text, formatting etc in the 'main' div.


Should add - I'm also very noob at this :p
 
Last edited:
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!
 
Will take a look, thanks, however at the moment I'm trying to build my core skills which can be applied in the future :)
 
There are SO many ways to do vertically alignment and the best technique is usually dictated by the situation.
ie:
Absolute positioning if you know the dimensions of the element to be centered.
CSS3 transform and Flexbox are great, but browser support is limited.

I've put together a few quick demos for you which cover 4 common methods.

Vertical align with Flexbox
http://codepen.io/anon/pen/xAdFw

Vertical align with CSS3 Transform
http://codepen.io/anon/pen/Fxoie

Vertical align with CSS Table
http://codepen.io/anon/pen/EDIbJ

Vertical align with absolute positioning
http://codepen.io/anon/pen/djlqp
 
Tripnologist said:
There are SO many ways to do vertically alignment and the best technique is usually dictated by the situation.
ie:
Absolute positioning if you know the dimensions of the element to be centered.
CSS3 transform and Flexbox are great, but browser support is limited.

I've put together a few quick demos for you which cover 4 common methods.

Vertical align with Flexbox
http://codepen.io/anon/pen/xAdFw

Vertical align with CSS3 Transform
http://codepen.io/anon/pen/Fxoie

Vertical align with CSS Table
http://codepen.io/anon/pen/EDIbJ

Vertical align with absolute positioning
http://codepen.io/anon/pen/djlqp
Click to expand...


Thanks for that :)
 
You must log in or register to reply here.
Back
Top Bottom