Centering a Div Both Horizontally And Vertically

April 7, 2010

While building web page layouts, you’ve probably been faced with a situation where you need to center a div both horizontally and vertically with pure CSS. There are more than a few ways to achieve this, and in this article we are going to show you our favorite involving CSS and jQuery. But first, the basics: Horizontal centering with CSS .className{ margin:0 auto; width:200px; height:200px; } To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins . This... [Read the full story]

Top of CSS file to reset everything

October 3, 2008

Every browser has different margin and padding values that are set as default. Thats why we prefer to reset all values before building up a site. Most of people add, * {margin:0; padding:0; border:0} to the top of their CSS file to reset everything. But do you really thing that it is enough to reset everything? Use following code block on the top of your CSS file and see what else you’ve missed to reset. a:link, a, a.visited { text-decoration:none; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p... [Read the full story]

Web online generators and tools

June 25, 2008

Below is the complete list of online generators and tools with brief description that particularly for web designers and developers, if you want more details information, just check out the related posts. Rounded Corner Generators 1. Roundedcornr – rounded corners online generator. 2. Spiffy Corners – simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or Javascript. 3. Sitepoint Spanky – an experimental technique for using only CSS to produce ’round-cornered... [Read the full story]

Highlighted Menu in CSS

June 17, 2008

Here is a quick and easy way to make menus with highlighted sub-links. Minimal code for maximum effect. CSS Code #css-target-menu { background: #000; padding: 5px; width: 300px; } #css-target-menu ul { font: 11px “Trebuchet MS”, Verdana, Arial; list-style: none;margin: 0; padding: 0; width: 300px; } #css-target-menu li { background: #000; padding: 2px; } #css-target-menu li:hover { background: #333; } #css-target-menu li ul { width: 224px; } #css-target-menu li ul li a { color: #999; } #css-target-menu li a { color:... [Read the full story]

Custom Textfield Background

May 8, 2008

The benefits to designing your own custom html text fields for use within your site can give you a completely personal look and feel that is totally your own. There are however, also some key disadvantages to this process. You can create any type of design, then use CSS to replace the actual text field background and have your own designed textfield. It’s easier then most would think. It’s the simple things that make or break your site. Now lets look at the code. HTML: <input type=”text” name=”This is the text... [Read the full story]