Junal on the run

Archive for the ‘CSS’ Category

Today, I went through this challenging (for me of course) task to map/create separate links on one image. I think this could be a great alternative of Image Mapping. Well after doing it, I felt that I would write a small tutorial on this CSS image mapping. So lets have a look how we can simply create separate links on one image with CSS.

First of all, we will put the image in a div as a Background. Note one thing that, div height must be given, otherwise it could be overlapped by other divs.

Let’s have a look at the HTML part…

<div id=”link_out”> </div>

CSS ….

#link_out{

background:transparent url(yourfile_path/link.jpg) no-repeat;

border:5px solid #ccc8bc;

height:263px;

width:194px;

margin-bottom:30px;

}

now, lets put <a> tag for a link and of course thats should be in the DIV.

<div id=”link_out”>

<a id=”first_a” href=”https://junal.wordpress.com/&#8221; target=”_blank” ></a>

</div>

so we have a tag id called first_a . now point this link with CSS ..

#link_out #first_a {

display:block;

height:20px;

margin-top:50px;

margin-bottom:1px;

outline-style:none;

outline-width:medium;

overflow:hidden;

width:194px;

}

this above CSS should point out the first link. Same as we can create another link that can follow another link….

here is the example image that I have from this tutorial.

CSS Image Map

CSS Image Map

To get the complete example, download the code from here:CSS Image Mapping

  • Questions I Ask Myself Daily: liked all the points he mentioned…..sleep less, avoid hypocrisy….get the work done ! and of course honesty
  • Who Will Fill Bill Gates’ Shoes?: this is truly exciting !!! it could inspire any person who has plan about a startup company ..and why not when there are lots of examples around

that’s it 🙂

Few days later, developers have to test one more browser along with IE6, IE7. What is that? Well that’s going to be IE8! These current 2 IE browsers have made developers life hell and I’m sure this new one going to make no change. Although it has some new features that might help the developers but windows users don’t change their browsers by a night. Still 32-31% users use IE6! And those who use IE6 will not switch to IE8 by a jump. That means developers going to suffer at least a year (my guess).

Right now we are working on browsers compatibility. Well our latest Facebook application that is going to be released soon has Firefox compatibility. But not IE7 and IE6. One thing I have noticed that there whatever problem we found in IE6, same problem we found in IE7! Then what the hell IE7 has improved??

Certainly, I’m very naïve in this CSS/HTML area. Anupom had this solution to separate CSS class for each browser. Thanks to him for making this easier. In our CSS file we detected browsers this way; let’s say we had this general class

.h420 {

height:402px;

}

It worked fine in FF but there was height problem in IE6 and IE7. So we would detect the browsers and according to the needs we would increase/decrease the height of the class. See the example bellow….

<?php if( strpos($_SERVER[‘HTTP_USER_AGENT’], “MSIE”)!== false ): ?>

.h420 {

height:380px !important; //for both IE6 and IE7

}

<?php endif; ?>

Let’s put the “!important” to give it the priority. It worked fine and I guess this is the cool way to solve this kind of browsers issues. Anyways, what about if we had to separate IE6 and IE7? Well we had this solution as well….

For IE6…

<?php if( strpos($_SERVER[‘HTTP_USER_AGENT’], “MSIE 6.0”)!== false ): ?>

//write your class here ….

<?php endif; ?>

For IE7…

        <?php if( strpos($_SERVER[‘HTTP_USER_AGENT’], “MSIE 6.0”)!== false ): ?>

//write your class here ….

<?php endif; ?>

That’s it 🙂

Maybe you were taught by your university teacher how to create a layout using TABLE. But now you have to change this idea. This idea is old for now.  Now ‘Div’ concept being used instead of table concept. There are few reasons why you should use DIV instead of TABLE. First have a look at these bellow points.

  • The multiple imbrication of tables is very often necessary, even for simple designs.
  •   The number of tags (table, tr, td, colspan, rowspan, not to forget the horrible spacer.gif) quickly gets out of hand and makes the code heavier and which makes it harder to read and also harder to update when needed.
  • This heavy code often makes the page heavier as well, making it longer to load.

Tables are initially made for data structure (forum, statistics for example) and not for layout.

To make our comparison “tables” and “div”, we will exactly reproduce this layout as a reference (same images, same behaviors of rollover) using three different methods:

Ø  First method: reproduce the layout by using WYSIWYG -what you see is what you get- tools such as Macromedia Fireworks for the design and Macromedia Dreamweaver for the HTML code. View result.

Ø  Second method:redo the layout by hand, with tables.View result.

Ø  Third method: redo the layout by hand using semantic tags (like div) and CSS style sheets.View result.

The page weighs more or less depending on the method used:

  • with tables wysiwyg: 4.73ko
  •   with tables by hand: 3.86ko
  •   with semantic tags and CSS: 1.73ko

So which one you would prefer ?  you better start with DIV and forget about TABLE. I guess you heard the name of Liquid Layout. This is the latest trend that mainly followed to create Layout.

Tables are not meant for setting up layout, and this little example, even if it has its limitations, is a good one.

Tables seem to be easier to deal with, but they make you scam to make it all fit by using rowspan, colspan, spacer.gif and more imbricated tables… it is much easier to construct a clean structure by using div tags, the only thing you need is a little motivation to get rid of your old habits (fr) and get on with the Web evolution.

Reference: http://tutorials.alsacreations.com/tableaux/

I have Spent a busy week following some different tasks. Had to do some family work and I had an official tour in sylhet. My assigned task was to train some people how to use the software that we sold to them and gather all bugs that are still in the software. Well, that was great experience indeed. By this time my “Google reader” was piled with lots of interesting topics and our damage sub-marine cable cost us 2 days!
Well, this topic that I m going to talk about is really important for those developers who are not aware of these facts that are slowing down our websites. I found this article is really helpful to improve the website speed. Lots of important factors that slow down your website are explained here. I’m picking some important points from the article to give you idea what factors are actually explained. But to get the whole idea and learn from it you must visit here http://www.roscripts.com/How_to_speed_up_your_website-175.html
Some important points from the article:


    • Reduce the number of colors in your graphics
    • Avoid using flash as much as possible
    • Remove the HTML comments from your pages
    • Use caching
    • Combine multiple files into one
    • Do not use images to display text
    • Use CSS to call images used for decoration
    • Use shorthand CSS properties
    • Use relative url’s
    • Remove unnecessary META content
    • Try to have less HTTP Requests
    • Use image maps to combine multiple images into a single image
    • Add an Expires Header
    • Multiple Servers:
    • Put CSS at the Top
    • Move Scripts to the Bottom
    • Avoid CSS Expressions
    • Make JavaScript and CSS External
    • Don’t use regular expressions where you don’t have to
    • Avoid Redirects
    • Remove Duplicate Scripts
    • Use CSS For Faster Pages
    • Use External Scriptsa
    • Avoid Nested Tables
    • Keep Your Code Clean
    • Faster Images? Reduce Their File Size
    • GIF vs JPG vs PNG

That’s it! You may not find any interest to see these points only, I’m sure you will enjoy reading their whole article with examples. So, take your time and read the full article. I am sure it will help you a lot.
Reference: http://www.roscripts.com/How_to_speed_up_your_website-175.html

There was a survey done amongst American internet users to find out how much time they wait for a webpage to load and how long before they cancel it. Answer was 4 seconds! This is the reality that users want more user friendly website plus they have no time to wait to see how much time it takes to load a page! Now, as a developer you gotta find the answer how you can do this job for users, ultimately your users are your website heart.

Like Navigation. People use image or JavaScript navigation. Every time you send HTTP request to your sever it takes a lot of times to load images. All of which can seriously affect the usability and accessibility of a site plus if you use images for navigation then your clunky navigation is stopping you to achieving a decent search engine ranking! So what is the solution?

CSS allows you to create attractive navigation that, in reality, is no more than text. Text that can be marked up in such a way as to ensure that it’s both accessible and understandable by all those who can’t physically see your design.

Navigation is a big part of a website. Css-based can help us to improve the accessibility of our sites.

Inspired by this: http://www.sitepoint.com/article/navigation-using-css


View Junal Rahman's profile on LinkedIn
Subscribe to me on FriendFeed

Follow Me on Twitter

Archives

My photos

Downtown, Ottawa

Dream

Jasper, AB

Jasper, AB

Banff, AB

Folkfest, Bangladesh Pavilion Saskatoon

Lovely Sky

Stunt bikers on summer festival, Saskatoon

More Photos

Blog Stats

  • 421,308 hits