Foros del Web » Creando para Internet » CSS »

FAQ's de CSS

Estas en el tema de FAQ's de CSS en el foro de CSS en Foros del Web. 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>...

  #31 (permalink)  
Antiguo 29/12/2003, 14:53
Avatar de jamesxv7  
Fecha de Ingreso: julio-2001
Ubicación: Puerto Rico
Mensajes: 109
Antigüedad: 22 años, 7 meses
Puntos: 0
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>
__________________
James: Blog - Galería - Ecodig

Última edición por JavierB; 07/05/2006 a las 02:50
  #32 (permalink)  
Antiguo 07/01/2004, 06:00
Avatar de epa2  
Fecha de Ingreso: abril-2002
Ubicación: Málaga
Mensajes: 1.475
Antigüedad: 21 años, 11 meses
Puntos: 9
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>
__________________

***Aprendiz de todo y maestro de nada***

Última edición por JavierB; 07/05/2006 a las 02:51
  #33 (permalink)  
Antiguo 07/01/2004, 17:18
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
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

Última edición por JavierB; 07/05/2006 a las 02:51
  #34 (permalink)  
Antiguo 07/03/2004, 19:30
 
Fecha de Ingreso: noviembre-2003
Ubicación: que donde vivo..?
Mensajes: 5
Antigüedad: 20 años, 4 meses
Puntos: 0
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.

Última edición por JavierB; 07/05/2006 a las 02:52
  #35 (permalink)  
Antiguo 16/03/2004, 11:43
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
FAQ 37

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

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..

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
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #36 (permalink)  
Antiguo 31/05/2004, 17:25
Avatar de Rebel001  
Fecha de Ingreso: enero-2004
Mensajes: 140
Antigüedad: 20 años, 2 meses
Puntos: 0
Mensaje 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%;
}

Última edición por JavierB; 07/05/2006 a las 02:53
  #37 (permalink)  
Antiguo 08/06/2004, 08:34
Avatar de epa2  
Fecha de Ingreso: abril-2002
Ubicación: Málaga
Mensajes: 1.475
Antigüedad: 21 años, 11 meses
Puntos: 9
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;">
__________________

***Aprendiz de todo y maestro de nada***

Última edición por JavierB; 07/05/2006 a las 02:53
  #38 (permalink)  
Antiguo 28/09/2004, 04:48
Avatar de epa2  
Fecha de Ingreso: abril-2002
Ubicación: Málaga
Mensajes: 1.475
Antigüedad: 21 años, 11 meses
Puntos: 9
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
{cursorurl(http://www.tusitio.com/cursor.cur);}
</style
nos vemos por la feria del tocino

salu2
__________________

***Aprendiz de todo y maestro de nada***

Última edición por epa2; 13/10/2004 a las 03:53
  #39 (permalink)  
Antiguo 28/09/2004, 05:08
Avatar de epa2  
Fecha de Ingreso: abril-2002
Ubicación: Málaga
Mensajes: 1.475
Antigüedad: 21 años, 11 meses
Puntos: 9
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
__________________

***Aprendiz de todo y maestro de nada***
  #40 (permalink)  
Antiguo 11/11/2004, 23:42
 
Fecha de Ingreso: diciembre-2002
Mensajes: 3
Antigüedad: 21 años, 2 meses
Puntos: 1
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.
Adiós!
  #41 (permalink)  
Antiguo 26/12/2004, 22:54
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 19 años, 8 meses
Puntos: 2
FAQ 43. Rollover con precarga SIN javascript

Pregunta: ¿Es posible construir un rollover con CSS?

¡Es posible!...

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á!!!!
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #42 (permalink)  
Antiguo 04/01/2005, 04:51
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 21 años
Puntos: 2
Información 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
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.

Última edición por JavierB; 29/05/2006 a las 02:57
  #43 (permalink)  
Antiguo 07/01/2005, 10:50
Avatar de epa2  
Fecha de Ingreso: abril-2002
Ubicación: Málaga
Mensajes: 1.475
Antigüedad: 21 años, 11 meses
Puntos: 9
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
__________________

***Aprendiz de todo y maestro de nada***

Última edición por JavierB; 29/05/2006 a las 02:57
  #44 (permalink)  
Antiguo 09/01/2005, 12:57
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 21 años
Puntos: 2
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.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #45 (permalink)  
Antiguo 15/01/2005, 11:59
 
Fecha de Ingreso: diciembre-2004
Ubicación: En mi ksa
Mensajes: 267
Antigüedad: 19 años, 3 meses
Puntos: 0
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">.
__________________
--------------------------------------------------
[::Matthew Beyer::]
MaEsTrOsWeB
Chile
--------------------------------------------------

Última edición por Matthew_182; 15/01/2005 a las 12:12
  #46 (permalink)  
Antiguo 11/02/2005, 14:34
 
Fecha de Ingreso: enero-2005
Mensajes: 34
Antigüedad: 19 años, 1 mes
Puntos: 1
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!
  #47 (permalink)  
Antiguo 11/02/2005, 15:19
 
Fecha de Ingreso: enero-2005
Mensajes: 34
Antigüedad: 19 años, 1 mes
Puntos: 1
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 ... 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/

Última edición por andreusup; 11/02/2005 a las 15:20
  #48 (permalink)  
Antiguo 20/04/2005, 00:28
Avatar de dobled  
Fecha de Ingreso: enero-2002
Ubicación: Rancagua - Chile
Mensajes: 1.328
Antigüedad: 22 años, 1 mes
Puntos: 2
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.
__________________
Usa títulos específicos y con sentido
En las listas de correo o en los grupos de noticias, la cabecera del mensaje es tu oportunidad de oro para atraer la atención de expertos cualificados en aproximadamente 50 caracteres o menos. No los desperdicies en balbuceos como "Por favor ayúdame" (de "POR FAVOR AYÚDAME!!!" ya ni hablamos). No intentes impresionarnos con lo profundo de tu angustia; mejor usa ese preciado espacio para una descripción lo más concisa posible del problema.

Última edición por dobled; 20/04/2005 a las 09:09
  #49 (permalink)  
Antiguo 17/07/2005, 17:06
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 4 meses
Puntos: 16
Faq 52 - Videotutotiales

videotutoirales de CSS http://www.nomaster-reloaded.com/tele/css.htm espero que sea de ayuda saludos
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!

Última edición por JavierB; 29/05/2006 a las 03:04
  #50 (permalink)  
Antiguo 20/08/2005, 16:16
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 19 años, 10 meses
Puntos: 8
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
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño

Última edición por JavierB; 29/05/2006 a las 03:06
  #51 (permalink)  
Antiguo 27/08/2005, 00:37
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 19 años, 10 meses
Puntos: 8
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
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño

Última edición por JavierB; 29/05/2006 a las 03:07
  #52 (permalink)  
Antiguo 05/06/2006, 10:19
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.672
Antigüedad: 22 años, 2 meses
Puntos: 16
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.
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO

Última edición por JavierB; 07/06/2006 a las 11:31
  #53 (permalink)  
Antiguo 12/06/2006, 17:22
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 19 años, 10 meses
Puntos: 8
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,
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #54 (permalink)  
Antiguo 28/10/2006, 05:28
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
Faq - 57 Quitar punteado de los enlaces

P - ¿Como quitar el punteado de los enlaces?
R -
Código HTML:
a {outline:0;}
  #55 (permalink)  
Antiguo 13/11/2006, 11:06
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 6 meses
Puntos: 5
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.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #56 (permalink)  
Antiguo 04/12/2006, 10:37
Avatar de rodri  
Fecha de Ingreso: febrero-2005
Mensajes: 406
Antigüedad: 19 años
Puntos: 2
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
__________________
0.o Rodri

Última edición por JavierB; 11/01/2007 a las 13:47 Razón: modificar título
  #58 (permalink)  
Antiguo 11/01/2007, 17:13
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 21 años, 8 meses
Puntos: 7
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
.
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com

Última edición por bhagat; 17/01/2007 a las 08:31 Razón: incluido link a propiedades CSS3 border radius
  #59 (permalink)  
Antiguo 13/01/2007, 14:18
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 21 años, 8 meses
Puntos: 7
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.
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com

Última edición por JavierB; 15/01/2007 a las 11:33 Razón: Añadir descripción
  #60 (permalink)  
Antiguo 15/01/2007, 11:34
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
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

Etiquetas: faq
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 35 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 01:48.