JCU Computer Science

WEB DESIGN TUTORIALS

Flexible height

The CSS property height is usually used to define a fixed height in px for a DIV. Use instead:
display: table
to define a flexible height that depends on the content of the DIV

Making space: Padding or Margin?

Use padding to create space between the content of a box and the box's edges

Use margin to create space between boxes

Centering a DIV element

When centering a DIV element, give it a width and use:
margin: auto
in the CSS of the DIV element

Dealing with images

To scale an image correctly and make it responsive, put it inside a parent DIV.
Set the width of the DIV as you like but do not set its height
(use instead display: table)
Set the width and height of the child image both at 100%

Dealing with images
quicker method

To scale an image correctly and make it responsive:
set it to be display: block
set the width of the image as you like but do not set its height

Fixed (NON-responsive) background image

If you want a background image for the body that doesn't scroll you need:
the image to be a real html element (not a background image)
the image to be fixed and fill the entire screen
the image to be sent to the backgroung

Fixed (responsive) background image

If you want a responsive background image for the body (and that doesn't scroll) you need:
the image to be the background image of an empty DIV
the DIV to be fixed and fill the entire screen
the DIV to be sent to the backgroung

PYTHON TUTORIALS

Centering a DIV element 1