Categories
CSS HTML HTML Templates

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 fix this? Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?</div>
<div id=”right” style=”float:right;background-color:#DDDDDD;”>THis is right floated div</div>
<div style=”clear:both”>This will make the size of container ok, no matter what is the content size of the floating divs</div>
</div>
</body>
</html>

<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 fix this? Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?</div>

<div id=”right” style=”float:right;background-color:#DDDDDD;”>THis is right floated div</div>

<div style=”clear:both”>This will make the size of container ok, no matter what is the content size of the floating divs</div>

</div>

</body>

</html>

keyword: auto-height
Categories
CSS

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 the same UI. Easy.

If you have to build it manually, best practices dictate:

1) Construct a matrix, with predefined square sizes of, for example 5×5, 10×10, 16×16, or whatever your images fit.

2) Drop your icons or images in the squares, since all the squares are the same sizes, you don’t have to calculate the CSS, you can just multiply the row and column number, and there your have your CSS setting

Categories
JavaScript

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 = $(‘#my_tag’).css(‘background-color’); // Reads bg color information into bgColor
    • $(‘#my_tag’).css(‘background-color’,’#FFFFFF’); // Sets the background color of my_tag, you can change multiple CSS properties if you specified the css() argument in between { }
Categories
CSS

Differences between CSS, CSS 2 and CSS 3

  • CSS 2 included the following revolutionary capabilities: absolute, relative, fixed positioning / media types
  • CSS 3 will include some of the following capabilities: Drop shadows without the need of images, multiple backgrounds

 

Keyword: CSS2

Keyword: CSS3

Categories
CSS

CSS visibility vs. display properties

  • Display possible values: none, block, inline, list-item, run-in
  • Visibility possible values: hidden & visible
  • visibility: hidden; don’t show, but stills ocuppy space in the page
Categories
Compatibility issues CSS HTML

Browsers: IE problems and browser compatibility issues with IE

  1. 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 problem
  2. IE 6 there is a 3 pixes gap between floated and non-floated elements
    • float all elements, or
    • * html #mainColumn { margin-left: 0; } �
      * html #sidebar { margin-right: -3px; }
  3. IE 6 sometimes missplaces elements that are positioned using the right and bottom properties
    • zoom:1 on the element that is the predecesor of the elements that have the problem
  4. IE in general: one of your element’s margin is knocked out as soon as users mouseover other elements of the page, so the element is knock out of place.
    • Make this element position:relative, even if you don’t add top or left properties to it, it will make it “behave”
  5. You need to specify code for IE 6 and under.
    • You can use the * key, only understood by those browsers: * html h1 { … your css here …}
    • All other more modern browsers will ignore this
Categories
CSS HTML

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 is a common fixed width setting (accomodates screens of 1024 x 768)
    • In order to accomplish this, usually a wrapper is used <body><div id=”wrapper”>… but you could also style the body tag to accomplish this
  • liquid width: the page automatically modify size according to monitor size
    • on really long monitors, the text will be ridiculosly long
  • elastic width: the size of the page elements is based on em’s, so this depends on browser’s text size settings, losing favor due to modern browser’s zoom capabilities
  • max-width: is a compromise between fixed width and liquid width design
  • min-width: expland elements up to a certain point, and then it stops expanding. It doesn’t work with IE 6.

Layout strategies:

  • Start with a mockup:
    • Write down all your main divs, boxes, sections with a pencil or a graphics program
    • Give approximate pixel size and id to your divs (banner, footer, etc)
  • Use background images for your divs to cover design images
    • Keep in mind though: background images are not SEO friendly, and not printable,
    • To position images that are not background, you can use padding and margins

Float-based layouts

  • Usually when you want to align elements in one row, you float them
  • Two columns design: float one div either to the left or the right, and assign a width to it
    • The other div will sit along the other side, creating the other column.
    • You don’t have to set the widht of the div that is not floated
    • Don’t forget that the element you are floating is before the element that is not (in the HTML), otherwise the other element won’t wrap
  • Three plul columns design
    • Float each column to the right, left, or a combination of both
    • Careful with the total width of the wrapper of the columns, if it is less than the three or more columns combined, the last column will drop off the wrapper.
    • You can use negative margins to move columns around if you need to
    • #footer {clear:both} This is a way to keep your footer, or any other elements you don’t want to be floated from going up along with the floated ones.

Problems with CSS layouts:

  1. Float element is taller than its container.
    • The effect: the floated element gets out of the container, in weird positions.
    • Solution:
      • Put an element at the bottom (before the </div>), and make it clear:both. For example: <br class=”clear”> and then the styling will be br.clear {clear:both}
      • Float the containing div itself: it will force it to accomodate all floats inside of it automatically. If you use this solution, make sure the next element to this newly floated element has style clear:both, so you can avoid problems with the other elements of the page
      • Or you can use overflow:hidden; zoom:1; it works amazingly, don’t ask me why
  2. You have a multi-column design, and the left or the right column is shorted than the center column. You want all backgrounds to be the same size.
    • Solution:
      • Create a wrapper around all the columns.
      • Put the background color as an image repeating y
  3. Several columns are floated, but one or more go below where they are suppose to be
    • The causes:
      • The combination of the width of all columns is bigger than the width of the container
      • In IE 6, floating divs add 3 pixels per width, that exacerbates the problem described above
      • Also in IE 6, double margins are applied to divs, and italics will make divs bigger as well.
      • Other possibility: you are setting your columns in percentages
    • Solutions:
      • Never design containers to be too tight or close to their floating divs, give them enough breathing space

Absolute position

  • Absolute positioned elements are completely off the normal page flow: other elements are not even aware these exist, and could get lost underneath them
  • Absolute position is with respect to the main window (browser), or if the item is nested in a positioned element, with respect to the last ancestor.

Relative position

  • You relocate an element relative to where it was supposed to appear given the normal flow of the page
  • Once the element move from that place, a “hole” is left in its place in the normal flow of the page (as oppose to absolute positioned elements).

Fixed position

  • As you scroll down the page, the element stays put in the same place
  • Sort of the same concept of fixed backgrounds

Static position

  • It is the default of all elements, the element appear in the page where it is suppose to appear

Tips for positioning CSS boxes:

  • Don’t try to position everything in the page, use CSS positioning properties sparingly and only when needed
  • Instead of absolute positioning elements based on the main window, always try to relative position containers, and then use those to absolute position the elements inside of it.
Categories
CSS HTML

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 the board. Things you can change: fonts, background image and color (no images on safari), borders
  • button. Text and colors are customizable, except safari. text-align also works for this.
  • <label for=”name” class=”mylabel”> It allows a label to be attached to a given input field, it goes something like this: <p><label for=”name”>What is your name?</label><input type=”text” name=”name” id=”name” /></p>
  • :focus pseudo-class could be used to add a great effect to the input fields as the user focus on them. But only works on the latest browsers.
Categories
CSS HTML

CSS tables

  • table {width: 100%} Unless you specify this, the width of the table will depend on the size of the content. At 100%, it will stretch to cover 100% of the size of the containing div.
  • td, th {padding: 10px;} This will be the same as specifying cellpadding.
  • image tag quirk: if you have an <img> tag inside a table, and there is an unwanted space below, set the image display:block
  • text-align controls the position of the text within the tables
  • vertical-align: top; baseline (almost same as top, but all the cells have the same “baseline”, or position on top based on the first line of text. middle and bottom.
  • Space between cells. By default, browsers put 2 pixels, border-spacing: 0px; will eliminate that, but IE 7 won’t understand it. For now, better use the old fashioned <table cellspacing=”0″>
  • borders, when used on tables, cells double up borders as they touch up between cells. table {border-collapse: collapse; } will eliminate those double borders, and gets rid of the cellspacing between cells as well.
  • Making rows alternate colors. Unfortunately there is no pure CSS solution (yet). .odd{ background-color: yellow; } applied to <tr class=”odd”> every other row will do
  • Columns, the HTML tag applied to it are: colgroup (group of columns, styles applied to this applies to all columns on the group). For the col tag, only two sets of CSS will work with: width, and background-properties. You can apply id’s and apply styles with it to columns. Cells styling have preference over column styling, which shows underneath cell styling.
  • <table><caption>Your text here shows before the table as a table label, it can be styled</caption>
  • table-layout:fixed; The width of the columns will be calculated off the first row. Faster load, since the browser don’t have to wait for all the rows to load to calculate the width of the columns.
Categories
CSS

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, float the elements instead (see below)
  • ul.nav a {     
      border: 1px dashed #000;     
      border-bottom: none;     
      padding: 5px 15px 5px 15px;     
      margin-right: 5px;    Keeps separation between tabs 
      background-color: #EAEAEA;     
      text-decoration: none;     
      color: #333;     
    }     
  • ul.nav {     
      margin-left: 0;     
      list-style: none;    
      padding-left: 0;    
      padding-top: 6px;    The reason we need to add padding to the ul is because adding it to the a above won’t do anything, since a is an inline element
      padding-bottom: 5px;    
      border-bottom: 1px dashed #000;    
    }