Scrolling a cell in a Table using CSS:

Have you ever faced a problem, that you wanted to have a scrollable cell inside a table, or the problem that you made the template in Adobe Photoshop, and had kept a fixed area in cell and let the user scroll in that particular cell. So what is the solution to this? Well Thanks to CSS, it gives us enough power to control this option. So here is a very simple solution to that problem.

Looking at the html code for a table,

So now we have to give the Cell of the table that is going to be scrollable an ID. I won’t be going into the explanation of an id now. We need to define a div tag (i.e. <div>) in the cell so the code of the table becomes

The code highlighted in red is the code added. Remember we will be using this id for the scroll bar.

Now moving to the CSS code, I am assuming here that you have sufficient knowledge about CSS, that you can create and import or link a CSS file to an HTML file.

Now I will just be writing the CSS code

We can add other styling if we want but since this is our prime requirement we don’t have to. Now explanation of the code, I am identifying that the id scroller must have these rules to it. Now since an id cannot have two copies in a single HTML file you do not need to worry about having the problem in your HTML file. In case you want multiple cells to have the same rules applies. Try using class instead of id. Now in the style sheet we have width, this is a property that will define what the FIXED width will be. Now the height defines the height, and finally comes the overflow property. This defines what the browser WILL do when extra content is added to the cell. It makes a scroll bar.

So there you have it, a scroll bar in a cell. A problem solved, and it works with Internet Explorer 6 and Firefox 3.

Have a good day.

We often have to design website. What we should think? there are many books on how to make websites. Many tutorials for how to make websites and there are good ones.

I just thought of sharing a few tips:

1. Never have too many links on the first page
2. Some times it is better to have some clean space rather than trying to fill it up force fully
3. Keep your color scheme aesthetic. But what is aesthetic? Keeping it simple, elegant and professional(often i call it sep)
4. Never use funky fonts in normal text. as not all fonts are with users. if you want ur site to be as a text one that is users shall be allowed to be selected. Than having all these funky or even fonts that are elegant but not default will be unknown to your audience’s pc. So use fonts that are already installed in every pc.
5. It I never a requirement to fill a page up, so be cautious. You might loose visitors because of this.
6. Knowing which technology to use when? Well this is not really a tip but it is an important aspect in website development. Why? If you know there are many technologies in the market. Which one to use? Well it depends all on your requirements… there are many technologies now. Go through tutorials for help regarding what technology.

7.      Pick a host that suits you, your requirements as it matters. Don’t forget google about the hosts reviews etc…

8.      Keep sites name easy to remember if I have a site called xyz.com it is easy to remember rather than a2D3sdfs1d4333.org.pk

9.      See professionals work. Highly recommended. They are the pros. Look at how they do it. You might get inspired by some gurus.

So good luck and start designing, developing and coding a website.:)

Unilever, a famous company for making many things. Their products are used almost in every sector of our life. Let it be cooking, washing, etc. But do they have a good website? Being honest the first thing I noticed, it is good at some places, and at others really looks horrible. It has been neatly arranged, not a fuss any where, apart from the fact unnecessary stuff has been placed on the main page. They can organize their content even more. It’s not sort of professional, it is not aesthetic. No multimedia exists, that’s not an issue that will irritate or ruin the whole website.

I did not like the way the announcement panel was placed, and it was showing only one announcement. The background is not good; it gives the website a weird look. Background is very weird.  A simple gradient would have looked better. The background was not matching at the bottom and the top. It’s a mixture of a pattern, and a gradient. Buttons, act as the link, images or headings can also be used as the links. It’s not bad but it can be better. The hovering is very irrelevant and unaesthetic especially at some places. The hovering tends to cover the image which makes it annoying.

But the good thing was the website was very fast. It tended to load very quickly, and it didn’t consume a lot of my bandwidth.

So in general there are a lot of things they can improve on. So the final scores are:

Organization:              6/10

Navigation:                             7/10

Interface Design:                   3.5/10

Speed:                                     9.5/10

Content Presentation 6/10

Total Score                             6.4/10

URL:http://mutedart.zendfree.com

I won’t be going through the whole process that is I won’t explain how I did every thing since this is not a tutorial to make a website. But just a quick over view of how I made the website.

I started of with an A4 sheet right in front, on which I drew the whole interface that was the proposed interface on paper. Designed my logo on rough A4 so I knew what I was going to design and develop. This is one of the most important stages. Why? It’s because this stage actually tells the developers, designers, (i.e. the web team) what to do. And w hat is required at the final stage. Then I continued with what will I be using in the development of my website? By saying this I am referring to the technologies that I will be using. Choose wisely as the choice made now matters a lot. So I decided to use Html for almost every thing and CSS for buttons. I used notepad as my editor for CSS, there are others like Macromedia Dream weaver, etc.  Then for the designing of my logo, I used Adobe Photoshop. After this I designed the rough layout using tables, Front page, and fire fox for checking the interface.  Than I designed the buttons; the theory behind the buttons:

I knew I was going to use CSS for my buttons; I divided my buttons in two parts. One being the menu from where navigation is allowed and the other being all other links in the web page.

Now before starting to code for the web site, I decided for the color theme, that I will be using in my web page. So I decided the following were the RULES I will be using inn the buttons

a:link {}, a:visited {}, a:hover{}, a: active{}

then for the main buttons that  act as the buttons to transfer I made a list, changed it to inline, the list-style-type property to none. So the bullets don’t come up than placed a border on both left and right to give it a button look. I used the same rules as before. But there is variation in the properties that I used.  One important thing I used external style sheet as that saves a lot of code and does not create a lot of fuss. And I used one style sheet for the whole website.

This is it, I am done with the template then I moved to save page as. Since my template will be the same by referring to template I am saying the basic layout will be the same. Only the area of content will vary. Even that wont vary that much. So I started saving my template as other pages changing the title. I made changes as well as I continued to complete my website. When all my pages were done, I came back for hyper linking. I connected the pages. For images I had decided I won’t open them in he same tab/ window. So in the <a href=”xyz/jpeg”>image thumbnail here</a>I included the target=”_blank”, this opens that particular link in a new tab/window.  The code became <a href=”xyz/jpeg” target=”_blank”>image thumbnail here></a>.

I was done with the site; I was consistently checking my site in fire fox. Now was a time to run a quick run. So I TESTED the whole website clicking on links randomly going from one menu to another. After testing the site, I uploaded my site to my server.

So all the best, happy coding.

URL: www.rolls-roycemotorcars.com

They make million dollar motors, one of the most reputed companies for developing the most beautiful and most luxurious cars. They have potentially the talent in engineering beautiful cars. But do they have a page for worth a million dollar as well? Do they meet international standards as well?

To start of I was really stunned with the website at first glance. Not at all impressed was I impressed, I expected some good web engineering as well. The website was totally made in flash. The idea for the interface was good very neatly organized. But the color combinations were bad. Light gray on a little dark gray and it giving me a hard time to read. The worst thing was it was loading at every page. A pre loader on every page is never a good option. As it totally looses customer interest, the site got boring as all the pages were loading before I could see them.

Another problem is the site was designed at 1024 x 768, when viewed at 800*600 (though this resolution is out of date), but half of the web page was out of the screen.

Apart from this the material is very well organized. Simple and easy to follow the menu. it is Very easy to navigate the webpage. The presentation of the content is very good. This is the place I was impressed by Rolls Royce. They did convey the information in a very professional manner. Apart from this at the initial stage they have options of which bandwidth website you want to use. Another good thing is they have partial 3d view of their cars. Exterior and interior, though it is not 360^o, it would have been better if they gave a better 3d view as that will lets users view the cars without much hesitation. The more options they put the better it gets. But options should be put in such a way that they don’t look bad. But they look professional. So to conclude there are a lot of places where they can put more effort into and make their website the perfect one.

Being honest their website was not what I expected as a big fan of Rolls Royce.

Organization: 7.5/10

Navigation: 8/10

Interface Design: 6/10

Speed: 5/10

Content Presentation 9.5/10

Total Score 7.2/10

Well i did not feel like writing a review for the website as i was really disappointed with many things. A few things will include

The interface is not that impressive, the color scheme is not very good. The number of options available is normal; all other social networking sites offer the same things. There are more launches being done rather than bugs in the older ones being fixed. A lot of spamming was what i noticed. Even though i saw admins, and moderators there. But not much of actions were taken by them against spammers.  The interface is very messy, unorganized and contains a lot of misplaced ads. The shortcuts are not wanted. As they ruin the flow of the website.  In the forum section there are too many smileys.  It’s fine with the fact that it looks good but it is not at all a sign of professionalism. There are many unwanted banners that give the users a hard time. The worst thing is that it wastes my bandwidth. it takes around 5-10 times to open a page and post a reply without any hesitation. So to be honest stop.pk really needs to improve… I hope they do improve there interface otherwise all the effort might be wasted.

well i can just say there were very few things considered to be good.

Here are the scores

Organization:                          4/10

Navigation:                             3.5/10

Interface Design:                   2/10

Speed:                                     1/10

Content Presentation             3/10

Total Score                             2.7/10

As a simple person, it’s quite hard to admit how it is all done. Websites now are almost being used for every purpose. Let it be anything for fun, for portfolios, company websites, shopping, banking, etc. So how is it all done? Can I do it? How much does it Cost? Do I need to be an expert to make a website?

Well it is not as hard as it looks but when you keep on enhancing your website, it gets complicated. The more drastic effects you involve the complex the code gets. So what is behind the entire web? HTML, XHTML, etc allow users to design web pages. There are add-ons such as Java script, ASP, dynamic effects etc.

Well let’s see what an html page looks like

This is a very simple code; you can try evaluating it by copying it and pasting it in notepad and saving the file as *.html where * is the name. You can run the file in any explorer such as Firefox, opera, Internet explorer, Google chrome, etc. The words in bold are referred to as tags a tag is normally enclosed within < —- >. This can be considered as a simple web page which will allow user to create a web page with a black background and white text.

What about a little advance? Well it’s not that complicated. For example the code shown on the right. What will it do? It will do the same thing; the only difference is I added a simple java script which is an alert (error message) will pop up waiting for the user to click ok. The pop up will say “hello world”. The code for this is the code in bold. You can run this code the same way as above. (i.e. save as *.html where *is the file name)

What about graphics in web pages? By referring to thing I am talking about designing a web page? How all the beautiful web layouts are made? This is a question that many people ask to one self. I learnt a little html, but what to do to make beautiful graphics like those. Well the answer is using add-ons such as CSS, etc. and you can create the graphics in Adobe Photoshop. Other graphics software can also be used. Then the graphic is exported to html/htm format. And used for further designing and the development of the web page. The content is added. And finally uploaded to the server and that’s it your website is up and running and accessible to the world. There are some companies that let you design a web page for free of cost using there built in templates. If you want to see the source code of a webpage, right click and click view source in internet explorer, and right click and click view page source in firefox, Google chrome.

So how does it all turn out to be? Well being able to design professional web pages requires a lot of knowledge about web. Since the more things you put in a website the better it gets. The basic of all is HTML, so start off with HTML. And start coding. Happy coding

Hello every one,
I have started work on my website, being initiated with a simple poster being uploaded to the site. and this is the poster. i would be more than happy to hear comments and critics about the site.. please feel free to pass comments about the poster and don’t forget to mention any thing that can be included in the site. i would be more than happy to add some thing …
Have a good day.

Poster for my upcoming site