html-css « WordPress.com Tag Feed

Pseudo-Pseudo Classes

schleichermann — Tue, 09 Sep 2008 19:41:12 +0000

If you need a common chunk of text added before content you can use Pseudo selectors to accomplish this. An example is adding a chunk of text to the front of all blockquote elements in your HTML defining the quote as belonging to a specific category.

blockquote:before { content: "Classical"; }

Or you can use pseudo selectors to add check marks to the front of all links which have been visited by the user.

a:visited { padding: 20px; background: transparent url(/images/check.png) no-repeat top left;

Here are some others you might find useful:

a:before { content:"click here"; }
a:after { content:"click here"; }
p:first-letter { font-size:20px; }

These only work in newer more advanced browsers ( down with IE6 )

a[title] { color:red; } this is how you select a tag using one of its attributes as a qualifier. In other words this selector will only apply the color red to links that have a title.

a[title=special] { color:green; } this one applies the color green to all links which have a title and that title equals "special".

CSS Selector Specificity

schleichermann — Fri, 05 Sep 2008 19:56:05 +0000

To determine which CSS style in your style sheet will outrank the others you need to calculate the "Specificity" for each of the styles based on the selectors used to target the HTML element. To calculate use the following rules:

HTML Tag Selector: 1 point ( i.e. p, div, span )
CSS Class Selector: 10 points ( i.e. class="redText" )
HTML ID Selector: 100 points ( i.e. id="HeaderBox" )

Example Styles:

span { color:yellow; } => has a score of 1 = 1
#HeaderBox span {color:blue;} => has a score of 100+1 = 101
#HeaderBox .redText span { color:red; } => has a score of 100+10+1 = 111

Example HTML:
<div id="HeaderBox"> This text will be blue. <div class="redText"> This text will be red. </div> </div>

This text will be yellow.

Phần 1:Cơ bản về CSS - Cascading Style Sheets

phuocloc — Tue, 19 Aug 2008 14:49:07 +0000

I. CSS là gì?

CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web

II. Một số đặc tính cơ bản của CSS.

CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css"

CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác.

Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt

Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau.

1. Style đặt trong từng thẻ HTML riêng biệt
2. Style đặt trong phần <head>
3. Style đặt trong file mở rộng .css
4. Style mặc định của trình duyệt

Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.

CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã được khai báo ở đầu file css với các thuộc tính như sau:

#vidu {

width: 200px;

height: 300px;

}

Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div id="vidu"> với các thuộc tính.

#vidu {

width: 400px;

background-color: #CC0000;

}

Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:

#vidu {

width: 400px; /* Đè lên khai báo cũ */

height: 300px;

background-color: #CC0000;

}

III.Cú pháp của CSS.

Sau khi hiểu là nắm bắt được một số đặc tính của CSS chúng ta tiếp tục đi tìm hiểu về cú pháp và cách khai báo của các thẻ CSS

Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value).

selector {property: value}

Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của bạn vào trong dấu nháy kép

p {font-family: "sans serif"}

Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;).

p {text-align:center;color:red}

Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt.

p {

text-align: center;

color: black;

font-family: arial

}

Full Browser SWF in Internet Explorer

soulsonic — Tue, 22 Jul 2008 06:58:06 +0000

An easy one to kick this blog off, but something I can never remember when I need it..

So I've been working on a website in Flash that needs to automatically resize, or stretch itself to the browser window (More on how to do that in another post). Works perfectly in Safari, Firefox, and Opera - But of course breaks in IE (No surprise there, huh).

I seem to be getting this unwanted strip of blank space on the right of the screen, and also IE keeps displaying the vertical scrollbar, even though I have used overflow:hidden on both the X and Y axis in my CSS.

So here is the soution:

My SWF is contained in a DIV with the following CSS element to disable the vertical and horizontal scrollbars:

#div {
visibility: visible;
position: absolute;
top:0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
display: block;
border: 0;
overflow-x:hidden;
overflow-y:hidden;
}

Now this works fine for all browsers except IE, in which you need to add the following..

In the body tag set the margins to 0. This gets rid of the unwanted white strip down the side.

and in my css I type the following to get rid of the dead scrollbar in IE:

body {overflow: auto;}

Curso HTML Parte 1 - Lo básico

gmesglenda — Fri, 18 Jul 2008 07:44:49 +0000

Pues este es un pequeño tutorial introductorio de HTML. Se asume que no sabes nada de HTML pero que posees las habilidades básicas de computación.

El HTML, o Hypertext Markup Language, es el lenguaje de marcado mas usado mundialmente para construir páginas web. Quiza hayas escuchado antes de el o no, pero lo mas seguro es que la mayoria de páginas que has visitado, hayan sido construidas con el. El HTML se encarga de organizar el contenido, y las CSS(Cascading Style Sheets u Hojas de Estilo en Cascada) se encargan de su formato, o como este se ve. Por el momento no veremos CSS, asi que no te preocupes mucho por eso.

Ahora sería un buen momento para llenarte la pantalla de la historia del HTML, como funciona, estándares, reglas, etc. PERO! realmente yo creo que para comenzar a aprender HTML, se tiene que practicar, ensuciarte un poco las manos, por eso dejaremos las cosas técnicas para despues. Asi que, comenzemos.

Tu Primera Página

Los archivos HTML no son mas que simples archivos de texto, asi que para comenzar solamente necesitas un editor de texto......increíble no?. Si eres usuario de Windows puedes usar el Notepad, para los usuarios de Linux, cualquier editor de texto servirá: Gedit, Kedit, etc.

Corre tu editor de elección y escribe algo sencillo que tu quieras o algo como esto:

Mi primera pagina web

Un texto sencillo bastara. Ahora crea un folder en cualquier lugar que desees, y llamalo "html". Guarda tu archivo como "primerapagina.html", pues ten cuidado porque algunos editores, como Notepad, guardan con la extension ".txt" asi que es mejor asegurarse de escribir la extensión al final.

Para ver tu archivo solamente necesitas un navegador web, como el Firefox o el Internet Explorer, ahora simplemente abre tu navegador y para ver tu página puedes hacer lo siguiente:

Archivo->Abrir Archivo->Busca la carpeta donde guardaste tu archivo->Abrir
En la barra de dirección, escribe la dirección donde se encuentra tu pagina, ej: "C:\html\primerapagina.html".
O simplemente un doble click la abrira en tu navegador predeterminado.

Y como arte de magia, ahí esta, tu primera página web, date unas palmadas en la espalda...........ahora sigue leyendo.

Etiquetas

HTML podrá ser todo texto, pero aun asi existen algunas características para crear un documento HTML válido. La estructura del HTML incluye las llamadas etiquetas que encierran al contenido para darle algún significado. Cada etiqueta comienza con un símbolo de menor que "<" y se cierra con el símbolo de mayor que ">".

Cambia tu texto para que se vea algo asi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
Mi primera pagina
</body>
</html>

Ahora guarda tu página y refresca tu navegador. No hay ningun cambio notable pero eso esta bien, recuerda HTML es solamente para el estructurar el contenido, no como este se ve.
Analicemos las etiquetas:
La primera linea del !DOCTYPE es para decirle a tu navegador que clase de documento esta tratando, pero eso es un aspecto mas técnico, asi que por ahora no entraremos en detalle, solo recuerda de meter esa línea siempre en tu documento.

La etiqueta html es importante, le dice a tu navegador que todo lo que este dentro de la etiqueta es parte de un documento HTML. Lo que se encuentra entre las etiquetas body es el cuerpo del contenido y es lo que se mostrará en tu navegador.
Por lo tanto, todo aquello que se encuentre adentro de una etiqueta se ve afectado por ella.

Cada etiqueta posee una etiqueta correspondiente a su apertura y a su cierre, por ejemplo: "<html></html>". Aunque las versiones anteriores de HTML permitían dejar las etiquetas abiertas, los estándares de ahora requieren que todas las etiquetas se cierren. Asi que, como consejo, SIEMPRE CIERRA TUS ETIQUETAS.
Hay etiquetas que no se cierran, por ejemplo la etiqueta de salto de línea , que se cierran a ellas mismas.

Las etiquetas tambien poseen lo que se conoce como atributos, que son parametros extras de las etiquetas, se ven algo asi: '<etiqueta1 attribute="valor"></etiqueta1>'. Los atributos siempre van entre comillas dobles. En otro tutorial hablaremos de ellos.

De esto podemos decir que cada etiqueta nos dan el principio y fin de un "elemento", que son las piezas que conforman nuestra página.

Pero a nuestra página le falta algo muy esencial no? El título. Asi que modifica tu documento agregando la etiqueta head donde se muestra:

<html>
<head>
<title>Mi primera pagina</title>
</head>
<body>
...

Si te fijas ademas de la etiqueta head introducimos la etiqueta title la cual nos permite mostrar el título. El elemento head, le da informacion sobre la pagina al navegador. Existen otra información ademas del titulo, que se veran en cursos mas adelante.

Por ahora recarga tu página y veras que tu título aparece en tu navegador.

Párrafos y Encabezados.

Pues una página sin contenido no seria de mucho uso verdad?. Asi que agrega unas cuantas lineas de texto dentro del body de tu archivo, por ejemplo:

...
<body>
Esta es mi primera pagina.
Verdad que es muy genial?
</body>
...

Guarda tu documento, refresca tu navegador y poof!......lo mas probable es que tu texto no salió como lo esperabas. Ahora te preguntaras, "Porque?". Pues los navegadores no leen el texto que escribes sino las etiquetas dentro de las cuales esta contenido tu texto. Si quieres separar por lineas tu texto, tienes que especificarle al navegador lo que quieres hacer, para eso ocupamos la etiqueta de párrafo

Esta es mi primera pagina.
Verdad que es muy genial?

Tambien puedes separar tu texto con la etiqueta , salto de línea, aunque es preferible separar bloques de texto con párrafos.

Si lo que quieres es crear un título o encabezado para tu texto, utiliza las etiquetas de heading. Estas etiquetas van desde h1 a h6, siendo h1 el de mayor prioridad, por ende mas énfasis, y h6 el de menor importancia. Prueba en tu documento incluir estas etiquetas:

...
<body>
<h1>Mi Pagina Genial</h1>
Esta es mi primera pagina.
Verdad que es muy genial?
<h2>Porque es genial mi pagina?</h2>
Porque la escribi yo mismo
</body>
...

Si notas utilizamos las etiquetas en orden, de mayor a menor, se crearon con esa idea en mente.
Como una pequeña nota, cabe decir que la etiqueta h1 solo deberia ser usada 1 vez, ya que es la principal, pero las demas se pueden usar cuantas veces desees, pero teniendo en cuenta el orden.

Si te fijas en los títulos, están en negrita. Si deseas poner en negrita, o énfasis, tu texto utiliza la etiqueta o .

Bueno con eso finalizo la primera parte de nuestro curso de principiantes de HTML, en la proxima entrega veremos mas temas como lo son las listas, tablas, enlaces, etc. Recuerda practica y edita el codigo como se te ocurra para que te hagas una idea de lo que hace cada etiqueta. No tengas miedo, que no hay mejor forma de aprender que la prueba y error. Hasta la proxima!

Page break in HTML pages

syedgakbar — Sat, 21 Jun 2008 14:02:40 +0000

Page break in HTML pages

When generating reports directly in the HTML, it's often required to do a forced page break so that a new sections always prints on a new page. Fortunately, this is very simple with the help of CSS. For this you just need to add the "page-break-before:always" or "page-break-after:always" styles to the tags on which you want to have the page break.

As clear from the name, if you add the "page-break-before:always", it will add a page break before the current tag. Similarly, "page-break-after:always" will create a page break after the current tag end.

Here is a sample code to see this in action

<div style="page-break-before:always">This will print on first page</div>

<div style="page-break-before:always; page-break-after:always">This will print on second page</div>

<div>This will print on third page</div>

Please notice that how we have added the page break before and after attributes on the second page such that we no longer need this on the third DIV tag.

Note: Please note that these attributes doesn't work in FireFox (and most other browsers) when used within tables (cells or rows). When having problem with the page break, make sure the section you want to have break on is not under any table.

Cursor Positions, Selected Text, and A Simple HTML Editor

triaslama — Fri, 06 Jun 2008 11:28:29 +0000

It would be nice if we have a HTML text editor that doing a simple task of HTML editor for us. It works just like HTML view of Wordpress admin page when we write a post. We select the text press specific button and then the selected text will be enclosed with appropriate format. I Test the code in Mozilla Firefox and Internet Explorer, so in both browsers this code should works fine. Here the screenshoots:

Screenshoots page.

We need to prepare the prerequisites.

As prerequisites, at least we need two things. First, we need to know how to define the cursor position inside a <textarea> element, second we need to know how to retrieve a selected text inside a <textarea> element. So, for the first step, I will talk about the both things shortly.

Every browser brings the different behaviour. The browser quirk will make our code a little bit longer because we need to specify different code for different browser. Defining cursor position (current position) is trivial in Mozilla Firefox, but we need a little trick in Internet Explorer. If we want to retrieve selected text in a <textarea> element, both (Forefox and IE) has their own way too.

Defining Cursor Position Inside a <textarea> Element
In Firefox we just need the following code to determine the current position of cursor in a <textarea> element:

var currentPosition = txtArea.selectionStart;

txtArea is a <textarea> element.
Internet Explorer (I use IE 6) doesn't have selectionStart and selectionEnd property, so we need a little more effort to determine start and end position of the cursor (this is a tricky way).
var range = document.selection.createRange(); var drange = range.duplicate(); drange.moveToElementText(txtArea); drange.setEndPoint("EndToEnd", range);

var currentPosition = drange.text.length - range.text.length; var endPosition = drange.text.length - currentPosition;

Defining Selected Text Inside a <textarea> Element
In Firefox we need more effort to retrieve selected text inside a <textarea> element, we get selected text with the help of selectionStart and selectionEnd property. Then split <textarea> value using selectionStart and selectionEnd values.
var txtArea = document.getElementById("txtArea"); var text = txtArea.value; var selectedText = text.substring(txtArea.selectionStart,txtArea.selectionEnd);
In Internet Explorer (IE) we need the following code to get the selected text:
var selectedText = document.selection.createRange().text;

Simple HTML Text Editor
Now we will combine these two things, and get ready for bigger challenge! We will create a simple HTML text editor.
It just works as is, we type something in textarea, select the text and press one of button above the textarea to insert appropriate tag. This simple HTML text editor also work fine with new line and paragraph. So if you place a new line in textarea (by press 'Enter' button) it would be displayed as new line too. The same thing happen for paragraph.

Here a screenshoot of my HTML text editor:

A simple HTML text editor.

Now, lets take a look at the code. I use HTML file for presentation and Javascript code for hadling what should happen under the hood.

 <html>

<head>

<title>HTML Editor</title>

<script lang="javascript" type="text/javascript" src="htmleditor.js">

</script>

</head>

<body>

<input type="button" id="btnBold" value="B" onclick="insertsBoldTag()" />

<input type="button" id="btnItalic" value="I" onclick="insertsItalicTag()" />

<input type="button" id="btnUnderline" value="U" onclick="insertsUnderlineTag()" />

<input type="button" id="btnDelete" value="Del" onclick="insertsDeleteTag()" />

<br/>

<textarea id="area" cols="35" rows="12">

</textarea>

<p>

<input type="button" id="btn" value="Publish" onclick="publish()" />

<p>

<div id="showDiv">

</div>

</body>

</html>

I think the HTML page is quite simple, it draws four buttons (bold, italic, underline, and del button respectively), a textarea, and a publish button.

All processing handled by the following Javascript file:

var area;
var showDiv;
var formattedStr = "";
startPosition = 0;
var endPosition = 0;

window.onload = function()
{
	area = document.getElementById("area");
	showDiv = document.getElementById("showDiv");
};

function publish()
{
	formattedStr = "<pre>"+document.getElementById("area").value+"</pre>";
	showDiv.innerHTML = formattedStr;
}

function insertsBoldTag()
{
	findPositions();

	var text = area.value;
	if (startPosition!=endPosition) {
		var sbStr = text.substring(startPosition,endPosition);
		sbStr = "<b>"+sbStr+"</b>";

		fillsFormattedString(text,sbStr);
	}
}

function insertsItalicTag()
{
	findPositions();

	var text = area.value;
	if (startPosition!=endPosition) {
		var sbStr = text.substring(startPosition,endPosition);
		sbStr = "<i>"+sbStr+"</i>";

		fillsFormattedString(text,sbStr);
	}
}

function insertsUnderlineTag()
{
	findPositions();

	var text = area.value;
	if (startPosition!=endPosition) {
		var sbStr = text.substring(startPosition,endPosition);
		sbStr = "<u>"+sbStr+"</u>";

		fillsFormattedString(text,sbStr);
	}
}

function insertsDeleteTag()
{
	findPositions();

	var text = area.value;
	if (startPosition!=endPosition) {
		var sbStr = text.substring(startPosition,endPosition);
		sbStr = "<del>"+sbStr+"</del>";

		fillsFormattedString(text,sbStr);
	}
}

function findPositions()
{
	var text = area.value;

	if (document.selection) {
		// Internet Explorer
		var range = document.selection.createRange();
		var dpl = range.duplicate();
		if (range.text.length > 0) {
			dpl.moveToElementText(area);
			dpl.setEndPoint("EndToEnd", range);
			startPosition = dpl.text.length-range.text.length;
			endPosition = startPosition + range.text.length;
		}
	}
	else {
		// Mozilla Firefox
		startPosition = area.selectionStart;
		endPosition = area.selectionEnd;
	}
}

function fillsFormattedString(text, selectedText)
{
	// split textarea value into three pieces: before startPosition,
        // startPosition until endPosition, and after endPosition
	var str1 = text.substring(0,startPosition);
	var str2 = text.substring(startPosition,endPosition);
	var str3 = text.substring(endPosition,text.length);

	// replace str2 with formatted substring (selectedText)
	str2 = selectedText;
	// form the new string
	formattedStr = str1+str2+str3;
	area.value = formattedStr;
}

To apply HTML text editor, we need to know how to get cursor positions and how to retrieve selected text.
Lets take a look at Javascript code. In window.onload (happen when our page is load) I retrieve <textarea> and <div> element

window.onload = function()
{
     area = document.getElementById("area");
     showDiv = document.getElementById("showDiv");
};

When we click bold button ('B') the cursor positions (startPosition and endPosition) will be filled with appropriate value depend on what we have already selected. Split the string value using startPosition and endPosition, then enclose the string with tag.


findPositions();

var text = area.value;
if (startPosition!=endPosition) {
	var sbStr = text.substring(startPosition,endPosition);
	sbStr = "<b>"+sbStr+"</b>";

The next step, I split the string into three pieces: first character to startPosition, between startPosition and endPosition, endPosition until last character.
var str1 = text.substring(0,startPosition); var str2 = text.substring(startPosition,endPosition); var str3 = text.substring(endPosition,text.length);

Then I replace the second substring (str2) with selectedText (text that we have already inserted with the appropriate tag). So the result is new string with html tag inside it, and gives it back to textarea.
// replace str2 with formatted substring (selectedText) str2 = selectedText; // form the new string formattedStr = str1+str2+str3; area.value = formattedStr;

The same thing also valid for italic, underline, and del button but we insert , , <del>, for italic, underline, and del button respectively.

When we click 'Publish' button, we retrieve value of textarea and pass it as innerHTML of showDiv element.
formattedStr = "<pre>"+document.getElementById("area").value+"</pre>"; showDiv.innerHTML = formattedStr;

CSS in ASP.NET Server Controls, Declaratively vs. Programmatically

triaslama — Wed, 07 May 2008 00:03:20 +0000

ASP.NET controls has a bunch of attributes that take in order the look and feel of every control. For example TextBox server control, if we want the TextBox color turn into specific color we specify the ForeColor attribute to the name of Color defined in Color structure. If we want the TextBox text font appear in Georgia font, set Font-Name attribute to Georgia. ASP.NET TextBox script for above requirements will look something like this:
<asp:TextBox id="txtTest" ForeColor="Red" Font-Name="Georgia" runat="server" />
It looks simple, right?

But wait, for the one familiar with ASP.NET it doesn't matter, but for everyone who already familiar with CSS maybe there is a bit problem because the attribute name of ASP.NET server controls slightly different with attribute in CSS file. So sometimes we may prefer that the looks and feels of ASP.NET controls ruled within CSS file. And yes, we can do this!

In ASP.NET information within a CSS file can be accessed either declaratively or programmatically, its up to you which one to choose. To make a CSS file visible within our page put this declaration inside our <head></head> tag:

<link rel="stylesheet" type="text/css" href="[filelocation/css_filename.css]" />

Accessing CSS Declaratively in ASP.NET Server Controls
To access CSS file in declaratively style, we need CssClass attribute of every ASP.NET server control. We pass class inside CSS file as value for CssClass attribute. Look at the following code for detail (css_one.aspx):

 <%@ Page Language="C#" %>
<html>

<head>

<title>CSS Inside ASP.NET Server Controls</title>

<link rel="stylesheet" type="text/css" href="../simple2.css" />

<script lang="C#" runat="server">

void ShowText(object sender, EventArgs e)

{

this.lbl.Text = this.txtInput.Text;

}

</script>

</head>

<body>

<form runat="server">

<asp:TextBox id="txtInput" CssClass="TxtStyle" runat="server" />

<asp:Button id="btnSubmit" text="Submit" onclick="ShowText" CssClass="BtnStyle" runat="server" />

<p />

<asp:Label id="lbl" CssClass="Common" runat="server" />

</form>

</body>

</html>

This is external CSS file for the code above (simple2.css):

.BtnStyle
{
   font-family:Times New Roman;
   font-size:20px;
   font-weight:bold;
}

.TxtStyle
{
   font-family:Georgia;
   font-size:17px;
   font-weight:bold;
   border:2px solid goldenrod;
}

.Common
{
   background-color:gainsboro;
   color:red;
   font-family:Courier New;
   font-size:17px;
   font-weight:bold;
}

This is the result of css_one.aspx:

Style of ASP.NET page via CSS.

Accessing CSS Programmatically in ASP.NET Server Controls
Accessing CSS programmatically can be accomplised with the help of Attributes property of ASP.NET server controls. For example if we want apply styles defined in external CSS file in Button object named btn:

btn.Attributes["class"] = "BtnStyle";

The rest should be same as declaratively manner, but I use code behind and put the C# code in separate file (css_two.aspx.cs). This is our presentation (css_two.aspx):

 <%@ Page Language="C#" CodeFile="css_two.aspx.cs" Inherits="CSS.CSSProgrammatically" %>
<html>

<head>

<title>CSS in ASP.NET</title>

<link rel="stylesheet" type="text/css" href="../simple2.css" />

</head>

<body>

<form runat="server">

<asp:TextBox id="txtInput" runat="server" />

<asp:Button id="btnInput" text="Submit" onclick="SubmitValue" runat="server" />

<p />

<asp:Label id="lbl" runat="server" />

</form>

</body>

</html>

In Page directive we add CodeFile and Inherits attributes, because we use code behind in css_two.aspx.cs file and our page will use partial class defined in CSS.CSSProgrammatically class. This class resides in css_two.aspx.cs file. This is the code behind (css_two.aspx.cs):

using System;
using System.Web;
using System.Web.UI;

namespace CSS
{
    public partial class CSSProgrammatically : Page
    {
        private void Page_Load()
        {
            this.txtInput.Attributes["class"] = "TxtStyle";
            this.btnInput.Attributes["class"] = "BtnStyle";
            this.lbl.Attributes["class"] = "Common";
        }

        protected void SubmitValue(object sender, EventArgs e)
        {
            this.lbl.Text = this.txtInput.Text;
        }
    }
}

We use the same CSS file as before. The above files will produce output something similar with the previous result.

bug in Internet Explorer</h1> Carl-Erik — Sat, 19 Apr 2008 12:29:16 +0000 Just thought I would bring along my experience on this little known bug in Internet Explorer. I wrote a little test page the other night, and tried validating it. The W3C Validator complained that the XHTML head tag must have a title tag, and so I just made a blank title tag (without content) in normal, quite valid, XML like this: <code><title /></code> This should be exactly the same as writing <code><title></title></code>, just shorter, something both Firefox and the W3C validator agreed on. But Microsoft Internet Explorer thought otherwise and gave me a blank page! It actually took me more than a day before figuring it out. I though it had someting to do with the CSS all along, and just figured it out by coincidence. Hope someone out there will find this useful ... </article> <article> <h1>DOM & HTML Revisited</h1> triaslama — Fri, 18 Apr 2008 16:52:20 +0000 What can I say about DOM (Document Object Model)? Its lightweight, its everywhere, its some kind useful. How about HTML? its everywhere and its easy. But, I think, the most important about them both is because both doesn't suck! I don't know how about you. I just doing a simple (and I think interesting enough) exploration about HTML & DOM. Let's check it out! Suppose I want to make an element enabled & disabled when I select an item from a dropdownlist (combo box). With HTML it can be accomplished easily! How about if I want to make a new <select> element when I have choose something from previous <select> element?? With mix blend of DOM & HTML it can be accomplished easily too! This page consist of two parts, each of them separated by horizontal lin. This is the screenshots of my simple page: Initial condition, first part and second part separated by horizontal line.  First Part When we select "Others" from fruit dropdownlist the text box will be enabled, otherwise text box will remain disabled. Please aware about one thing, because we only use HTML, DOM, and Javascript this example is stateless. If we refresh the page everything will back to its initial state whatever changes we have made. Others selected, so textbox and button enabled. Everytime we select the fruit dropdownlist change event will be fired, this event will activate selectedItemChange function. selectedItemChange receives one parameter that is fruit dropdownlist value. Then this value evaluated. If value equal with "others" then textbox and button will be enabled. If we click “Add To List” button, value entered in text box will be filled in fruit dropdownlist. Second Part If we select something except the dash (---) a new dropdownlist element will be created and populated with the appropriate values. This is done by following code: <code>var slcTwo = document.createElement("select"); for (var i=0;i<arr[val].length;i++) { var option = document.createElement("option"); var text = document.createTextNode(arr[val][i]); option.appendChild(text); slcTwo.appendChild(option);</code> <code>}</code> <code> container.appendChild(slcTwo); </code> And this is screenshot when a dropdownlist created and populated with appropriate value based on the value of previous dropdownlist. <a href="http://triaslama.files.wordpress.com/2008/04/img_enabled_parttwo1.jpg"></a> Another dropdownlist created automatically and populated with values according to selected item in subject dropdownlist. Now let the code talk for more detail, and here is the complete of HTML code: <div style="background-color:#EFEFEF;font-family:'courier new';font-size:11px;"> <ul> <html> <head> <title>Test Something</title> <script lang="javascript" type="text/javascript" src="explore_code.js" > </script> </head> <body> Fruit: <select id="slcFruit" onchange="selectedItemChange(this.value)" > <option value="banana">Banana</option> <option value="jackfruit">Jackfruit</option> <option value="mango">Mango</option> <option value="orange">Orange</option> <option value="others">Others</option> </select> <input type="text" id="txtMore" disabled="true" /> <input type="button" id="btnAdd" value="Add To List" onclick="addToList(txtMore.value)" disabled="disabled" /> <hr /> Subject: <select id="slcOne" onchange="selectedItemChange2(this.value)"> <option value=""> --- </option> <option value="computer">Computer</option> <option value="sports">Sports</option> <option value="vegetables">Vegetables</option> </select> <div id="container"> </div> </body> </html></ul> </div> Explore_presentation.htm refers to explore_code.js. Javascript code with DOM inside listed below (explore_code.js): <div style="background-color:#EFEFEF;font-family:'courier new';font-size:11px;"> <ul> var arr; window.onload = function() { arr = new Array(); arr["computer"] = ["Hardware","Software","Internet","Programming","Science"]; arr["sports"] = ["Football","Badminton","Tennis","Swimming"]; arr["vegetables"] = ["Cabbage","Carrot","Spinach","Tomato"]; }; function selectedItemChange(val) { var resVal = "others"; var txtMore = document.getElementById("txtMore"); txtMore.value = ""; txtMore.disabled = true; if (val==resVal) { txtMore.disabled = false; btnAdd.disabled = false; } } function addToList(newVal) { var slcFruit = document.getElementById("slcFruit"); var txtMore = document.getElementById("txtMore"); var btnAdd = document.getElementById("btnAdd"); var option = new Option(newVal, newVal); txtMore.value = ""; txtMore.disabled = true; btnAdd.disabled = true; slcFruit.appendChild(option); } function selectedItemChange2(val) { var container = document.getElementById("container"); container.innerHTML = ""; var slcTwo = document.createElement("select"); for (var i=0;i<arr[val].length;i++) { var option = document.createElement("option"); var text = document.createTextNode(arr[val][i]); option.appendChild(text); slcTwo.appendChild(option); } container.appendChild(slcTwo); }</ul> </div> I think it something looks good, how about you? </article> <article> <h1>Curso de Introducción a CSS (Cascading Style Sheets)</h1> hispasystem — Wed, 26 Mar 2008 14:55:53 +0000 <div style="text-align:center;"></div> Pues bien este artículo lo escribiré con el fin de que se inicien un poco en dar estilo a los documentos <a href="http://en.wikipedia.org/wiki/HTMLL">HTML</a>, <a href="http://en.wikipedia.org/wiki/CSS">CSS</a> además también sirve para dar estilo a los documentos <a href="http://en.wikipedia.org/wiki/XML">XML</a> aun así, para estos yo prefiero usar <a href="http://en.wikipedia.org/wiki/Extensible_Stylesheet_Language">XSL </a>(pronto escribiré un artículo sobre esto) Destaco que se dividirá en varias clases. Índice <ul> <li>1. ¿Que es CSS?</li> <li>2. ¿Para que sirve? <ul> <li>2.1 Beneficios</li> <li>2.2 Inconvenientes</li> </ul> </li> <li>3. ¿Cómo funciona?</li> <li>4. Usando las hojas de estilo</li> <li>5. Sintaxis Básica <ul> <li>5.1. Agrupamiento</li> <li>5.2. Herencia</li> <li>5.3. Clase como selector</li> <li>5.4. ID como selector</li> <li>5.5. Selectores contextuales</li> <li>5.6. Comentarios</li> <li>5.7. 5.7. Pseudo-clases y pseudo-elementos</li> <li>5.8. Diseño en cascada</li> <li>5.9. Modelo de formato</li> </ul> </li> <li>6. Usabilidad y Accesibilidad con las Hojas de Estilo</li> <li>7. Editores Web para trabajar con CSS</li> <li>8. Compatibilidad con los Navegadores</li> </ul> Información al usuario: -Si quiere seguir el curso le recomiendo tener un mínimo conocimiento de <a href="http://en.wikipedia.org/wiki/HTML">Html.</a> -Si desean suscribirse pueden mandar un mail a la dirección situada en la sección <a href="http://hispasystem.wordpress.com/contacto/">Contacto</a> o publicando un comentario con la petición de su inscripción. -Pueden seguir el curso sin necesidad de suscribirse pero al no hacer esto, no les ofreceré soporte en sus dudas ni podrán acceder a todas las ventajas que supondrá estar suscrito. Atte: Edgar H.S. Group </article> <article> <h1>Javascript And CSS Animations: The Difference Between Display And Visibility</h1> triaslama — Sat, 08 Mar 2008 04:39:48 +0000 Display and visibility are two properties of style attribute which determine whether an element should appear or disappear. Although both share the same functionality but, display and visibility has important distinctions. In this post I will unveil one of the difference between display and visibility. Here is the scenario: <a href="http://triaslama.wordpress.com/files/2008/03/dispvis_fullview2.jpg" title="Display and Visibility"></a> The above picture produced by HTML and Javascript code, here HTML code (dv.htm): <div> <html> <head> <title>The Difference Between Display and Visibility</title> <script lang="javascript" type="text/javascript" src="dv2.js" src="dv2.js"> </script> </head> <body> Select Mode: <input type="radio" id="rad1" name="rdChoice" checked="true" value="display">Display</input> <input type="radio" id="rad2" name="rdChoice" value="visibility">Visibility</input> To see the difference between display and visibility: select desired mode>>move mouse cursor over the text below>>hold down 'Ctrl' key>>click the element <div id="content" style="border:2px solid black; width:400px;font-family:arial;font-size:17px"> The Difference Between Display and Visibility. </div> </body> </html></div> and this is Javascript code: <div style="background-color:#eeeeee;"><code> window.onload = selectSpan;</code> <code> function selectSpan() { var spans = document.getElementsByTagName("span"); for (var i=0;i spans[i].onmouseover = function() { this.style.backgroundColor = "lavender"; }; spans[i].onmouseout = function() { this.style.backgroundColor = "white"; }; spans[i].onclick = function(e) { // event in IE acessible through window.event property e = e||window.event; var rad1 = document.getElementById("rad1"); var rad2 = document.getElementById("rad2");</code> <code> if (e.ctrlKey) { if (rad1.checked) { //window.alert(rad1.value); this.style.display = "none"; } else if (rad2.checked) { //window.alert(rad2.value); this.style.visibility = "hidden"; } else { window.alert("something else selected."); } } }; } } </code></div> Display mode has several possible values such as none, inline, and block. Visibility has two possible values that is visible and hidden. Setting visibility property of an element to hidden will make that element disappear but still leaving that element in document. Setting the display property of an element to none will make that element looks like just removed from the document / pulled out from the document. To prove this concept, run the code in browser select a mode (display or visibility), move your mouse over an element inside the block then hold down 'Ctrl' key and click element that you want to make it disappear / invisible from document. </article> <article> <h1>Javascript and CSS Animations: The Difference of Element Positioning.</h1> triaslama — Wed, 05 Mar 2008 23:03:49 +0000 Element positioning defines how an element will be positioned in the document. We adjust the element positioning through Cascading Style Sheets (CSS) property named position. In the following example we set div element's position to its absolute location (external CSS): <code> div { position:absolute; top:0px; left:100px; }</code> Position property can hold static, relative, absolute, or fixed value. Below simple explanation and example of each positioning: 1. Static positioning: Static positioning is the default positioning of an element, it just flow one after another like what is appear in HTML source. Top and left properties doesn't affect the document appearance. Consider the following HTML code (positions.htm): <html> <head> <title>Element Positioning</title> <link rel="stylesheet" type="text/css" href="positions.css" /> <script lang="javascript" type="text/javascript" > </script> </head> <body> <div id="firstDiv"> Bunda pernah berkata kurang lebih... (I cut some contents here). </div> <div id="secondDiv"> Setelah ayahku meninggal maka ibuku harus menjadi ‘Single Parent’ bagiku... </div> <div id="thirdDiv"> Pada saat aku sudah bekerja di Jakarta... </div> <div id="fourthDiv"> Bunda sering berpesan agar aku tidak membedakan perlakuan... </div> </body> </html> Positions.htm refers to a CSS file named positions.css, here the external CSS file: <code> div { font-family:verdana; font-size:12pt; border:2px solid goldenrod; background-color:lavender; position:static; width:450px; }</code> The couple of code will give the following result: <a href="http://triaslama.wordpress.com/files/2008/03/positions1_all.jpg" title="positions1_all.jpg"></a> With static positioning the document just flow as what is appear in HTML code. 2. Relative Positioning Relative positioning behaves much like static positioning, but top and left properties affect the document appearance. The position for this positioning relative to its preceding element. Add the following to our CSS file: <code> div.specialized { position:relative; top:-40px; left:-35px; }</code> After that add a class attribute to the 'secondDiv' div element: <div id="secondDiv" class="specialized"> Refresh our page now you will see a page that look like this: <a href="http://triaslama.wordpress.com/files/2008/03/positions1_relative.jpg" title="positions1_relative.jpg"></a> Relative positioning, the element position relative to its preceding element. 3. Absolute Positioning If an element's positioning specified to absolute that element will be pulled out from document flow and precisely placed in the specific position relative to its current parent element that has non static position. If no such exist the element will be placed in specified position toward entire document. Lets change the CSS file into the following: <code> div.specialized { position:absolute; top:0px; left:0px; }</code> Then we should get the following result: <a href="http://triaslama.wordpress.com/files/2008/03/positions1_absolute.jpg" title="Absolute Positioning"></a> Absolute positioning, the element placed absolute to its entire document, if there is exist an element than it will overlap. 4. Fixed Positioning Fixed positioning places an element relative to browser window (viewport), so if we scroll the browser element with fixed positioning will remain in such position. Change our CSS file into the following: <code> div.specialized { position:fixed; top:0px; left:250px; }</code> Refresh our page and try to scroll down the window, and the 'secondDiv' element will remain in the top of viewport! <a href="http://triaslama.wordpress.com/files/2008/03/positions1_fixed.jpg" title="Fixed Positioning"></a> Fixed positioning. Even though we scroll down / up the window, an element with fixed position will remain in its position toward viewport. Note: I try fixed positioning in Internet Explorer (IE) 6 and it doesn't work well. We need IE7 or higher to make it work! Element positioning can make sense in some situations! I hope this useful & thanks. </article> <article> <h1>Javascript and CSS Animations: A Brief Introduction</h1> triaslama — Tue, 04 Mar 2008 21:45:52 +0000 Animations in Javascript and CSS can be accomplished using style attribute. The most frequently used property of style attribute to create animations / special effects are position, visibility/display, size, filter/opacity. The position property figuring how an element placed in the window / browser. Visibility and display determine is an element visible or not. Size determine the size of an element. Opacity / filter determine if an element will be transparent or opaque. Dynamic effects / animations can be achieved by manipulating that properties rightly. For example if we want placed an element overlap with another we can accomplish this task with position property. Want to make an element blur if an event happens? Opacity/filter will come to help us do this. In the next post I will try giving a simple example on how to make animation using Javascript and CSS. But please notice that my next posts only gives simple examples, and aimed only to give some insights on how to make animations and special effects using Javascript and CSS. See you... </article> <article> <h1>HTML & CSS</h1> fungusmungus07 — Sat, 24 Nov 2007 04:38:24 +0000 My expirience with HTML and CSS was very minimal before taking this course. I have worked with basic HTML, but not CSS. I must say this is what I have bee waiting for, to actually get some time with CSS. I found W3 Schools site very useful and has very good useful information. I played around with a lot of the tutorials to see how CSS really works. I found that CSS is not something that is very overwhelming, but does require sometime to learn the concept and rules of it. Once I can mange to learn the symbols and spacing rules, I think I can get a good feel for it. I found that it is a great tool for web designers. It saves a great amount of time when editing pages. I'm looking forward to exploring CSS more and more as time progresses in IMD. Don't get me wrong, I have learned a lot of useful information and useful tools when it comes to our articles that we have to write about on our daily blogs. This class has helped me be more resourceful when looking for answers. Never did I know the tools I have learned in IMD before taking the course. Marco </article> <article> <h1>Putting AdSense into Your Blogger Header </h1> author — Fri, 16 Nov 2007 20:33:08 +0000 Have you ever thought how great and clickable it would be to put your AdSense blocks into your header in your blog on blogger? not near it, not on the top of it or right next to it but in it! To cut the long story about its efficiency and design qualities I will start the code performance! Go to edit HTML and I hope you all know where it is and how to find it))) ok Find this part of code in your HTML: <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='2' preferred='yes' showaddelement='yes'> Found it? now change lines in this code the way I've written in my example, other words, change maxwidgets for 2 and allow showaddelement and so on... Check template--> Page elements and you should be able to see one page element in your header, if you have done everything correct. I'm sure you have!! My congratulations! Now you can easily insert there your HTML/JavaSript code that you have received from <a href="https://www.google.com/adsense/" target="_blank">AdSense</a> or just use Adsense widget in your blogger widgets menu, in two words now you are the king of AdSense on your Blogger <a href="http://www.an-vizit.com/">real estate in Crimea</a> </article> <article> <h1>Creating a Menubar Right Under Your Header in Blogger</h1> author — Thu, 08 Nov 2007 18:39:13 +0000 It will take you a few minutes to create your own Menubar in your Blogger. I haven't fount such page element that is to add a menubar to your blogger. So, believe, if you do exactly in that particular way that is written below, you will get a nice menubar right under your Header and further replace it wherever you want it to be. I've found Menubar more useful and efficient than labels or any other page element in blogger for these purposes to classify your content. Let the show begin! As usual, before doing something, save your template. Then, Template-->Edit HTML and search in your code for lines that I’ve given in red color... <div id=\'header-wrapper\'> <b:section class=\'menubar\' id=\'menubar\' maxwidgets=\'1\' showaddelement=\'yes\'> <b:widget id=\'LinkList2\' locked=\'true\' title=\'Menubar\' type=\'LinkList\'/> </b:section> <b:section class=\'header\' id=\'header\' maxwidgets=\'1\' showaddelement=\'no\'> <b:widget id=\'Header1\' locked=\'false\' title=\'Beautiful Beta (Header)\' type=\'Header\'/> </b:section> </div> And paste between them the code that I’ve given in green. Then in CSS part, only there, in two words, find that part in your code where you have many lines starting with # and paste there as one part following code: #menubar h2 {display:none;} #menubar ul { list-style: none; } #menubar li { float: left; } #menubar a:link, #menubar a:visited, #menubar a:hover { padding: 5px; display: block; color: $headerTextColor; } #menubar a:hover { background-color: $headerCornersColor; } Ok, we will have no title in our Menubar but who needs title for Menubar? Besides, you will be able to set a title for you Menubar in “Page Elements” In some templates they don’t want to save it and give you such error: "Invalid variable declaration in page skin: Variable is used but not defined. Input: headerTextColor" If you received such an error, then just paste the following code right after “Variable definitions” in your template: <Variable name=\"headerCornersColor\" description=\"Menu background color\" type=\"color\" default=\"#fff\" value=\"#e6e6e6\"> <Variable name=\"headerTextColor\" description=\"Menu text color\" type=\"color\" default=\"#c60\" value=\"#5588aa\"> Now save it. No errors? That’s good. All color options and setting will be available in “Fonts and Colors” Have a nice Menubar :) <a href="http://www.an-vizit.com/">site for travellers</a> </article> <article> <h1>Post Summary. Implementing "Read more..." to Your Posts on Blogger.</h1> author — Thu, 08 Nov 2007 18:38:03 +0000 Implementing “Read more button” to your posts is a good method to show on your main page only the beginning of your post in order to make your readers interested. Also, it gives the opportunity to put on your main page a great number of posts without making it incredibly long and difficult to load. This will help you to put only first paragraph or as much as you wish. In blogger I haven’t found tag “more”, which I usually use in such cases, but who cares? I’ve found another way, in the end you will get the phrase “Read more” but you can easily change it to whatever you wish. Let’s get started! To have it properly do exactly what I’ll tell you and before it save your current template! As always Template-->Edit HTML and search for tag </head> and put this code directly before it: <style> <b:if cond=\'data:blog.pageType == \"item\"\'> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> </style> Then... save the template. Important! There is such tag ]]></b:skin> in your template before tag </head> You should paste that the code between them. In that code we have verified the meaning of “fullpost” that will be shown only on your post page. Links Read More... The second is step is to add links Read more... after every post (or in the middle or where you want to divide your post on introduction and fullpost parts). In order to do this enter Template-->Edit HTML and tick the square “Expand Widget Templates” and find in your template such line <data:post.body/> , I sure you have. Found? Paste this code right after it: <b:if cond=\'data:blog.pageType != \"item\"\'> <a expr:href=\'data:post.url\' target=\'_blank\'>Read more...</a> </b:if> Save the template. Now this link will appear only on the main page and will redirect reader to the page with full post text. If everything is ok, then we go to the quality of the link. It’s important for you and readers to see this link, so it should be eye catchy or at lees noticeable. So instead of the last code you can paste this one and “Read more...” will become <big>Read more...</big> <b:if cond=\'data:blog.pageType != \"item\"\'> <a expr:href=\'data:post.url\' target=\'_blank\'> <big>Read more... </big></a> </b:if> Save it! And the last step is to change your post, so to say, actually to divide your post on two parts, one that you want to be shown on the main page and the second one that will be shown only after clicking on the link “Read more...”. Go to Settings-->Formatting and paste this code in “post template”: This part will be shown on the main pageAnd this is the rest of the post Save the settings. Now, when you will be writing your post just write instead “This part will be shown on the main page” what you want to be shown on the main page, and instead “And this is the rest of the post” the rest of the post that will be shown on the page with the full post after clicking on “Read more”. This trick has its advantages. Additional links will serve well in indexing the page and the full post is opening in new tab. However, this is all for blogger, wordpress users don't need all thise efforts to do, WordPress has provided them with  tag to create full posts and post summaries. <a href="http://www.an-vizit.com/">Thanks for the great weekend</a> </article> <article> <h1>Каскадные таблицы стилей и (x)HTML: хитрости и тонкости.</h1> Макс Комаджу — Thu, 01 Nov 2007 11:40:41 +0000 Многие приведенные здесь ссылки, конечно, большинству опытных специалистов будут и ни к чему. Однако для начинающих такой обзор будет интересен. Попробую представить наиболее интересные CSS и xHTML трюки, хитрости, а также полезности. Без комментариев. Предполагается, что обзор будет постоянно пополняться интересными материалами, обновляйте закладки.  1. Работа со списками. <a TARGET="_blank" HREF="http://www.alistapart.com/articles/horizdropdowns/">Выпадающее меню</a> и русский <a TARGET="_blank" HREF="http://webmascon.com/topics/coding/42a.asp">перевод статьи</a>. Общий<a TARGET="_blank" HREF="http://www.alistapart.com/articles/taminglists/"> обзор работы со списками</a>. Также небезынтересен будет сайт, где приведены примеры самых разных списков – <a TARGET="_blank" HREF="http://css.maxdesign.com.au/listamatic/">и отображение в браузере, и код</a>. 2. Z-index и наглядная работа. Очень полезный ресурс - <a TARGET="_blank" HREF="http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp">наглядная работа с z-index</a>; можно пошаманить, поискать нужный вариант. 3. Кодировки и иже с ними. Он-лайн <a TARGET="_blank" HREF="http://rishida.net/scripts/uniview/conversion">конвертация форматов</a> – насколько это полезно, решать читателю. Есть и перевод символов для использования в CSS. 4. Синтаксис CSS. Забавная статья – <a TARGET="_blank" HREF="http://www.rikkertkoppes.com/thoughts/css-syntax/">синтаксис CSS в картинках</a>. <a TARGET="_blank" HREF="http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/">70 полезных советов</a> для правильной организации CSS кодинга. 5. Таблицы и CSS. Не очень подробно, скорее обзорно, но вполне основательно <a TARGET="_blank" HREF="http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/">о таблицах и CSS</a>. 6. HTML/xHTML/XML/CSS редакторы. <a TARGET="_blank" HREF="http://www.maxdesign.com.au/2007/08/08/25-html-editors/">25+19 редакторов</a>, выбирайте, если еще не определились. 7. Колонки - краеугольный камень CSS верстки ;) <a TARGET="_blank" HREF="http://www.boxedcss.com/">Примеры</a>, можно посмотреть, можно скачать. <a TARGET="_blank" HREF="http://glish.com/css/9.asp">Еще</a> несколько вариантов. И <a TARGET="_blank" HREF="http://csseasy.com/">еще</a>. 8. Фон и фоновые изображения. Подробно о <a TARGET="_blank" HREF="http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/">процентном указании позиции</a> фонового изображения. 9. Тэги (x)HTML. <a TARGET="_blank" HREF="http://meiert.com/en/indices/html-elements/">Таблица различий</a> – какие тэги умерли, какие родились. <a TARGET="_blank" HREF="http://www.sitepoint.com/blogs/2007/04/16/html-the-top-five-forgotten-elements/">Теряющиеся тэги</a> – использование не обязательно, но иногда полезно. 10. Цвета. <a TARGET="_blank" HREF="http://www.colourlovers.com/blog/2007/06/30/ultimate-html-color-hex-code-list/">Несколько табличек</a> с гаммами и описаниями цветов. 11. Формы. <a TARGET="_blank" HREF="http://www.sitepoint.com/article/fancy-form-design-css">Краткий обзор</a> возможностей работы CSS с формами. Следите за обновлениями! </article> <article> <h1>IE6 Nasty CSS Freeze</h1> mattwindsurfs — Wed, 31 Oct 2007 04:39:22 +0000 I was pulling my hair out for most of the day. I had a page that was working fine in Firefox and Safari, but every time a certain AJAX response came back, IE 6 would hang. It would go to 90% CPU and need to be killed from Task Manager. I spent hours digging through JavaScript and ERB code, commenting things out, trying to track it down. I got it down to a single table. I commented out various parts of the ERB generating the table for about an hour. The syntax was fine. I was sure the code had no bugs. Getting frustrated I removed almost everything from the table. It was when I removed the style attribute that things finally started working. Here's the change that got it working in the end: <code> /* padding: 5px 0px 5px 0px; */ padding-left: 5px; padding-top: 5px; </code> They do exactly the same thing, but for some reason the first is big trouble. Google points me to other people who have had this problem. From what I can tell, it may be triggered only inside floating div's. I probably had one of those but was ready to call it a day once I found the problem. If you are experiencing a nasty IE6 freeze then check your CSS for shorthand padding like the above. </article> <article> <h1>Simple Javascript Form Field Validation</h1> Meshach — Thu, 09 Aug 2007 20:24:20 +0000 <a href="http://waxjelly.com/2007/08/09/simple-javascript-form-field-validation/">This post has been moved.</a> </article> <article> <h1>Simple Javascript Delete Confirmation</h1> Meshach — Thu, 09 Aug 2007 02:28:54 +0000 <a href="http://waxjelly.com/2007/08/09/simple-javascript-delete-confirmation/">This post has been moved.</a> </article> </main></body></html>