css
Web con libros técnicos
by MigueliTUX on Aug.12, 2009, under HTML, JavaScript, css
En esta WEB encontraran libros técnicos para su descarga totalmente gratis
-
CSS avanzado
-
Symfony, la guía definitiva
-
Introducción a AJAX
-
Introducción a JavaScript
-
Introducción a CSS
-
Introducción a XHTML
-
Referencia de CSS 2.1
gracias http://www.librosweb.es/
un completo taller de CSS
by MigueliTUX on Jun.30, 2009, under HTML, css
Nuevamente navegando encontré un taller CSS
http://www.desarrolloweb.com/manuales/63/
fuente http://www.desarrolloweb.com/
Mostrar ToolTips con javascript
by MigueliTUX on May.28, 2009, under HTML, JavaScript, css
Les han pedido mostrar un tooltips cuando se posicionan en un campo en un formulario web?. Pues he encontrado en una pagina lo siguiente:
function showDiv (el, div, text, alignX, alignY) {
if (document.getElementById) {
var i = document.getElementById(el);
var c = document.getElementById(div);
if (c.style.display != “block”){
var l=0;
var t=0;
aTag = i;
do {
aTag = aTag.offsetParent;
l += aTag.offsetLeft;
t += aTag.offsetTop;
}
while (
aTag.offsetParent && aTag.tagName != ‘BODY’
);
var left = i.offsetLeft + l;
var top = i.offsetTop + t + i.offsetHeight + 2;
if (alignX == ‘left’ && c.style.width){
left = left - parseInt(c.style.width);
}
if (alignY == ‘top’ && c.style.height){
top = top - parseInt(c.style.height) -25;
}
c.style.left = left+’px’;
c.style.top = top+’px’;
c.style.display = “block”;
c.innerHTML = ‘<table cellpadding=”0″ border=”0″><tr><td align=”center”>’ + text + ‘</td></tr></table>’;
} else { c.style.display=”none”; }
}
}
function hideDiv (div) {
if (document.getElementById){
var c=document.getElementById(div);
c.style.display="none";
}
}
Estas funciones nos sirven para hacer el show el hide. Es un div, el cual debe ser incluido en pagina. Asi:
<div class=”popup” id=”Popup” > <table cellpadding=”3″ border=”0″> <tr> <td align=”center”>?sto es un tooltip</td> </tr> </table> </div>
Para formateo en el CSS:
div.popup {
position: absolute;
display: none;
padding: 1px;
border: 1px solid #feba02;
background-color: #fff9e7;
z-index: 99;
width:200px;
}
Como usarlo:
onmouseover=”showDiv(’<ELEMENTO>’,'Popup’,'Mensaje’,'right’,'bottom’)” onmouseout=”hideDiv(’Popup’);”
right es para definir hacia dónde se alargará el Tooltip. Los valores posibles son ‘left’, ‘center’ y ‘right’. En nuestro caso se va a alargar hacia la derecha, anclando su lado izquierdo en la imágen.
bottom es parecido al punto anterior pero verticalmente. Los valores posibles son ‘top’, ‘middle’ y ‘bottom’. En nuestro caso se mostrar? el tooltip por debajo del elemento de anclaje.
Ojala les sirva
Esconder dirección email con CSS
by MigueliTUX on May.18, 2009, under HTML, css
Una buena alternativa para que los odiados spambots no se apoderen de tu dirección email es usar CSS
aquí dejo un ejemplillo.
lo primero es definir una hoja de estilo, la llamaremos estilo.css … (genial)
con el siguiente contenido:
address:after{
content: ” <contacto\40 tips.cl>”;
}
Luego creamos nuestra página web llamada index.html, con el siguiente código:
<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<address>Tips.cl ..si tienes algún Tips… envíalo a </address>
</body>
</html>
y listo…
pruébalo en tu navegador favorito…
no quieres que impriman tu página??
by MigueliTUX on May.18, 2009, under css
Si no quieres que impriman tu página
mira el siguiente ejemplo:
1.- Primero crea una página llamada index.html
en la página escribe lo siguiente:
<html>
<head>
<link href=”hoja.css” rel=”stylesheet” type=”text/css” media=”print”>
</head>
<body>
<div class=”nover”>… Esta pagina no se puede imprimir
lo siento….
</div>
</body>
</html>
2.- Crea un archivo css llamado hoja.css
escribre dentro lo siguiente
.nover{
visibility:hidden
}
Luego prueba la pagina en tu navegador
Publicidad
