A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
Here we have a two <div> tags. A larger one (parent), containing an image and a smaller one (child), inside the larger, containing some text.
The larger <div> has a position property of relative applied to it. No placement values are assigned to this <div>. This relative property makes it possible to position the smaller <div> in relation to it.
The second <div> has a position property of absolute applied to it. Then, by assigning placement values it is possible to position it in relation to the larger <div>.
Dreamweaver also allows absolute positioned <divs> to be dragged to the desired position.
Three <div> tags (text, banner, and nav) inside a wrapper <div>, shown here in the order that they are placed in the code.
By employing the technique outlined in the example above it is possible to display them in a different order, as in the example below.
Here the presentation of the content has been rearranged from the order they are placed in the HTML, so that the text appears below the banner and nav <div> tags.
This is achieved by assigning position relative to the wrapper <div>, then assigning position absolute to the text <div>. By assigning a placement value to the text <div> it can be made to appear beneath the other elements.
Why do this:
For the purposes of SEO, it can be advantageous for significant text to appear first in the body of the document. Styles can then be employed to present the content in the desired way.
.image_box {
background-color: #CCCCCC;
width: 500px;
border: 2px solid #000000;
position: relative;
}
.text_box {
background-color: #CCCCCC;
width: 300px;
position: absolute;
top: 171px;
left: 21px;
padding: 10px;
}
.wrapper {
width: 500px;
position: relative;
}
.wrapper_2 .text {
width: 460px;
padding: 20px;
position: absolute;
top: 138px;
background-color: #CCCCCC;
}