CSS: make divs auto adjust automatically to different heights on the container div

Basically you put a clear:both at the bottom of the floated elements, to pull the height of the container div down: <html> <head> <style type=”text/css” media=”screen”> #container { background-color:#CCCC99; width:50%; } </style> </head> <body> <div id=”container”> <div id=”left” style=”float:left;background-color:#CCCCCC; width: 40px;”>Too much content it goes off the background of the container div, how do I […]

CSS Sprites

How to generate them. The easiest way is to use SpriteMe generator: http://spriteme.org/ Add it to your browser as a bookmarklet, when you are in the website you want a sprite for click on the bookmark, and click on the “sprite images” button to autogenerate it. You can also get the CSS for it on […]

Modifying CSS directly with JQuery

$(‘#my_tag’).addClass(‘my_class’); // Applies my_class to my_tag (notice we don’t use the dot for the class name $(‘#my_tag’).removeClass(‘my_class’); // The opposite $(‘#my_tag’).toggleClass(‘my_class’); // Adds the class if it wasn’t there, remove it if it was the .css() Jquery function lets you either read the current CSS applied to a tag, or modify it: var bgColor = […]

Browsers: IE problems and browser compatibility issues with IE

IE 6 floating elements that touch each other with a div border, the border of the container get double margin. If you specify 10 for each, you will get 20). The solution: zoom:1 or display:inline – floated elements will behave as blocks, even if you specify display:inline, but nonetheless it will at least fix this […]

CSS layouts, using CSS to layout elements on pages

Types of layouts: fixed width: The page size is fixed, no matter what monitor size it is displayed in. The larger the monitor, the more space wasted. In small monitors, users will have to scroll to see all the content Easy to layout and deal with The majority of websites are fixed width 960 px […]

HTML Form elements and its CSS formatting

<fieldset> Encapsules a set of form fields, that can be styled as a group. Not all browsers behave the same with it. <legend> Provides a label for the fieldset tag, it must follow right after the fieldset tag <input type=”text” /> It is the safest cross browser element in forms that style the same across […]

CSS horizontal and vertical navigation menus and navigation bars

ul.nav li { display: inline; }   Switch view to horizontal positioning          If you have too many buttons though, they will wrap below as they reach the limit of what the browser can display      Note: width of the tabs will depend of the content, since they are inline elements       If you want all tabs the same width, […]