Foros del Web - FAQ's de CSS

Página 2 de 3

Mostrar 50 mensajes desde este tema en una página

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - FAQ's de CSS (http://www.forosdelweb.com/f53/faqs-css-114830/)

jamesxv7

29/12/2003 14:53

Faq-33

P: Puedo usar Pseudo-clases con Clases en CSS?
R: Si... ejemplo:

Código:

a.colores:visited {color: #FF0000}
 

<a class="colores" href="pagina_web.php">Ejemplo combinando Pseudo clases y Clases</a>

epa2	07/01/2004 06:00

Faq-34

ESTILO DE LISTAS SIN ORDENAR

Créditos: Bravenet

Código:

<style type="text/css">

ul.disc {list-style-type: disc;}

ul.circle {list-style-type: circle;}

ul.square {list-style-type: square;}

ul.none {list-style-type: none;}

</style>

<ul class="square">

<li>ecommerce</li>

<li>webtools</li>

</ul>

<ul class="disc">

<li>ecommerce</li>

<li>webtools</li>

</ul>

<ul class="none">

<li>ecommerce</li>

<li>webtools</li>

</ul>

<ul class="circle">

<li>ecommerce</li>

<li>webtools</li>

</ul>

<ul class="none">

<li>ecommerce</li>

<li>webtools</li>

        <ul class="square">        

        <li>ecommerce</li>

        <li>webtools</li>

                <ul class="circle">

                <li>ecommerce</li>

                <li>webtools</li>

                        <ul class="disc">

                        <li>ecommerce</li>

                        <li>webtools</li>

                        </ul>

                </ul>

        </ul>

</ul>

furoya

07/01/2004 17:18

Faq-35

P : ¿Cómo puedo cambiar el tamaño relativo de las barras de desplazamiento?.
R : Existe un bug en Internet Explorer por el cual considera al scrollbar como parte del documento. Desde la versión 5.5 es posible usar el atributo CSS zoom que, aplicado sobre el BODY, cambia el tamaño del documento y sus barras de desplazamiento.

El truco para que sólo los scrollbar se vean de distinto tamaño está en poner nuestro contenido dentro de un DIV y darle un zoom con un factor inversamente proporcional al que tenga el BODY.

Por ejemplo : si el valor por omisión del zoom es de 100%, y el BODY tiene aplicado uno de 200% ( el doble ), en el DIV habrá que poner uno de 50% ( la mitad ). Ésto compensa el cambio original creando el efecto de "scrollbar agrandado"

Código:

<HTML>

<HEAD>

<STYLE> 
 body {zoom:2; margin:0; border:none} 

</STYLE>

</HEAD>

<BODY>
 <DIV style="zoom:0.5; margin:2% 1.5%"> 

<h2>DOCUMENTO </h2>
 

QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 

QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 

QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 

QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 

QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 
 </DIV>

</BODY>

</HTML>

En el tema "Propiedades del scroll " hay un script que permite calcular ambos valores de zoom con una vista previa.

furoya

w|six-nine

07/03/2004 19:30

Faq-36

FAQ 36

P: Aplicar dos o más clases a un mismo elemento

R: Supongamos que queremos que un elemento, por ejemplo un párrafo (<p>), tenga las declaraciones de dos clases distintas:

Nuestro archivo estilo.css:

Código:

.aviso {

    font-weight: bold;

    border: 1px solid #c00;

}

.centrado {

    text-align: center;

}

Nuestro archivo XHTML:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="es-ES">
 

<head>
 

<title>Aplicando varias clases a un elemento</title>
 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

</head>
 

<body>
 

<p class="aviso centrado">

    Este es un p&aacute;rrafo de aviso y con el texto centrado.

</p>
 

</body>
 

</html>

Como veis es tan sencillo como escribir las clases que queramos aplicar al elemento en cuestión separadas por un espacio. Esto se puede incrementar si creamos un selector de ID (# en lugar del .) y declaramos mas propiedades.

Esta propiedad se debe a que las declaraciones de estilo soportan la herencia, tanto como si en dos archivos declaramos la misma clase, añadiendo ciertas declaraciones ademas de las que ya tenía, como si hacemos lo que yo os propongo en esa FAQ, que es "sumar" las declaraciones de dos clases en un solo elemento.

Como apreciación, decir que las hojas de estilo aplican (si es que existe otra anterior) la ultima declaración, de ahí su nombre de hojas de estilo en cascada; es decir, que si en la primera clase declaramos una alineación a la derecha, y en la siguiente clase que le aplicamos al elemento, declaramos una alineacion centrada, el elemento va a tomar la última.

derkenuke

16/03/2004 11:43

FAQ 37

P: ¿Como poner un borde double con diferente color cada linea? :pensando:

R: La respuesta la encontre sin querer: :-)

Código PHP:

   <table border="1" style="border:solid 1 blue;" bordercolor="red">

    <tr>

        <td>Contenido bordeado</td>

    </tr>

</table>

Se pueden hacer cosas interesantes y esteticas por ejemplo si ponemos al style: "border:double 4 blue;"

Y si luego hacemos tonterias con los atributos de tablas y juntandoles css buenooo.. :-D

Código PHP:

   <table border="1" style="border:double 4 blue; border-left-color:black; border-top-style:dotted;" bordercolor="red" bordercolordark="#c0c0c0">

    <tr>

        <td>Contenido bordeado</td>

    </tr>

</table>

Bueno y a partir de ahi lo que querais, espero que os sirva ;-)

Un saludo a todos :adios:

Rebel001

31/05/2004 17:25

Faq-38

E aquí otro estilo que me gusta mucho

Código:

/* Base , Set up fonts etc.    */

body

{

        font                                : 0.8em Trebuchet MS, Arial, Sans Serif;

        background-color        : #888888; 

        margin                                : 0px;

        padding                                : 10px 0px;

}

h1

{

        font                                : bold 1.4em Trebuchet MS, Arial, Sans Serif;

}
 

a, a:visited

{

        text-decoration                : underline;

        color                                : #b9a1e6;

}

a:hover

{

        color                                : #e6e6e6;

}
 
 

#extraContent a, #extraContent2  a:visited, #extraContent2 a, #extraContent2 a:visited

{

        text-decoration                : underline;

        color                                : #ccb1fd;

}

#extraContent  a:hover, #extraContent2  a:hover

{

        color                                : #fdfdfd;

}
 
 

#pageHeader a, #pageHeader a:visited, #pageFooter a, #pageFooter a:visited

{

        text-decoration                : underline;

        color                                : #ccb3ff;

}

#pageHeader a:hover, #pageFooter a:hover

{

        color                                : #ffffff;

}
 
 

#pageWrapper

{

        width                                : 760px;

        margin                                : 0px auto;

        border                                : solid #9278c7;

        border-width                : 1px;

        background-color        : #080017;

}
 

#pageHeader 

{

        background                        : #270073;

} 

#pageHeader h1

{

        font-size                        : 150%;

        margin                                : 0px;

        padding                                : 2px 20px 2px 5px;

        color                                : #ffffff;

}
 

#mainContent

{

        position                        : relative;

        margin                                 : 10px 10px 10px 220px;

        background-color        : #080017;

        color                                : #d7cfe6;

}
 
 

#extraContent, #extraContent2

{

        display                                : inline;

        float                                : left;

        clear                                : left;

        width                                : 198px;

        margin                                : 10px;

        border                                : 1px solid #9278c7;

        background-color        : #10002e;

        color                                : #fdfdfd;

}

#extraContent

{

        margin-bottom: 0px;

}

#userLinks

{

        display                                : inline;

        float                                : left;

        clear                                : left;

        width                                : 200px;

        margin-left                : 10px;

}
 
 

#userLinks h1

{

        font-size                        : 100%;

        padding                                : 2px 5px;

        background-color        : #1f005c;

        color                                : #eee6ff;

        border                                : 1px solid #9278c7;

        margin                                : 10px 0px 0px;

}
 

#userLinks ul

{

        display                                : block;

        list-style-type                : none;

        margin                                : 0px;

        padding                                : 4px 10px;

        background-color        : #10002e;

        border                                : solid #9278c7;

        border-width                : 0px 1px 1px;

        color                                : #fdfdfd;

}
 

#extraContent a,  #extraContent a:visited, #userLinks ul a, #userLinks ul a:visited

{

        color                                : #fdfdfd;

}

#userLinks ul a:hover, #extraContent a:hover

{

        color                                : #ccb1fd;

}
 

#pageFooter

{

        clear                                : both;

        border                                : solid #9278c7;

        border-width                : 1px 0px 0px;

        padding                                : 5px;

        background-color        : #270073;

        color                                : #eee6ff}
 

#pageFooter h6

{

        padding-left                : 10px;

        margin                                : 0px;

        font-size                        : 90%;

        font-weight                        : normal;

}
 
 
 
 
 

/* Top Horizontal Navigation */
 

#siteNavigation

{

        width                                : 100%;

        border                                : solid #9278c7;

        border-width                : 1px 0px;

        background-color        : #1f005c;

}

#subPageBreaker

{

        display                                : none;

}

#listBreaker

{

        clear                                : both;

        display                                : block;

}
 

#siteNavigation ul

{

        list-style-type                : none;

        margin                                : 0px;

        padding                                : 0px;

}
 
 

#siteNavigation ul li 

{

        display                                : inline;

}
 

/* Setup Navigation Buttons */
 

#siteNavigation a, #siteNavigation a:visited

{

        font-size                        : 90%;

        font-weight                        : bold;

        float                                : left;

        padding                                : 2px 10px;

        text-decoration                : none;

        background-color        : #1f005c;

        color                                : #eee6ff;

}

#siteNavigation a:hover

{

        background-color        : #10002e;

        color                                : #ede4fd;

}
 

/* No title for horizontal navigation */

#siteNavigation h1

{

        display                                : none;

}
 
 

#bntag

{

        background-color: #080017;

        color                                : #d7cfe6;

        padding: 2px 0px; 

        text-align: center;

        width        : 760px;

        margin        : 0px auto;

        font-size: 90%;

}

epa2	08/06/2004 08:34

FAQ-39 Lineas Horizontales Con Css, Un Poquito MÁs

Hola amigos, aquí teneís unos buenos consejillos para poner mas "guapa" esas líneas horizontales en la page <hr>

Creo que solo vale para IE. pero bueno,
Creditos: Bravenet.

SIMPLE LÍNEA CON COLOR Y ANCHO

Código:

<hr style="background-color:#f00;height:3px;">

LINEA CON ANCHO, COLOR Y COLOR DE BORDE

Código:

<hr style="background-color:#f00;height:3px;border-color:#ff00ff">

LINEA CON BORDE Y CON IMAGEN DE FONDO

Código:

<hr style="background-image: url(/imagen.gif); height:6px;">

:corazon: :adios:

epa2	28/09/2004 04:48

FAQ 40
Pregunta: ¿como puedo en mi página web o sitio personalizar el cursor del ratón para los visitantes de mi page?
Observaciones: Esta faq proviene de la número 3 editada por Tunait
Créditos: Bravenet
Respuesta: Primero, con algún programilla tipo editor de cursores, crea tu propio "dibujito". Los archivos de cursores suelen ser los de extensión .cur o .ico o cualquier otra extensión como jpg, gif, png, etc...
Una vez creado/elegido el "dibujito" para el cursor copia en siguiente código en el tag head de tu page....

Código PHP:

   <style type="text/css">

body, a 

{cursor: url(http://www.tusitio.com/cursor.cur);}

</style>

nos vemos por la feria del tocino

salu2

epa2	28/09/2004 05:08

FAQ 41
Observaciones y consideraciones: Por motivos que no voy a explicar al caso, existen navegantes que odian los iframes en una página web. Una buena opción para "sustituirlos" son las capas o div, por eso, cabe preguntarse....

pregunta: ¿Cómo puedo personalizar un div utilizando CSS?
Respuesta: Mira el código más abajo
Créditos: Bravenet

Código PHP:

   <div style="border: 1px solid #aaa;background-color:#f9efef; height:65px; overflow:auto; color:#135;">

 
<p>Escribe aquí o inserta lo que irá de contenido en la capa.</p>

 
</div>

notas finales: Observa en el ejemplo del código que no se ha establecido el width de la capa, si lo quisieras añadir, tan solo escribe width: 100px despues de la estiqueta <div style= así como....
style="width: 100px; border: 1px solid #aaa...

Observa tambien que la capa imitando al iframe será con el scroll automatico.

Tambien puedes cambiar el color del borde y fondo de la capa cambiando el valor exadecimal despues del caracter #

En fin, nos vemos por la feria del tocino

Makermax

11/11/2004 23:42

Faq 42

Faq 42

Pregunta: ¿Por qué a veces en Mozilla o Netscape, no se ven los estilos como los declaré antes en el CSS?
Respuesta: Netscape o Mozilla reconocen clases que esten escritas sólo con letras.

Por ejemplo:

Código PHP:

   .menu1 {TEXT-DECORATION:underline;color: #FFFF00;}

No lo va a soportar netscape, pues la clase tiene un número ( .menu1)

En cambio...

Código PHP:

   .menua {TEXT-DECORATION:underline;color: #FFFF00;}

Si lo va a soportar y lo va a leer bien, como corresponde.

//Después de mucho, descubrí esto y quizás a alguien más le pueda servir.
:cool: Adiós!

KnowDemon

26/12/2004 22:54

FAQ 43. Rollover con precarga SIN javascript

Pregunta: ¿Es posible construir un rollover con CSS?

¡Es posible!... :-D

Como será construido:

Utilizaremos un div, un elemento a, y un span para crear nuestro rollover.

Supongamos que nuestro rollover mide 100x50 pixeles.

El HTML quedará más o menos así:

<div id="resaltado">
<a id="sinresaltar" href="pagina.html"><span>Texto</span></a>
</div>

Y el código CSS así:

div#resaltado, a#sinresaltar{
height: 50px;
width: 100px;
}
div#resaltado{
background: url(resaltado.png);
}
a#sinresaltar{
display: block;
background: url(sinresaltar.png);
}
a#sinresaltar:hover{
background: transparent;
}
a#sinresaltar span{
display: none;
}

El div nos servira para precargar la imagen de resalte del rollover pues lo usamos como su fondo... que solo se descubrira cuando pase el ratón sobre a, de los contrario se verá el fondo de a, que es el rollover sin resaltar.

El span lo usamos para aquellos gestores de contenido no gráficos, para que el usuario tenga información sobre el enlace... En navegadores gráficos no se verá...

Voalá!!!!

Durgeoble

04/01/2005 04:51

Faq 44 - Clases y elementos

Pregunta: ¿como aplico un mismo estilo a varias partes del documento sin repetirlo cada vez?
Pregunta: ¿puedo aplicar un estilo a un elemento que este dentro de otro sin definirlo?
Pregunta: ¿que son y como funcionan las clases?¿y los elementos?
Respuesta: Si se puede, lee a continuacion
Elementos
Un elemento es cualquier identificativo html:

table
div
p
span
b
body
ect

todos son elementos a los cuales se les puede aplicar propiedades, cualquier etiqueta html es subcestible de ser un elemento.

La forma correcta de aplicar propiedades a un elemento es la siguiente:

Código:

elemento { propiedad1: valor; propiedad2: valor; propiedadX: valor;}

Clases

Una clase no es mas que un identificativo que le ponemos a una etiqueta html (no confundir con #id) para situarla dentro de un grupo.

Las clases las definimos nosotros mismos, por ejemplo:

.miclase
.cabecera
.comentario
.wea
.loquesea

y aplicarla a un elento es tan sencillo como incluir class="clasequequeramos" en dicho elemento.
Ejemplo:

Código HTML:

 <b class="miclase">texto</b>

 <b class="otraclase">texto</b>

 <b>texto</b>

esto haria que el primer <b> fuera de la clase miclase, el segundo de otraclase y el tercero no perteneciera a ninguna.Es preferible no usar numeros en las clases ya que pueden ocasionar conflictos en algunos navegadores.

La forma de aplicar las propiedades a una clase es identica a la de aplicarlas a un elemento.

Con una clase se pueden aplicar propiedades a elementos distintos.
Por ejemplo:

Código HTML:

.colorrojo { color: red; }

haria que esto

Código HTML:

    <table class="colorrojo" >

    <p class="colorrojo">

    <a href="direccion" class="colorrojo">

saliera en todos los casos en color rojo

Mientras que

Código:

 .colorverde { color: green;} 

 b.colorverde { color: red;}

haria que cualquier etiqueta con clase .colorverde tuviera texto verde excepto las <b> que lo tendrian rojo.
Tambien puedes poner elementos anidados

Por ejemplo tienes una tabla con celdas azules y texto rojo y zeldas rojas y texto azul (muy hortera lo se :P)
Las celdas son .roja y .azul (aqui valdria cualquier elemento table, p, span, div, tr.yoquese, ect)

Código HTML:

 .rojo a {color: blue;}

    .azul a {color: red;}

De esta forma cualquier elemento .rojo que contuviera un enlace este seria azul (hasta haverlo visitado, para eso esta a:hover y a:visited) y cualquier elemento .azul contendria enlaces en rojo
Otro ejemplo

Código HTML:

 table div { color: lime;}

 p div {color:black;}

haria que el texto dentro de un div que estuviera en una tabla fuera lima mientras que de estar dentro de un <p>(parrafo) seria negro (en caso de estar dentro de un <p> que estuviera dentro de una tabla seguiria siendo negro puesto que el div estaria subliminado al <p> no al table

Para mas informacion http://html.conclase.net/w3c/css1-es.html

Espero haver ayudado

epa2	07/01/2005 10:50

FAQ 45
Pregunta: ¿Cómo puedo crear un efecto de sombra utilizando css
Respuesta: Con este sencillito código, la idea es crear dos capas casi iguales que "casi" se solapen..

Código PHP:

   <HTML>
<HEAD>
</HEAD>  
<BODY bgcolor=yellow>  


<DIV style="position: absolute; 
top: 15px; 
width: 370px;
height: 80px; 
font-size: 60pt; 
font-family:Verdana; 
color:808080">EPA2</DIV>
 
<DIV style="position: absolute; 
top: 10px; 
width: 370px;
height: 80px; 
font-size: 60pt; 
font-family:Verdana; 
color:red">EPA2</DIV>

</BODY>
</HTML>

:adios:

Durgeoble

09/01/2005 12:57

Faq: 46

FAQ 46
Pregunta: ¿como puedo meter imagenes en mi pagina y que se ajusten al tamaño que yo quiero sin usar un programa de edicion grafica?
Pregunta: ¿como puedo evitar que una imagen me descoloque el contenido?

Respuesta: con max-width , max-height , min-width

Código:

 

 div.imagen img {

 width: 100% ;

 heigth: 100% ;

 }

 /* Aqui se especifica el tamaño maximo en ancho y alto de la imagen */

 .imagen {

 max-width: 100px;

 max-height: 200px;

 }

 /* Si queremos que se ajuste al espacio disponible sin tener que definirlo

  cada vez */

  .imagen {

  max-width: 100%;

  max-height: 100%;

  }

De esta forma cualquier imagen contenida en un div con class="image" se ajustara automaticamente en tamaño al especificado del div.

Matthew_182

15/01/2005 11:59

FAQ: 48
Pregunta: ¿Cual es la diferencia de :Link a .Link?
Respuesta: :Link se aplica a todos los link y .Link tienes que seleccionarlo manualmente para que funcione.
-----------------------------------------------------------------
Si hacemos esto (Ponemos : en vez de .) :

Código HTML:

<html>

  <head>

      <style type="text/css">

       :Link {

       text-decoration:none;

       color:000000;

       }

      </style>

  </head>

  <body>

      <a href="#">Mi link </a> 

  </body>
 </html>

Todos los links inmediatamente quedan negros sin subrayar
-------------------------------------------------------------
Pero si hacemos esto (le agregamos el . en vez de :) :

Código HTML:

<html>

  <head>

     <style type="text/css">

        .Link {

       text-decoration:none;

       color:000000;

       }

     </style>

  </head>

  <body>

    <a href="#" class="Link">Mi link </a> 

  </body>
 </html>

Para que funcione tendriamos que agregarle dentro de <a href="#"> esto class="Link" que seria igual a esto <a href="#" class="Link">.

andreusup

11/02/2005 14:34

Faq 49

FAQ 49

PREGUNTA :: ¿Es cierto que el MSIExplorer implementa 'mal' o no implementa ciertas directivas de CSS? ¿Qué se puede hacer para solucionarlo?
RESPUESTA :: Sí a la primera pregunta. Para solucionarlo sólo nos queda escribir el código duplicado en esos casos. Ahora bien... he aquí un truco para hacer esto más fácilmente.

Imaginemos que queremos fijar una capa mediante CSS::

a) si todos implementasen bien podríamos hacer...

#capaFija {
position:fixed;
}

b) como no lo hacen hay que duplicar código...

#Fija { /* para MSIExplorer */
position:absolute;
top:0;
left:0;
}

html>body #Fija { /* para los que implementan bien */
position:fixed;
}

c) hacer lo siguente tiene el mismo efecto que b) y nos ahorramos código

#Fija{
position:fixed;
_position:absolute;
...
}

La propiedad '_position:absolute;' será ignorada por la mayoría de los navegadores excepto por el explorer (ya que éste es capaz de 'leer' propiedades que empiecen por _).

Para más información visitar la página ::
http://wellstyled.com/css-underscore-hack.html

PD: El ejemplo es un poco chorra, lo sé. De todos modos espero que se captara el poder de los guiones-bajos, ;-)

Un saludo y Salud!

andreusup

11/02/2005 15:19

Faq 50

FAQ 50

PREGUNTA ¿Cómo alinear verticalmente un texto dentro de una capa?
RESPUESTA Lo que sigue...

Ejemplo típico/tópico de cabecera con imagen...

<div id="cabecera">
<img src="unaImagen" />
<div><span>Texto a centrar</span></div>
</div>

Esto estaría centrado hor. y verticalmente si en el archivo estilos.css tenemos...

#cabecera{
display:table;
...
}

#cabecera div{
display:table-cell;
/*de este modo podemos aprovechar las opciones de una celda
como por ejemplo vertical-align */
vertical-align:middle;
text-align:center;
}

Vale. Pero esto no se ve bien en el explorer ... :molesto: qué hacer?

Lo siguiente

#cabecera{
display:table;
...

}

#cabecera div{
_position: absolute;
_top: 50%;
display: table-cell;
vertical-align: middle;
text-align:center;
}

#cabecera span{
_position: relative;
_top: -50%;
}

Para saber más sobre esto podéis visitar los enlaces siguientes...
http://www.jakpsatweb.cz/css/css-ver...-solution.html
http://wellstyled.com/css-underscore-hack.html

o en el foro...
http://www.forosdelweb.com/f4/capas-dreamweawer-205350/

dobled

20/04/2005 00:28

FAQ 51

PREGUNTA ¿Se puede ocultar la dirección de mail con css?
RESPUESTA Asi como ocultar no pero si hacerla ilegible para los spiders

Vamos al code

aplicar la clase 'revMail' a la dirección escrita al revés:

moc.oinimod@oy_yos

Y definir la clase 'revMail', en la hoja de estilo, de la siguiente forma:

Código:

.revMail {unicode-bidi:bidi-override; direction: rtl; color:#c00;}

Lo que hace que cualquier texto, que tenga aplicado esa clase, se escribirá en orden inverso.

El_Metallick

17/07/2005 17:06

Faq 52 - Videotutotiales

videotutoirales de CSS http://www.nomaster-reloaded.com/tele/css.htm espero que sea de ayuda saludos

braulito

20/08/2005 16:16

Faq 53 - ¿Cómo Centrar vertical y horizontalmente un objeto?

Pregunta: ¿Cómo Centrar vertical y horizontalmente un objeto?
Respuesta:

http://www.forosdelweb.com/showthrea...light=centrado

braulito

27/08/2005 00:37

Faq 54 - Ver página en Safari

Pregunta: No tengo dinero para comprarme una MAC :P ¿Cómo hago para ver la web que maqueté en Safari?
Respuesta:
Puedes ver tu sitio en Safari 2.0, Internet Explorer 5.2.3 y Netscape 1.7.7 de Mac con ésta utilidad:
http://www.fundisom.com/g5/

Genera Screenshot en:

Safari 2.0
Internet Explorer 5.2.3
Netscape 1.7.7

sjam7

05/06/2006 10:19

Faq-55 Fondo transparente para tablas

Categoria: Tablas
Pregunta: ¿Como poner un fondo transparente a una tabla usando un PNG?
Respuesta:
Ejemplo

Código HTML:

<style type="text/css">
 <!--

#fondo {

    background-image:url(logoGDE.png)

}

* html #fondo {background-image:none;

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logoGDE.png', sizingMethod='crop')    

    background:;

}

-->
 </style>

* html Esto hace que se ponga un fondo para unos navegadores y ese mismo con un filtro al IE

En la tabla se pone id="fondo" yo lo puse en una tabla, si se pone en la etiqueta <table> y la tabla tiene bordes sobrepondra la imagen a los bordes, si se pone en el <td> no.

Funciona en: Lo he probado en Firefox 1.5, en IE 6 y en Opera 8.54 y en los 3 funciona bien.

braulito

12/06/2006 17:22

Faq 56.- Soporte de CSS en clientes de correo

Pregunta: Estoy usando estándares para armar un e-mail (newsletter) ¿Qué elementos o propiedades soportan los diferentes clientes de correo?
Respuesta:
En Guía de Soporte de CSS en el correo electrónico nos muestran que clientes (sean web o de escritorio) soportan elementos y propiedades que se relacionan con CSS, entre ellos:

Elemento <style>
Elemento <link>
Selectores CSS
Propiedades CSS

La guía muestra soporte para Windows y Mac OS utilizando diferentes clientes de correo web o de escritorio,

kahlito

28/10/2006 05:28

Faq - 57 Quitar punteado de los enlaces

P - ¿Como quitar el punteado de los enlaces?
R -

Código HTML:

a {outline:0;}

fearlex

13/11/2006 11:06

FAQ - 58 Para que son las hojas de estilos externas ?

Pregunta: Como puedo aplicar estilos que sean unicos para todo el sitio.

Respuesta:

Para ello en el head de tu documento (X)HTML incluyes la siguiente etiqueta:

Cita:

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

Ademas crea un documento con extensión .css que contiene los estilos con el nombre estilo.css en este caso( por supuesto el nombre es a gusto de cada cual). En este documento, incluyes todos los estilo siempre manteniendo la relación con los selectores de tu documento (X)HTML. Si tienes esa hoja de estilos externa, "linkeada" con todas las páginas de tu sitio, entonces todas las modificaciones que le hagas a la hoja de estilos, afectaran a todo tu sitio.

Puntos a aclarar:

1-rel="stylesheets", atributo que sirve para indicarle al navegador, la relación con el documento llamado, o sea rel = relación. En este caso, Stylesheet(Hoja de Estilo).

2-type="text/css", atributo que sirve para indicarle al documento que tipo de lenguaje estamos utilizando, al igual que type="text/javascript" para Javascript.

3- Si usas un documento XHTML, debes cerrar la etiqueta con />

PD: Se parece mucho a la FAQ#2, pero veo que siguen habiendo muchas preguntas referente a esto, por lo que me decidi a ampliar la FAQ.

rodri

04/12/2006 10:37

FAQ - 59. Herramientas para ayudar al diseño web

TEMA: ADD-ONs de Firefox
WEB DEVELOPER

Este excelente add-on puede simplificar la vida de los desarrolladores de sitios web de forma increíble:
https://addons.mozilla.org/firefox/60/

Algunas características importantes:

* Edición de CSS en tiempo real (en la misma página)
* Habilitación/Deshabilitación de elementos:
- Cookies
- Imagenes
- CSS
- Cache
- Javascript
- etc
* Visualización de elementos de markup
- Frames
- Tablas
- Elementos posicionados
- Links

* Validación de (X)HTML y CSS de forma conectada y local
* Validación de Links, WAI, Feed, Section 508

Entre otras, bueno, esta herramienta es excelente para probar paso a paso los la construcción de nuestra página

Funciona con Firefox 1.0 - 2.0.0.* ALL
Mozilla 1.0 - 1.7 ALL

DragonX

11/01/2007 13:58

FAQ - 60. Manuales y referencias

Manuales y Referencias (Inglés)

http://www.w3schools.com/css/default.asp
http://cssdocs.org/
http://www.blooberry.com/indexdot/css/propindex/all.htm

Manuales y Referencias (Español)

http://www.desarrolloweb.com/manuale...html#capitulos
http://www.sidar.org/recur/desdi/tra...s/propidx.html
http://usuarios.lycos.es/dhtml_club/...ropiedades.htm
http://www.wikilearning.com/lista_de...cp-5366-20.htm
http://www.htmlhelp.com/es/reference...roperties.html
http://www.sidar.org/recur/desdi/mcss/manual/indice.php

bhagat

11/01/2007 17:13

FAQ 61 - Esquinas redondeadas

Esta previsto que en CS3 exista un atributo que permita redondear las esquinas.

http://www.w3.org/TR/2002/WD-css3-bo...-border-radius

Mientras tanto existen varias opciones con las CSS2 actuales

Redondear esquinas con CSS2, ¡sin imágenes!

http://www.cssplay.co.uk/boxes/snazzy.html

Y aun mas, se pueden hacer todas estas formas con CSS2, ¡sin imágenes!

http://www.cssplay.co.uk/boxes/krazy.html

Usando imágenes está este generador automático (de código y de las imágenes) online:

http://www.neuroticweb.com/recursos/css-rounded-box/

También existen otras aplicaciones, que usan JavaScript para generar el código necesario

http://www.html.it/articoli/niftycube/index.html NIFTY CORNERS

http://www.curvycorners.net/index.php CURVY CORNERS
.

bhagat

13/01/2007 14:18

FAQ - 62. Herramientas para ayudar al diseño web (Firebug)

No olvidarse de la tambien exelente herramienta FIREBUG para Firefox

https://addons.mozilla.org/firefox/1843/

EXELENTE, recomendable

Sirve principalmente para localizar código pinchando sobre un elemento de una página web y viceversa; para localizar elementos de la página web desde el código.

También cuenta con un debugger de javascript, consola que muestra errores javascript y errores CSS, línea de comandos javascript, espía en el tráfico del XMLHttpRequest (es decir, para su uso con aplicaciones AJAX), etc.

JavierB

15/01/2007 11:34

FAQ - 63. Herramientas para ayudar al diseño web (Edit Css)

Edit CSS

https://addons.mozilla.org/firefox/179/

Te permite realizar edición básica de hojas de estilo CSS en el panel lateral de Firefox y ver los cambios al instante.

La extensión abre la hoja de estilos de la página activa (incluyendo cualquier pagina online) y te la muestra en el panel lateral, desde donde la puedes guardar en tu disco duro después de editarla.

Agradecimientos: bhagat

La zona horaria es GMT -6. Ahora son las 21:17.

Página 2 de 3

Mostrar 50 mensajes desde este tema en una página