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
HTML

DOM (Document Object Model)

It is an abstract, internal representation browsers keep of the page loaded, with all the elements integrating it and the order they were loaded, so it is disposable to JavaScript for further manipulation. It is a convention of the World Wide Web Consortium (W3C) that browsers follow.

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

HTML tags id vs. class

class can be used anywhere (on other elements in the page)

id should be associated to one tag only (although HTML won’t complain if it is not unique). id can also be used as anchors in the HTML to link in the page.

Categories
Compatibility issues HTML HTML5

Making IE6+ browser render as other browser engines

In quirks mode, it acts like IE 5.

Implements most of CSS 2.1 goodness.

To turn off compatibility mode and revert it back to IE 7 behavior, put the following tag in the head:

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

Now, if you want a really good HTML5 ready engine to run on your old IE browsers, put the following tag:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />
That will render pages as in chrome, even as you hit them with IE.
Categories
HTML

Recommended doctype to use

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
Categories
HTML

Browser Quirks mode

When no correct doctype available, browsers fail into quirks mode by default thinking this is an old page written in the times where there were no doctypes available.

It is limited and hard to format (needless to say) avoid it like the plague.

Keyword: best practices

Keyword: doctype

Categories
HTML

h1 tag

Use one per page (ideally), this is your main title.