Maccy's CSS help thread

Maccy

Maccy

Maccy

Commissario
Joined
23 Nov 2004
Posts
42,063
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
 

Maccy

Maccy

Maccy

Commissario
OP
Joined
23 Nov 2004
Posts
42,063
Location
Herts
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?
 

Alpherah

Alpherah

Alpherah

Soldato
Joined
24 Jun 2008
Posts
8,328
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:

Maccy

Maccy

Maccy

Commissario
OP
Joined
23 Nov 2004
Posts
42,063
Location
Herts
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

Maccy

Maccy

Commissario
OP
Joined
23 Nov 2004
Posts
42,063
Location
Herts
Will take a look, thanks, however at the moment I'm trying to build my core skills which can be applied in the future :)
 

Tripnologist

Tripnologist

Tripnologist

Soldato
Joined
12 May 2007
Posts
3,896
Location
Bristol
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
 

Frankiemac

Frankiemac

Frankiemac

Associate
Joined
29 Sep 2010
Posts
1,938
Location
Cumbria
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