CSS layout
Some 'classical' methods
There are several methods allowing to position HTML elements on the page in CSS.
Some of them are more widely used than others, some of them are more classical ... and all of them have their advantages and shortcomings.
The best way to learn is to try them out and make up your mind!
Have a first glance on the links provided below, then move towards the exercise... and return to the links to answer the questions.
- Position (+ top, bottom, left and right properties)
w3schools and a very useful website that also deals with the float property. - Float
follow the second link mentioned above - Display inline-block
learnlayout.com
Exercise 4
We'll work on the page on which we drew boxes in the exercise 2. With colors added to the elements, it now looks like this:
- Download here the archive that contains the HTML ans CSS files. Open the CSS file in your text editor, and answer the questions written as comments in the code.
- (Optional) Create a new style sheet, so that the page looks like the one below.
Warning 1: you're not allowed to modify a single line of the HTML file!
Warning 2: there's plenty of good answers. Feel free to test various properties!
New methods:
New convenient modules, such as Flexible Box, allow to build more efficiently the page layout. However, as they are not currently supported by all browsers, we'll expose them later, in an advanced CSS section of the course.
'Playing' with margins may also help you to set up the layout!
Fixed layout, fluid layout, responsive design...
The types of layouts sum up in a few words and a short video.
<< PreviousWords cloud created with tagul.com - images sourced from flickr.com