April | 2009 | Mywebdunia's Blog

Archive for April 2009

On mouseover Image change

Posted by: Amit Nazare on: April 28, 2009

In: JavaScript
Leave a Comment

Here is an example how we can change the image on mouse over.

Here in this example I have used onmouseover one image and onmouseout another image. You can see the name parameter for the img tag. Using this tag I am changing the image that is document.name.src

This is one way another way would be to write a separate javascript for this an call the function on mouse over and onmousedown event.

Tags: JavaScript, mouseover image

Tabbed Rounded corner CSS Menu

Posted by: Amit Nazare on: April 28, 2009

In: CSS
1 Comment

Here is another example for making a rounded corner menu with ul li. I have seen most of use full image to make a rounded corner menu. But the problem with this is we need to have n images for n number of menu items. That is if the text or words more then we need to make use of seperate image for this and seperate for some others. So here is an example how we can make use of two cropped images left and right and use these images to create a rounded corner menu.

Example:

Put this code in the body section of your page.

<ul>

<li><a><span>About Us</span></a></li>

<li><a><span>Products</span></a></li>

<li><a><span>Services</span></a></li>

<li><a><span>Contact Us</span></a></li>

</ul>

</div>

Put this code in the Head section of your page
<style type=”text/css”>
#menu{
height:30px;
width:1000px;
text-align:center;
}
#menu ul li{
list-style-type:none;
display:inline;
}
#menu a{
padding-left:10px;
background:url(images/menuInactiveLeft.jpg) no-repeat left top;
font-family:Verdana;
font-size:12px;
color:#434343;
float:left;
margin-right:10px;
}
#menu a span{
padding-right:10px;
background:url(images/menuInactiveRight.jpg) no-repeat right top;
font-family:Verdana;
font-size:12px;
color:#434343;
float:left;
}
#menu a:hover{
padding-left:10px;
background:url(images/menuActiveLeft.jpg) no-repeat left top;
color:#666666;
float:left;
}
#menu a span:hover{
padding-right:10px;
background:url(images/menuActiveRight.jpg) no-repeat right top;
color:#666666;
float:left;
}
#menu a.active{
padding-left:10px;
background:url(images/menuActiveLeft.jpg) no-repeat left top;
color:#666666;
float:left;
}
#menu a.active span{
padding-right:10px;
background:url(images/menuActiveRight.jpg) no-repeat right top;
color:#666666;
float:left;
}
</style>

You can see that I have used a span in between anchor tags.The #menu a makes the left image to be aligned whose background position is left, and for the right image the background position is right top which is made with the help of #menu a span. That is why I have used the span class now this makes the completed rounded corner. Make sure that your right image width is big enough so that the largest text could fit in that. The other class is the active class which is used for making any one of the menu item as selected. On mouse hover the same procedure holds good.

Try this code with your rounded corner images. If you are getting any problem then put your comments will try to help you out.

Tags: css, css menu, rounded corner menu

How to make div position fixed

Posted by: Amit Nazare on: April 27, 2009

In: CSS
Leave a Comment

Most of us might have seen to make any div position fixed we normally use css attribute as position:fixed, but this doesn’t work with IE as ususal the crap browser. So to make it compatible with IE here is a solution where we can make the div position fixed. Just copy the below code and try on your system.

HTML Code put this within Body section
<div id=”main”>
<div id=”main1″>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

#main{ width:900px; text-align:left; clear:both; border:1px solid #999999; }

#main1{ width:900px; border-bottom:1px solid #999999; position:fixed; z-index:100; background:#cccccc; height:100px; }

* html div#main1 { position: absolute; }

* html div#main1{ top:expression(eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop : document.body.scrollTop); }

#main2{ width:900px; padding-top:20px; z-index:-1; }

p{ padding:5px; line-height:1.5em; }

</style>

You can see the css *html div#main1 I have used here, which is for Hacking the IE to make the position as fixed. Also the CSS1Mode and scrollTop which makes IE to make the rest of the div scroll top.

Tags: css, css positioning, position:fixed in IE

Vertically centering in CSS

Posted by: Amit Nazare on: April 24, 2009

In: CSS
Leave a Comment

Most of us might have seen when working with divs valign doesn;t seem to work. So to make it align exactly vertically align center we normally make use of padding-top and padding-bottom property. Rather then using this there is another solution for this. Try using the below code:

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

</div>
</div>

</div>

#outerdiv { height:400px;overflow: hidden; position: relative;}/* for explorer only */

#outerdiv[id] {display: table; position: static;}/* other than IE */

#middlediv {position: absolute; top: 50%;} /* for explorer only */

#middlediv[id] {display: table-cell; vertical-align: middle; position: static;}/* for other than IE */

#innerdiv {position: relative; top: -50%}

.border {border: 1px solid #666666; }

</style>

Related to this
Vertical Align Div Bottom

Tags: css, valign using div, vertical center using css

Search Engine Submission Links

Posted by: Amit Nazare on: April 20, 2009

In: Tips n Travia
Leave a Comment

Here are some of the links where you can submit your site for free for crawling.

1. Google : Click Here

2. Yahoo : Click Here

3. MSN : Click Here

4. Guruji : Click Here

5. Alexa : Click Here

Types of CSS styles

Posted by: Amit Nazare on: April 20, 2009

In: CSS
Leave a Comment

There are three types of CSS styles:

1. Inline Styles : Inline styles are nothing but the styles written in the tag on the document. These styles affect only to the applied tag.
EX: <div style=”width:300px;height:30px;float:left;”>Some text here </div>

2. Embedded Styles : Embedded styles are nothing but that are embedded with the head section of the document. Embedded styles affect only the tags on the page they are embedded.
EX:

.text{
text-align:left;
font-family:Verdana,Arial;
font-size:12px;
}

3. External Styles : External Styles are those that are written on a separate document and which is intern attached to other pages. External styles can affect to any document that are attached to.
EX: <link href=”css/styles.css” rel=”stylesheet” type=”text/css”>

The best practice is to use always External Styles. Which saves your lot of time and money.

Tags: css, types of css

!important

Posted by: Amit Nazare on: April 17, 2009

In: CSS | Tutorials
Leave a Comment

Everyone might have faced problem saying that my sight looks fine in mozilla firefox, but it is off by one or two pixels in Internet Explorer. The CSS will use the rule that it saw at last, that is the one that is defined at last will be used.

Ex:

li{

margin-left:2px !important;

margin-left:5px;

}

The Internet Explorer will use the 5px where as the firefox will use the 2px. Now the left margin for firefox will be 2px and for IE it will be 5px. You can see that such fixes are better than using Seperate CSS for Internet Explorer.

Tags: !important, css, HTML

How to Backup Drupal site

Posted by: Amit Nazare on: April 16, 2009

In: Drupal
1 Comment

Backing up your Drupal site is now very easy, just need to download and install the Backup & Migrate Module. To install the module click on the Administer> Modules check the Backup and Migrate module and enable it and save the settings.

Then go to the Administer > Content Management > Backup and Migrate then make the following settings

1. Exclude the following tables altogether: select the table which you dont want to take backup .

2. Give the backup file name.

3. There are also options to compress the file before download, or add a datestamp.

And then click Backup Database.

Backup and Migrate is the easiest module that is available. The other method would be through PhpMyAdmin.

Tags: backup database, backup drupal site, Drupal

How to Increase Page Rank?

Posted by: Amit Nazare on: April 15, 2009

In: Tips n Travia
Leave a Comment

Here are some of the steps how can you increase your page rank.

1. Update Content : Update your content regulary so that you can have unique content on your site. Which gets you more and more visitors to your site, which indirectly increases your page views and so the page rank also.

2. Inside Linking : You need to provide inside linking in your website that is if you have any blogs in your site, so provide a link for previous blog and next blog when the user is viewing your blogs. Which keeps him more time on your site.

3. Create Sitemap : Create a XML sitemap and submit it to google and yahoo. You can generate XML sitemap either manually or from some sitemap generator website.

4. Linking with other Website : Have linking with other websites that is put their link on your website and put your link in their. Which will help your visibility in search engine more.

Tags: page rank, xml sitemap

Drupal Taxonomy Tutorial

Posted by: Amit Nazare on: April 10, 2009

In: Drupal
3 Comments

Drupal is one of the best and Award winning CMS, and one of its best feature is taxonomy.

New users to Drupal can find it bit difficult to understand this feature at first, which even I found it to be difficult for me at first.

Taxonomies are nothing but which allows you classify content into categories and subcategories. Drupal taxonomy is made up of vocabularies and terms. A vocabulary is a set of terms and terms are just another word for categories.

To look more into the Taxonomy, first log into the administrative block of your site. Then click on the Administrative link on the left menu. Find for the taxonomy(which comes under ( Content Management ) link click on that.

Let’s build the taxonomy for a news site as an example. First click on the Add vocabulary tab. Fill all the details into the boxes that is the Vocabulary name, some description, types and hierarchy and save the settings.

The vocabulary has been created, but there are no terms categories in it yet. Click on the Add terms link. Enter the term name, description select the parent and then save the settings. Continue the same procedure for those many terms and vocabularies you need.

For Example this could be the structure:

News [this is the name of your vocabulary]

Business
- Markets
- Commodities
- Mutual Funds
Cricket
- Latest
- Live Cricket
- Technology

Tags: Drupal, drupal taxonomy, drupal terms

Older Entries

Mywebdunia's Blog