can anyone suggest me new effects for portfolio section through CSS for our website (www.syruptechnologies.com)?
Pagewise: Link your CSS valid icon to the Validator. Add a HTML4 valid icon too, fix anything broken if it doesn't validate. For images like http://syruptechnologies.com/images/email.jpg - don't use JPG. JPG should never be used except for stuff like photographs. I can see tons of artifacts all over it, and it makes the page look ugly. Same with icon-phone.jpg. On http://syruptechnologies.com/workflow.html, you have a giant image http://syruptechnologies.com/images/img_text.jpg. Don't do that - it doesn't even have an alt=""! Use PNG for your diagrams. CSS: Define multiple fonts. Not everyone has Verdana. Add some stuff to fall back on. Don't use pt, use px or em or %. background-image: url(file:///D|/Sharad%20kumar/Fibroplast/upload/fibroplast/images/bg_curve.jpg); Code (markup): ??? You can save bandwidth/filesize/etc Instead of doing (you are using this): font-family: Verdana; font-size: 8pt; font-style: normal; Code (markup): Use: font: normal 8pt Verdana; Code (markup):
My main focus would be not to have a 100% width site and to have a customized template. When I visit your site I immediately feel like you bought your template on a site like Template Monster, which makes me question your services. It is a good start.
Hey, at least pt obeys the system metric in gecko... I'd sooner see someone use pt than use px. Ok, let's look at this... first off the attempts at using fixed height backgrounds causes broken layout elements at large fonts/120dpi, even as pt you are below accessibility norms on font sizes, anything less that 1280 width appears to break things horribly, the site does not degrade gracefully with images disabled, page loads appear to hang webkit based browsers (as in the page never finishes loading and just sits there) At 267k it's twice the total size it probably should be, and I'm wondering just exactly how you managed to come up with 32 images for THAT (separate images for all those corners maybe?). A big fist in the face though is the 66k of uncompressed markup and 44k of javascript - for WHAT? You've got 7.3k of text content on that page and MAYBE three content images - there's no excuse for the HTML of that page to be more than 16k, meaning over 75% of your HTML is pointless bloat. With 182 validation errors you do not HAVE HTML, you have complete and utter gibberish - the markup is so laden with outdated non-semantic rubbish it begs the question what do you even have external CSS for?!? Tables for layout, div's for nothing, image maps for nothing, redundant/pointless classes, align attributes thrown at EVERYTHING for god only knows what reason, spacer.gif's, inlined javascript (that doesn't appear to actually even be used in the page), not one heading tag to be found, title attributes redundant to the content of their anchors, and even AS a table layout it doesn't use table elements properly (there are tags OTHER than TR and TD that go into tables)... As I've said of several sites lately, there's more of 1997 to that website than 2010 - and throwing CSS at it isn't going to improve anything. My advice is throw it ALL away (as in the entire site) and start over fresh with clean minimalist semantic markup practicing separation of presentation from content. for example this low yield disaster: <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="10"><img src="images/menu_leftcurve.jpg" width="10" height="50"></td> <td width="65%" background="images/bg_menu.jpg"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" class="menutop"><a href="about.html" class="menutop" title="About Us">About Us</a></td> <td width="1"><img src="images/divider.jpg" width="1" height="46"></td> <td align="center" class="menutop"><a href="workflow.html" class="menutop" title="Work Flow">Work Flow</a></td> <td width="1"><img src="images/divider.jpg" width="1" height="46"></td> <td align="center" class="menutop"><a href="web-site-design-services.html" class="menutop" title="Services">Services</a></td> <td width="1"><img src="images/divider.jpg" width="1" height="46"></td> <td align="center" class="menutop"><a href="clients.html" class="menutop" title="Clients">Clients</a></td> <td width="1"><img src="images/divider.jpg" width="1" height="46"></td> <td align="center" class="menutop"><a href="packages.html" class="menutop" title="Packages">Packages</a></td> </tr> </table></td> <td width="20"><img src="images/menu_center.jpg" alt="Website Designing Services" width="20" height="50"></td> <td width="35%" align="left" valign="bottom" background="images/bg_menuright.jpg" class="contentblue"><a href="index.html" class="contentredbold" title="Home">Home</a> | <a href="sitemap.html" class="contentredbold" title="Sitemap">Sitemap</a> | <a href="website-design-firm.html" class="contentredbold" title="Contact Us">Contact Us</a></td> <td width="10"><img src="images/menu_rightcurve.jpg" width="10" height="50"></td> </tr> </table> Code (markup): would be more like this written the 'modern' way: <ul id="mainMenu"> <li><a href="about.html">About Us</a></li> <li><a href="workflow.html">Work Flow</a></li> <li><a href="web-site-design-services.html">Services</a></li> <li><a href="clients.html">Clients</a></li> <li class="last"><a href="packages.html">Packages</a><li> </ul> <ul id="secondMenu"> <li class="first"><a href="index.html">Home</a></li> <li><a href="sitemap.html">Sitemap</a></li> <li><a href="website-design-firm.html">Contact Us</a></li> </ul> Code (markup): ... and probably only need ONE image file to implement it. Everything else going on in that section goes in the CSS. or this mess: <tr> <td valign="top"><table width="95%" border="0" align="center" cellpadding="1" cellspacing="1"> <tr> <td height="20" align="center" class="contentred">Graphics & Multimedia Solutions </td> </tr> <tr> <td><span class="headingblue"> <img src="images/bullet2.gif" alt="website design company india" width="12" height="12"> <a href="logo-design.html" class="headingblue">Logo Designing</a></span> <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="7" valign="top"><img src="images/box/left_top_curve.jpg" width="7" height="7"></td> <td valign="top" background="images/box/top.jpg"><img src="images/spacer.gif" width="1" height="7"></td> <td width="7" align="right" valign="top"><img src="images/box/right_top_curve.jpg" width="7" height="7"></td> </tr> <tr> <td align="left" background="images/box/left.jpg"><img src="images/spacer.gif" width="7" height="1"></td> <td valign="top" class="contentblk">At Syrup design India, we do jaw dropping logo designs which are customized and designed especially for you keeping in mind your company's identity and goals. <br> <br></td> <td align="right" background="images/box/right.jpg"><img src="images/spacer.gif" width="7" height="1"></td> </tr> <tr> <td width="7" valign="top"><img src="images/box/left_btm_curve.jpg" width="7" height="22"></td> <td height="22" align="right" background="images/box/btm.jpg"><a href="logo-design.html" ><img src="images/read_More.jpg" alt="Logo Designing" width="69" height="22" border="0"></a> </td> <td width="7" height="22" valign="top"><img src="images/box/right_btm_curve.jpg" width="7" height="22"></td> </tr> </table></td> </tr> Code (markup): Which would get cut down to: <div class="column"> <h2>Graphics & Multimedia Solutions</h2> <div class="subSection"> <h3>Logo Designing</h3> <div class="borderTop"><div></div></div> <div class="borderLeft"><div class="borderRight"> <p> At Syrup design India, we do jaw dropping logo designs which are customized and designed especially for you keeping in mind your company's identity and goals. </p> </div></div> <div class="borderBottom"><div></div> <a href="logo-design.html" title="Read more about logo designing" > Read More <span></span> </a> </div> <!-- .subSection --></div> Code (markup): The empty div and span being image sandbags for sliding-doors type techniques. I would actually consider dropping the "read more" nonsense and making the H3's be your anchors to 'more' - or at the very least have both. "read more" is vague, meaningless and doesn't do jack for your site being indexed by the search engines. You want to do something with CSS on that page, you need to get your markup out of the 1990's first. I'm not voting because you don't have 'poor' as an option.