Monday, 4 August 2014

Tagged under: , , ,

How to use CSS positioning in your posts

CSS positionning

This post is an introduction to CSS positioning and how it can be used in posts in Blogger.com. The example on which this post is based will show you how to add text to an image but CSS positioning may be used for other purposes: merging images or animating texts for examples.



The text in the frame below is not an image. The proof is that when you pass the mouse over it, the words align. Words in the frame are actually positioned using CSS 'absolute position' property.


This
Text
Is
Crazy

This
Text
Is
Crazy

 

How to use CSS positioning in your posts.


CSS allows you to position elements using the property 'position'. This property can take various values but, today, we will only introduce absolute positioning. In addition to 'position', CSS uses 4 more properties to place the element: top, bottom, left and right.

'Absolute' positioning: 

The element is placed according to the position of its ancestor (Actually the first ancestor that does not have already an absolute positioning ! ). In the following example:

CSS: 
#mydiv1 {
position : relative;
}

#mydiv2 {
position : absolute;
top: 10px;
left: 10px;
}


HTML:
<div id="mydiv1">
<div id="mydiv2">
...
</div>
</div>

The element 'mydiv2' will be positioned 10px from the top of the element 'mydiv1' and 10px from the left side of the same element. 'mydiv1' is the first ancestor of 'mydiv2' that does not have an absolute positioning. 


An example : Adding a text to an image

Here is an image of a nice beach in Florida:


Adding this image to the post I am drafting triggers the production of the following HTML code :

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-zSx8W88w8xw/U98tmuyDrNI/AAAAAAAAAIw/VCyuuVpaobY/s1600/sea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img border="0" src="http://4.bp.blogspot.com/-zSx8W88w8xw/U98tmuyDrNI/AAAAAAAAAIw/VCyuuVpaobY/s1600/sea.jpg" />
</a>
</div>


The text we want to add over the picture is the following:

I love Florida

Here is the HTML code that is required to create this short text:

<div style="color: deeppink; font-size: 24px; font-weight: bold; text-align: center; text-shadow: 2px 2px #FFC0CB;">
I love Florida

</div>


How do I place the text over the picture?


1) Insert the image where you want it to be in your post.


2) Open the html view and position your mouse just after the following tag:

<div class="separator" style="clear: both; text-align: center;"> 

that has been added by blogger.com before the image:


3) Add the following tags:

</div>
<div style="margin: auto; position: relative; width: 400px;">


Note that the width (400px in the example) must be replaced with the actual width in pixels of your image.


4) Add your text just before the </div> closing tag that was created by the insertion of the image. The added text must be surrounded by a <div> opening tag and a </div> closing tag as follows:

<div style="color: deeppink; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">
I love Florida
</div>



Note that:
  • position: absolute property has been added to the style
  • the actual position is defined by left : 130px (130px from the left side of the picture) and top: 110px (110 pixels from the top of the picture). These properties have also been added to the style of the text. You have to replace the values 130px / 110px by the actual position yiu want to give to your text.

Here is the result:




I love Florida



Here is the full code (image + text) :

<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin: auto; position: relative; width: 400px;">

<!-- Original image inserted with blogger -->
<a href="http://4.bp.blogspot.com/-zSx8W88w8xw/U98tmuyDrNI/AAAAAAAAAIw/VCyuuVpaobY/s1600/sea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-zSx8W88w8xw/U98tmuyDrNI/AAAAAAAAAIw/VCyuuVpaobY/s1600/sea.jpg" /></a>

<!-- Text over the image -->
<br />
<div style="color: deeppink; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">
I love Florida
</div>


</div>



(In blue: code that has been added).



That's it. Happy blogging!



7 comments:

  1. I was a very known for blogging but when I came on ProBlogger I worked on a website with blogger http://guruofmovie.com And I Got SO Much Nice response thanks

    ReplyDelete
  2. After few days this is the best post i see on this blog. Let's publish more exclusive posts like this. Fun Loud

    ReplyDelete
  3. Nice post and Its really great information about css positioning. It will be very useful resource for bloggers.
    chennaiwebs

    ReplyDelete
  4. I started a new website www.bforblogger.com your posts are very usefull keep it up. :)

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism