Learnit Training

9. Positioning elements

Positioning the different elements can sometimes be a challenge. When positioning the different elements completely in the fingers, you are a good way to make websites. In the exercise below, a number of important techniques are passed.

9.1 Aligning an image in the text

To move the image below the text to the right of the text, we need to make two changes. In the HTML file, move the tag from under the paragraph for (above) the text still within the

Tag.

And then we add an additional line to the bottom of the CSS file, see image.

The HTML code

Online Free HTML5 and CSS training from Learnit

The CSS code

Online Free HTML5 and CSS training from Learnit

9.2 Positioning the whole

In order to better present the total content, a new HTML element is placed in the body in the code below. This new HTML container is called Div (a div stands for Division (area)). By placing a div right after the body-open tag and then shutting it down just before the body-close tag, we have now put all the content in a new container. We can position and shape this new container using the CSS style sheet. You can take the code below to get a better result.

The HTML code-there is an additional div container here to put the content.

Online Free HTML5 and CSS training from Learnit

The CSS code-the DIV is positioned and designed.

Online Free HTML5 and CSS training from Learnit

More CSS code-an addition to the paragraph and an additional voter for the UL

Online Free HTML5 and CSS training from Learnit

The end result will look like this

Online Free HTML5 and CSS training from Learnit

By giving the DIV in the style sheet a width, a height and a color, it becomes visible in the browser. By turning the left and right margins on automatically, the DIV container will be centered on the page. The DIV is last given the border-radius property. This property returns the div "round corners".

To ensure that the text is not directly on the edge, place the Padding property in the H1 and p. The four values are consecutively for the north, east, south, and West side of the text.

The UL has the property float so it is better positioned at the top of the Div. By specifying a breed of 560 pixels, the UL occupies the full width of the div.

Tip: When you give the UL a temporary background color, it becomes visible and you can easily position it.