Del lado del cliente:
Del lado del servidor:
JAVASCRIPT:
¡¡¡Teclea, teclea!!!
El javascripy mola mogollón,
funciona en explorer y también en firefox.
Ponle javascripy a esa paginita,
que el javascripy la deja muy bonita.
Abre ventanas,
muestra mensajes,
valida formularios,
mi amol ya tu sabes!
Programan los seniors,
Programan los juniors,
Programa mi jefe con acentos en el function!
Y el javascripy se programa asi:
1 - el tag <script>
2 - el function vars
3 - el alert-confirm
4 - el return trú
Programa el javascripy,
Programa el javascripy,
programan los heavys, también los frikis
Programan en la offis, programan en la uni,
Programan los fruittis y también los lunnis.
Programa Maradona esnifando una raya,
y Juan Carlos le dice: ¿Porque no usas ajax?
En el formulario de un triste portal,
pusieron javascripy y ya pudo validar
¡¡¡Validar!! ¡¡Validar, validarr, validarrr!!!
Y el javascripy se programa asi:
1 - el tag </script><script>
2 - el function vars
3 - el alert-confirm
4 - el return trú
One of the major benefits of CSS is the ability to control page layout without needing to use presentational markup. However, CSS layout has gained a rather undeserved reputation of being difficult, particularly among those new to the language. This is partly due to browser inconsistencies, but mostly due to a proliferation of different layout techniques available on the Web. It seems that every CSS author has their own technique for creating multicolumn layouts, and new CSS developers will often use a technique without really understanding how it works. This “black box” approach to CSS layout may get quick results, but ultimately stunts the developer’s understanding of the language.
All these CSS layout techniques rely on three basic concepts: positioning, floating, and margin manipulation. The different techniques really aren’t that different, and if you understand the core concepts, it is relatively easy to create your own layouts with little or no hassle.
In this chapter you will learn about
|
Long lines of text can be difficult and unpleasant to read. As modern monitors continue to grow in size, the issue of screen readability is becoming increasingly important. One way designers have attempted to tackle this problem is by centering their designs. Rather than spanning the full width of the screen, centered designs span only a portion of the screen, creating shorter and easier-to-read line lengths.
Centered designs are very fashionable at the moment, so learning how to center a design in CSS is one of the first things most developers want to learn. There are two basic methods for centering a design: one uses auto margins and the other uses positioning and negative margins.
Say you have a typical layout where you wish to center a wrapper div horizontally on the screen:
| 1 | <body> |
| 2 | <div id=“wrapper”> |
| 3 | </div> |
| 4 | </body> |
To do this you simply define the width of your wrapper div and then set the horizontal margins to auto:
| 1 | #wrapper { |
| 2 | width: 720px; |
| 3 | margin: 0 auto; |
| 4 | } |
In this example I have decided to fix the width of my wrapper div in pixels, so that it fits nicely on an 800600 resolution screen. However, you could just as easily set the width as a percentage of the body or relative to the size of the text using ems.
This works on all modern browsers. However, IE 5.x and IE 6 in quirks mode doesn’t honor auto margins. Luckily, IE misunderstands text-align: center, centering everything instead of just the text. You can use this to your advantage by centering everything in the body tag, including the wrapper div, and then realigning the contents of the wrapper back to the left:
| 1 | body { |
| 2 | <strong>text-align: center;</strong> |
| 3 | } |
| 4 | |
| 5 | #wrapper { |
| 6 | width: 720px; |
| 7 | margin: 0 auto; |
| 8 | <strong>text-align: left;</strong> |
| 9 | } |
Using the text-align property in this way is a hack—but a fairly innocuous hack that has no adverse effect on your code. The wrapper now appears centered in IE as well as more standards-compliant browsers (see Figure 7-1).
Figure 7-1. Centering a design using auto margins
There is one final thing that needs to be done in order for this method to work smoothly in all browsers. In Netscape 6, when the width of the browser window is reduced below the width of the wrapper, the left side of the wrapper spills off the side of the page and cannot be accessed. To keep this from happening, you need to give the body element a minimum width equal to or slightly wider than the width of the wrapper element:
| 1 | body { |
| 2 | text-align: center; |
| 3 | <strong>min-width: 760px;</strong> |
| 4 | } |
| 5 | |
| 6 | #wrapper { |
| 7 | width: 720px; |
| 8 | margin: 0 auto; |
| 9 | text-align: left; |
| 10 | } |
Now if you try to reduce the width of the window below the width of the wrapper div, scroll bars will appear, allowing you to access all of the content.
Enough talking, let’s start!
Images
Content
Navigation
Structure
Forms
Multimedia
Extra features
