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
And then we add an additional line to the bottom of the CSS file, see image.
The HTML code
The CSS code
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.
The CSS code-the DIV is positioned and designed.
More CSS code-an addition to the paragraph and an additional voter for the UL
The end result will look like this
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.