Home | About | View All Posts

4 Oct 2013

How to place texts(Info Box) over image or image banner

Sliders like Feature contents slider, Content sliders, Content slideshow, Gallery contents slider etc. are most popular HTML and are being used as basic part of web page.

Explanation:
Sliders like Feature contents slider, Content sliders, Content slideshow, Gallery contents slider etc. are most popular HTML elements in these days in web world. They are being used as basic part of web page. They use text or contents over image banner also called info panel or info box, which shows excerpt of full content with title. It(info boxes) uses a positioning property of HTML element. By using position of box element we can create text boxes over image.





So basic concept deals with 'position property' of banner and info box div element. It has been also illustrated as image visual below. Image and info box container or holder div uses "position:relative" as position setting and innter div uses "position:absolute". As we know in HTML world - Relatively positioned elements are used as container block or holder for absolutely positioned elements. Based on this fact we can create text or contents over image.



Demo:
Six possible variations of info box placement has been demonstrated here. They are :
1. Info Box content at bottom aligned over image


E-Commerce Development and Solutions

Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, ...

Read More


2. Info Box content at top aligned over image


E-Commerce Development and Solutions

Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, ...

Read More



3. Info Box content at left aligned over image


E-Commerce Development and Solutions

Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet...

Read More



4. Info Box content at right aligned over image


E-Commerce Development and Solutions

Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet...

Read More



5. Info Box content at left aligned over image


E-Commerce Development and Solutions

Online buying and selling of products and services is called E-Commerce. In Electronic commerce...

Read More



6. Info Box content at right aligned over image


E-Commerce Development and Solutions

Online buying and selling of products and services is called E-Commerce. In Electronic commerce...

Read More



Stylesheet:
Basically we can use only two class(banner and info box) to achieve info box over image. They are :

.banner{
position:relative;/* Use this div as relative to have internal div(info box) absolute without breaking out. Relatively positioned elements are often used as container blocks for absolutely positioned elements.*/
top:0px;
left:0px;
width:656px;
height:246px;
color:#FFFFFF;
border:1px solid #000;
background:#fff;
}
.banner .infobox{
position:absolute;
bottom: 0px; /* Adjust direction by using left, right, top, bottom value. bottom =0 have been used to place it at bottom*/
width:647px;/* Adjust width to avoid full page spread */
height:63px;
padding:5px;
}

Here different possible variation has been displayed so six banners classes have been used. It is only for demonstration of banner and info box placement vairations. All styles classes has been used as below. Codes have been commented explicitly for basic understanding.

<style type="text/css">
body, html{font-family:Arial, Helvetica, sans-serif;font-size:12px;margin:0px;padding:0px;}
h2{font-size:14px;color:#FFFFFF;margin:0px;padding:0px;overflow:hidden;}
.infobox{background:url(images/transparent-bg.png);}
.infobox a{font-size:12px;color:#FFFFFF;}
.infobox p{margin:0px;padding:0px;overflow:hidden;}
.banner1, .banner2, .banner3, .banner4, .banner5, .banner6{
position:relative;/* Use this div as relative to have internal div(info box) absolute without breaking out. Relatively positioned elements are often used as container blocks for absolutely positioned elements.*/
top:0px;
left:0px;
width:656px;
height:246px;
color:#FFFFFF;
border:1px solid #000;
background:#fff;
}
.banner1 .infobox{
position:absolute;
bottom: 0px; /* Adjust direction by using left, right, top, bottom value. bottom =0 have been used to place it at bottom*/
width:647px;/* Adjust width to avoid full page spread */
height:63px;
padding:5px;
}
.banner2 .infobox{
position:absolute;
top:0px; /* Adjust direction by using left, right, top, bottom value. top=0 have been used to place it at top*/
width:647px;/* Adjust width to avoid full page spread */
height:63px;
padding:5px;
}
.banner3 .infobox{
position:absolute;
top:0px;
left: 0px; /* Adjust direction by using left, right, top, bottom value. left=0 , top=0 have been used to place it at top left*/
width:175px;/* Adjust width to avoid full page spread */
height:237px;
padding:5px;
}
.banner4 .infobox{
position:absolute;
top:0px;
right: 0px; /* Adjust direction by using left, right, top, bottom value. right=0, top=0 have been used to place it at top right*/
width:175px; /* Adjust width to avoid full page spread */
height:237px;
padding:5px;
}
.banner5 .infobox{
position:absolute;
top:53px;
left:20px; /* Adjust direction by using left, right, top, bottom value. left and top have been used to place it at top left at custom place*/
width:240px; /* Adjust width to avoid full page spread */
height:137px;
padding:5px;
}
.banner6 .infobox{
position:absolute;
top:53px;
right:20px; /* Adjust direction by using left, right, top, bottom value. right and top have been used to place it at top right at custom place*/
width:240px;/* Adjust width to avoid full page spread */
height:137px;
padding:5px;
}
</style>

HTML:
HTML file(index.html) code has been written below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Info Box Over Image : Examples</title>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
</head>
<body>
<p>
Info Box content at bottom aligned over image </p>
<div class="banner1">
<img src="images/e-commerce-development.jpg" />
<div class="infobox">
<h2>
E-Commerce Development and Solutions</h2>
<p>
Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet. It allows consumers to electronically trade goods and services with...</p>
<a href="http://cmssolutionsexpert.com/e-commerce-development.html"><strong>Read More</strong></a></p>
</div>
<!--/.infobox-->
</div>
<!--/.bannerbox1-->
<p>
Info Box content at bottom aligned over image </p>
<div class="banner2">
<img src="images/e-commerce-development.jpg" />
<div class="infobox">
<h2>
E-Commerce Development and Solutions</h2>
<p>
Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet. It allows consumers to electronically trade goods and services with...</p>
<a href="http://cmssolutionsexpert.com/e-commerce-development.html"><strong>Read More</strong></a></p>
</div>
<!--/.infobox-->
</div>
<!--/.bannerbox2-->
<p>
Info Box content at left aligned over image </p>
<div class="banner3">
<img src="images/e-commerce-development.jpg" />
<div class="infobox">
<h2>
E-Commerce Development and Solutions</h2>
<p>
Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet. It allows consumers to electronically trade goods and services with no limit of time or geographical distance. Thus it has effective way to expand...</p>
<a href="http://cmssolutionsexpert.com/e-commerce-development.html"><strong>Read More</strong></a></p>
</div>
<!--/.infobox-->
</div>
<!--/.bannerbox3-->
<p>
Info Box content at right aligned over image </p>
<div class="banner4">
<img src="images/e-commerce-development.jpg" />
<div class="infobox">
<h2>
E-Commerce Development and Solutions</h2>
<p>
Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet. It allows consumers to electronically trade goods and services with no limit of time or geographical distance. Thus it has effective way to expand...</p>
<a href="http://cmssolutionsexpert.com/e-commerce-development.html"><strong>Read More</strong></a></p>
</div>
<!--/.infobox-->
</div>
<!--/.bannerbox4-->
<p>
Info Box content at left aligned over image </p>
<div class="banner5">
<img src="images/e-commerce-development.jpg" />
<div class="infobox">
<h2>
E-Commerce Development and Solutions</h2>
<p>
Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet. It allows consumers to electronically...</p>
<a href="http://cmssolutionsexpert.com/e-commerce-development.html"><strong>Read More</strong></a></p>
</div>
<!--/.infobox-->
</div>
<!--/.bannerbox5-->
<p>
Info Box content at right aligned over image </p>
<div class="banner6">
<img src="images/e-commerce-development.jpg" />
<div class="infobox">
<h2>
E-Commerce Development and Solutions</h2>
<p>
Online buying and selling of products and services is called E-Commerce. In Electronic commerce all financial transactions, deals take place over the internet. It allows consumers to electronically...</p>
<a href="http://cmssolutionsexpert.com/e-commerce-development.html"><strong>Read More</strong></a></p>
</div>
<!--/.infobox-->
</div>
<!--/.bannerbox6-->
<p>&nbsp;</p>
</body>
</html>

Tags : ,

0 comments:

Post a Comment