Advertisements

Archive

Posts Tagged ‘HTML’

How to create a always visible div in css and HTML

June 2, 2011 3 comments

 How to create a div that is always visible even while scrolling 

In some scenario we need to show some information like ads,twitter like account’s logo,new updates etc..  always to user even he is scrolling website We can implement this using simple HTML and CSS within few steps. We can create more attractive div with given appropriate color and style to css.

 Step by step process to create always visible div 

Here we are explaining how easily we can create an always visible div using simple CSS in html by steps by step. We can create always visible div within 2 steps.

 Step 1

Create a css class and name it “alwaysVisibleDiv” (you can give any name that you like). And add position as “fixed”; 

<style type="text/css">
<!--
.alwaysVisibleDiv
{
    position: fixed;
    bottom: 10px;
    left: 10px;
}
//-->
</style>
 

Step2

 Add a new div to the page and specify the class name (class=”alwaysVisibleDiv”)

 <div class="alwaysVisibleDiv">
    Hello I am here always
</div>

 Always visible div is ready. You can see above div position is always there (here we are fixed bottom left) even user scrolling website. We can fix this div at any position of the web page by giving bottom,right,top,left position to the class ‘alwaysVisibleDiv’. By using this html css code we can keep element in view while scrolling website without any jquery,ajax techniques.

Advertisements
Categories: HTML Tags: ,

How to create a news scroller using HTML marquee.

May 30, 2011 4 comments

Very simple News Scroller using HTML

In most of the website we can see that there is a portion for updates from the company. This updates can be shown by javscript,jquery,ajax etc technologies and it should be some effort also we have to include some pages for this.

For eg if we are implemented javscript newsticker the user’s browser must enable javascript, otherwise nothing going to happen. So the better method is if we can create a simple news ticker by using html elements only, it will be more faster and reliable in all browsers.

Following are the very simple and attractive vertical news ticker using HTML elements only. (Without using jquery,js,ajax..) So it should be work in all browsers even in the javascript disabled mode. We can give more attractive color and style for the news ticker.

Simple HTML code for showing news updates.

<div style="width: 180px; text-align: center; margin-top: 30px; 
margin-bottom: 2px;
        font-weight: bold;">
        Announcements</div>
    <div id="news-container">
        <marquee bgcolor="#ffffff" scrollamount="1" height="80" 
direction="up" loop="true"
            width="95%">
        We offers shopping cart <span style="color: blue;">
domain hosting free</span>
for limitted customers.
        <br /><br />
        You can choose your own style,color and domain 
for your shopping site.
        <br /><br />
        Supershope has largest number of viewers in the world. 
<span style="color: blue;">
You can sell your products here.</span><br />
        <br />
        <span style="color: blue;">Gift Paintings on Sale..!</span> 
There are thousands of
paintings available in supershope.
        Please contact us to buy paintings for affordable price.
        <br /><br />
        The Shopping cart product with <span style="color: blue;">
'supershope.com' domain also
            avaliable </span>for first customer with special package.
    </marquee>
    </div>

Where is simple HTML news ticker implemented

You can see the implemented HTML news ticker in the left hand side of the websit supershope used as Announcements section

Categories: HTML Tags:
%d bloggers like this: