Thursday, August 29, 2013

Image at the left and the texts at the right

In this the image will be placed on the left side of the page whereas the text will be placed on right side of the page i.e. the image and the text will be placed side by side.

Html :

<html>
    <head>
        <title>Image at the left and the texts at the right </title>
    </head>
   
    <body>
        <div class="container">
            <div class="column-left">
                <img src="http://www.hdwallpapers.in/walls/beautiful_lovely_scenery-HD.jpg" width="300px" height="200px" />
            </div>
           
            <div class="column-right">
                 <h1>Image and Text(Side by Side)</h1>

                <p>Beautiful mountain</p>
            </div>
        </div>
    </body>
</html>

CSS :

.container {
    position: relative;
    height: 200px;
    padding 10px 0;
}
.column-left {
    position: absolute;
    background: #AAA;
    height:200px;
    width:300px;
}
.column-right {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    padding-left: 310px;
}

Output :

The output the above code is shown below.

You can check the code and the output here - http://jsfiddle.net/karthikkumar09/B9enL/

Posted by at No comments:

Tuesday, June 18, 2013

How to Place Text on the image in HTML: 

There are many ways to place text over an image which are as follows :

 

Simple Method :

We can use "margin" and "padding" to place text over an image

 

Method 1 (Inline Style css): 

Firstly create a div that specifies the dimension of the image and image url through css.

Ex :-  <div style="width:300px; height:100px; background-image:url('Image.jpg');">

 Next, Place the text inside. Use padding and margin on the text to get it vertically centered and also set "text-align" to "center" for it in css(inline css).

Ex :- <p style="margin:0; padding:25px 0 0 0; text-align:center;">Hello World</p>

 Full Code :

<html>
    <head>
        <title>Text over an image </title>
    </head>

    <body>
        <div style="width:300px; height:100px; background-image:url('image.jpg');">
            <p style="margin:0; padding:25px 0 0 0; text-align:center;">Text over an image</p>
        </div>   
    </body>
<html>

 

Method 2 (Internal Style sheet): 

Step 1 : Create css class named "image" which specifies the dimension of the image and image url.

Ex :-  .image { width:300px; height:100px; background-image:url('image.jpg'); }

Step 2 : Create another css class named "imageText" which specifies the dimensions for the text to be placed on the image. Use padding and margin on the text to get it vertically centered and also set "text-align" to "center".

Ex :-  .imageText {margin:0; padding:25px 0 0 0; text-align:center; }

Step 3 : Create "<div>" for the image and "<p>" for the text

Ex :-  <div class="imgBox">  

        <p class="imgText">Text Over an image</p>  

     </div>

 Full Code :

<html>
    <head>
        <title>Text over an image </title>
       
        <style>
            .image { width:300px; height:100px; background-image:url('image.jpg'); }
            .imageText {margin:0; padding:25px 0 0 0; text-align:center; }
        </style>
    </head>

    <body>
        <div class="imgBox">
            <p class="imgText">Text Over an image</p>
        </div>
    </body>
<html>

 

Method 3 (External Style sheet): 

Step 1 : Create css file named "image.css" which specifies the dimension of the image and image url in class named "div" and dimensions for the text to be placed on the image. Use padding and margin on the text to get it vertically centered and also set "text-align" to "center" in class named "p".

Ex :-  image.css

.div { width:300px; height:100px; background-image:url('image.jpg'); }

.p {margin:0; padding:25px 0 0 0; text-align:center; }


Step 2 : Create html file named "image.html" and create "<div>" for the image and "<p>" for the tex.

Ex :-  <div>  

        <p>Text Over an image</p>  

     </div>

 Full Code :

image.css
.div { width:300px; height:100px; background-image:url('image.jpg'); }
.p {margin:0; padding:25px 0 0 0; text-align:center; }
image.html
<html>
    <head>
        <title>Text over an image </title>
        <link rel="stylesheet" type="text/css" href="image.css">      
    </head>

    <body>
        <div>
            <p>Text Over an image</p>
        </div>
    </body>
<html>

 

Difficult Method :

We can also use "position" and "z-index" place text over an image. There are 2 different methods in this :

 

Method 1 :

We can use Absolute positioning and z-index= -1 :

Step 1 : Create css file named "image.css" which specifies the dimension of the image, image url and z-index as -1 in class named "image" and dimensions for the text to be placed on the image. Use positon as absolute and set top and left margins as you wish on the text to get it vertically centered and also set "text-align" to "center" in class named "imageText".

Ex :-  image.css

.image {z-index: -1;width:300px; height:100px; background-image:url('bg.jpg'); }
.imageText {position: relative; top:20px; left:20px; }
Step 2 : Create html file named "image.html" and create "<div>" for the image and "<p>" for the tex.

Ex :-  <div class="image">  

        <p class="imgageText">Text Over an image</p>  

     </div>

 Full Code :

image.css
.image { z-index: +1;width:300px; height:100px; background-image:url('bg.jpg'); }
.imageText {position: relative; top:20px; left:20px; }

image.html
<html>
    <head>
        <title>Text over an image </title>
        <link rel="stylesheet" type="text/css" href="image.css">
    </head>

    <body>
        <div class="image">
            <p class="imageText">Text Over an image</p>
        </div>
    </body>
<html>

Method  2:

We can use Relative positioning and z-index= +1 :


Step 1 : Create css file named "image.css" which specifies the dimension of the image, image url and z-index as -1 in class named "image" and dimensions for the text to be placed on the image. Use positon as absolute and set top and left margins as you wish on the text to get it vertically centered and also set "text-align" to "center" in class named "imageText".

Ex :-  image.css

.image { z-index: +1;width:300px; height:100px; background-image:url('bg.jpg'); }
.imageText {position: relative; top:20px; left:20px; }
Step 2 : Create html file named "image.html" and create "<div>" for the image and "<p>" for the tex.

Ex :-  <div class="image">  

        <p class="imgageText">Text Over an image</p>  

     </div>

 Full Code :

image.css
 .image { z-index: +1;width:300px; height:100px; background-image:url('bg.jpg'); } 
.imageText {position: relative; top:20px; left:20px; }
image.html
<html>
    <head>
        <title>Text over an image </title>
        <link rel="stylesheet" type="text/css" href="image.css">
    </head>

    <body>
        <div class="image">
            <p class="imageText">Text Over an image</p>
        </div>
    </body>
<html>

Posted by at No comments:
Subscribe to: Posts (Atom)