Foros del Web
Página 1 de 2 1 2
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/)

tunait 04/02/2003 14:56
FAQ's de CSS
 
Faltaban las FAQ's de este foro y este es un buen momento para arrancarlas. ;-)
Cita:
http://forosdelweb.com/images/icons/icon4.gif ! Importante

Las FAQ (Preguntas Frecuentes) están abiertas a que cualquier usuario haga sus aportaciones.
Si embargo os pido que tengais algunas consideraciones especiales a la hora de insertar vuestra aportación:
  • Asegúrate de que la FAQ que vas a aportar pertenece a este foro (CSS). Si tu aportación es referente a HTML, insertala en las FAQ del foro de HTML; si es javascript insertala en las FAQ de javascript. Aquellas aportaciones que NO pertenezcan al lenguaje CSS puro y duro serán eliminadas sin previo aviso.
  • Asegúrate de que tu aportación no ha sido yá insertada. Si ha sido aportada pero ofreces una forma diferente de hacer lo mismo, bienvenida sea. Pero no si vas a proponer una solución que yá esté en las FAQ. Las FAQ duplicadas también serán eliminadas.
  • Indica el número de FAQ y sobre qué trata
  • Si tienes alguna duda sobre alguna FAQ plantéala en un nuevo tema indicando el número de FAQ. Este tema no es para plantear preguntas. cualquier mensaje en este tema que no sea una FAQ será eliminado sin previo aviso.

Vamos allá:


1-/ ¿Cómo evitar que un fondo se desplace ? (que quede inmóvil al darle a la barra de scroll)

R-/


Código PHP:
<style type="text/css">

body {
background: url(imagen.gif);
background-attachment: fixed;
}
</style> 
"Con un estilo así lo puedes conseguir, cambiando imagen.gif por la imagen real"

créditos: Caricatos

rickoe 04/02/2003 15:10
faq2
 
Que bien :arriba:

Hacia mucha falta esto :-D

Aquí mi aportación

Hoja de estilos CSS

Normalmente se usa asi dentro del head:

Cita:
<style type="text/css">
.
.
A:link, A:active {
COLOR: #000000;
}
.
.
</style>
Pero eso ocaciona mas bytes de trafico y lo mejor es hacerlo asi:

en el head:

Cita:
<link href="estilo.css" rel="stylesheet" rev="stylesheet" type="text/css">
y en el archivo estilo.css pones:

Cita:
A:link, A:active {
COLOR: #000000;
}

tunait 04/02/2003 16:20
FAQ3
 
P-/ Cursor del ratón: ¿cómo usar una imagen propia?


R-/ Tienes que crear el cursor del tipo cur, ani, o ico
y poner algo así en el body:

Código PHP:
<body style="cursor:url(mi_cursor.cur)"> 
Créditos: Caricatos

tunait 04/02/2003 16:25
Faq4
 
P-/ Justificar un texto

R-/

Creando una clase

Código PHP:
<style type="text/css">
.pJustifica{
text-align: justify;
}
</style> 
y después aplicándola donde queramos

Código PHP:
<p class="pJustifica"> texto </p> 
La forma de aplicarlo si crear una clase

Código PHP:
para un párrafo: <p style="text-align:justify">
para una celda: <td style="text-align:justify"> 
Nota: El atributo style está desaprobado a partir de xhtml 1.1

tunait 04/02/2003 16:38
Faq5
 
P-/ Cambiar el cursor del mouse sobre un elemento


R-/ Ejemplo para cambiar el cursor al pasar sobre una imagen:

<img src="imagen.jpg" style="cursor:pointer">
Esto cambiará el cursor la manita al pasar sobre la imagen.


Otras opciones para el tipo de cursor son:

cursor: auto (utiliza un cursor dado por el usuario)
cursor: crosshair (el cursor se convierte en una cruz)
cursor: default (el cursor permanece como es siempre)
cursor: e-resize (una flecha que apunta a la derecha)
cursor: hand (la tradicional mano)
cursor: help (el signo de pregunta)
cursor: move (una cruz con flechas en los extremos)
cursor: n-resize (una flecha apuntando hacia arriba o hacia el norte)
cursor: ne-resize (una flecha apuntando hacia el noreste)
cursor: nw-resize (una flecha que apunta hacia el noroeste)
cursor: pointer (nuevamente el puntero)
cursor: s-resize (una flecha que apunta hacia abajo o al sur)
cursor: se-resize (una flecha que apunta hacia el sudeste)
cursor: sw-resize (una flecha que apunta hacia el sudoeste)
cursor: text (se muestra como el fin de un I-beam)
cursor: w-resize (una flecha apuntando hacia el oeste o hacia la izquierda)
cursor: wait (un reloj de arena)

Créditos: bet

------------------------------------------------------------------------------------

NOTA: Versiones de IExplorer anteriores a la 6 necesita el valor "hand" en lugar de "pointer" para cambiar a la manita.
Una forma de solucionarlo puede ser:

Poner entre los tags <head> y </head> el siguiente script:

Código PHP:
<script>
function mano(tag) {
document.getElementById(tag).style.cursor = (document.all) ? "hand" : "pointer";
</script> 

... y luego en el tag donde quiero ver la mano poner:

onmouseover="mano(this)"

créditos: caricatos

tunait 04/02/2003 17:11
Faq6
 
P-/ ¿Cómo puedo sacar el subrayado a los links?


R-/ Puede hacerse principalmente de dos formas:

1- Agregando entre los tags <HEAD> y </HEAD>

Código PHP:
<style type="text/css">
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:hover{text-decoration:none}
a:active{text-decoration:none}
</style> 
(esto sacará el subrayado a todos los estados de todos los links)


2- Agregando a los links que no queramos con subrayado:

style="text-decoration:none"

Ej. <a href="pagina.html" style="text-decoration:none"> Página </a>

Nota: el atributo style está desaprobado a partir de xhtml 1.1

tunait 06/02/2003 07:57
FAQ8 - CSS - Fuentes
 
P-/ Fuentes NO instaladas

R-/

Actualizado el 09-07-05
NOTA: Estaba la opción @font-face pero ha sido eliminada de los estandares a partir de css2.1 http://www.forosdelweb.com/showpost....11&postcount=6

Alternativas a cómo hacerlo en la web de kemie
http://www.disenorama.com/articulos/...textos_una.htm


http://www.forosdelweb.com/showpost....2&postcount=15

t0m|ta 13/02/2003 05:03
FAQ 9
 
Pregunta: ¿Cómo mostrar una aclaración o la definición de una palabra técnica o extraña?

(Relacionado con la FAQ 11)

Respuesta: Utilizando este código, el cursor cambiará al pasar por encima de la palabra en cuestión y se mostará un "tooltip" con la aclaración :-)

Con HTML

Código PHP:
<html> 
<head> 
<title>info</title> 
<style> 
.info { 
text-decoration:underline; 
border-bottom: 1px dashed #00cc00; 
cursor: help; 
} 
</style> 

</head> 

<body> 
<span class="info" title="¿A que te mola mi nombre?">t0m|ta</span> 
</body> 
</html> 
Con xthml:

Código PHP:
<html xmlns:sp> 
<head> 
<title> Custom tag example </title> 
<style type="text/css"> 
sp:info { 
  text-decoration:underline; 
  border-bottom: 1px dashed #00cc00; 
  cursor: help; 
} 
</style> 
</head> 
<body> 
<p>1221 es un número<sp:info title="Un número que resulta exactamente igual si lo lees de derecha izquierda o de izquierda a derecha.">capicúa</sp:info>.</p> 
</body> 
</html> 

tunait 14/02/2003 15:10
FAQ10 - CSS - Aspecto de Links
 
P-/ ¿Puedo usar dos estilos diferentes para los links de una misma página?

R-/ Puedes crear una o varias clases y llamarlas desde los links a los que se desee dar ese aspecto.


<style type="text/css">
<!--
a:link { font-family: Tahoma, Verdana, Arial; color: #003366; text-decoration: none}
a:visited { font-family: Tahoma, Verdana, Arial; color: #0099CC; text-decoration: none}
a:hover { font-family: Tahoma, Verdana, Arial; color: #996600}
a:active { font-family: Tahoma, Verdana, Arial; color: #996633; text-decoration: none}


a.estilo2:link { font-family: Tahoma, Verdana, Arial; color: #993300; text-decoration: none}
a.estilo2:visited { font-family: Tahoma, Verdana, Arial; color: #CC9933; text-decoration: none}
a.estilo2:hover { font-family: Tahoma, Verdana, Arial; color: #996666}
a.estilo2:active { font-family: Tahoma, Verdana, Arial; color: #993300; text-decoration: none}
-->
</style>

Ahí hemos creado la clase estilo2. Aquellos enlaces que queramos que usen esa clase, se lo pedimos

<a href="pepe.html" class="estilo2"> pepe </a>

tunait 14/02/2003 15:16
FAQ11 - CSS - Texto
 
p-/ Cómo tener un tamaño de texto fijo que no cambie aunque el visitante tenga en le menú Ver la opción de ver texto más grande

R-/ Podemos, mediante css, aplicar un tamaño fijo en pixels para todo el documento agregando entre <head> y </head> lo siguiente:

Código PHP:
<style type="text/css">
<!--
body {  font-size: 15px}
td {  font-size: 15px}
-->
</style> 
Eso hará que todos los textos tengan un tamaño de 15 pixels en Internet Explorer.

NOTA: No es recomendado el aplicar el tamaño de fuentes fijas. Si alguien pide ver el texto más grande, es porque lo necesita. Si no lo puede leer, esa página no tiene sentido para ese visitante.

CORE 28/02/2003 15:58
FAQ12 - CSSP
 
Como crear un sitio con capas y CSS


Código PHP:
<head>
<title>Capas</title>
<style>
/*estilo Azul*/

.arriba{
    position: absolute; 
    width:570;
    height:90px; 
    z-index: 1; 
    left: 0px; 
    top: 0px;
    overflow: visible;
    border : 1px solid #788DA2;
    background-color : #788DA2;
    }
    .izquierda{
    position: absolute; 
    width:178px;
    height:452px; 
    z-index: 1; 
    left: 602px; 
    top: 0px;
    overflow: visible;
    border : 1px solid white;
    background-color : white;
    color:#FFFFFF; 
    }
        .centro{
    position: absolute;
    width:570px;
    height:362;
    z-index: 1;
    left: 0px;
    top: 90px;
    overflow: auto;
    border : 1px solid #ACBCCC;
    background-color : #ACBCCC;
    }

    .derecha{
    position:absolute; 
    left:570px; 
    top:0px; 
    width:30px; 
    height:452; 
    z-index:2;
    border : 1px solid #BAC3CC;
    background-color : #BAC3CC;
    width:120; 
    color:#FFFFFF; 
    }
    </style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="centro" class="centro"></div>
<div id="derecha" class="derecha"></div>
<div id="iquierda" class="izquierda"></div>
<div id="cabeza" class="arriba"> 
</div>
</body>
</html> 

CORE 28/02/2003 16:04
FAQ13 - Colores del sistema con CSS
 
  • Color: ActiveBorder;
  • Color: ActiveCaption;
  • Color: AppWorkspace;
  • Color: Background;
  • Color: ButtonFace;
  • Color: ButtonHighlight;
  • Color: ButtonShadow;
  • Color: ButtonText;
  • Color: CaptionText;
  • Color: GrayText;
  • Color: Highlight;
  • Color: HighlightText;
  • Color: InactiveBorder;
  • Color: InactiveCaption;
  • Color: InactiveCaptionText;
  • Color: InfoBackground;
  • Color: InfoText;
  • Color: Menu;
  • Color: MenuText;
  • Color: Scrollbar;
  • Color: ThreedDarkShadow;
  • Color: ThreedFace;
  • Color: ThreedLightShadow;
  • Color: ThreedShadow;
  • Color: Window;
  • Color: WindowFrame;
  • Color: WindowText;

CORE 28/02/2003 16:07
FAQ14 - W3C Palette
 
  • Color: Black;
  • Color: Navy;
  • Color: Blue;
  • Color: Maroon;
  • Color: Purple;
  • Color: Green;
  • Color: Red;
  • Color: Teal;
  • Color: Magenta;
  • Color: Olive;
  • Color: Gray;
  • Color: Lime;
  • Color: Aqua;
  • Color: Silver;
  • Color: Yellow;
  • Color: White;

CORE 28/02/2003 16:09
FAQ15 - CSS - Filtros Alpha
 
Podemos aplicar efectos de trasnparencia usando CSS con el siguiente codigo:

filter:alpha(Opacity=??, FinishOpacity=??, Style=?, StartX=??, StartY=??, FinishX=??, FinishY=??);

Ejemplos;

Estilo1 :
style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=1)"

Estilo2:
style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=2)"

Estilo3:
style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=3)"

Estos estilo funcionan tambien en imagenes

Estilo1:
style="filter:alpha(finishopacity=0, style=1)"

Efecto Mouseover
onMouseOver="this.filters.alpha.opacity='100'" onMouseOut="this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50);-moz-opacity:50%;"

CORE 28/02/2003 16:13
FAQ16 - CSS - coloreando la barra de desplazamiento
 
El codigo es el siguiente tiene que pegarse entre las etiquetas <head> y </head> de nuestro HTML, y agregar las etiquetas <style> y </style>


body {
scrollbar-3dlight-color : #82BCDA;
scrollbar-darkshadow-color : #82BCDA;
scrollbar-highlight-color : #D7ECF5;
scrollbar-shadow-color : #3985AB;
scrollbar-arrow-color : #0E212A;
scrollbar-face-color : #82BCDA;
scrollbar-track-color : #82BCDA;
}

http://www.iespana.es/radiocore_es/scroll001.gif

CORE 28/02/2003 16:40
FAQ17 - varios
 
Etuiqueta Title
Esto funciona como el ALT de las imagenes pero en Tablas ,Botones , Textos, etc.

<table title="Texto para descripcion" width="100%" border="0">

<span title="Texto para descripcion">Hola</span>

<input type="submit" name="Submit" title="Texto para descripcion" value="Enviar">

Imagenes de rastreo
<body tracingsrc="Imagen.jpg" tracingopacity="81">

Importando CSS dentro de otra Hoja

@import url(otra_hoja.css);

CORE 28/02/2003 17:05
FAQ18 - Tips para las Hojas (CSS)
 
Tips para CSS

/* usa siempre nombres en mayusculas para identificar al elemento */

/*Modulos de Texto
  • ABBR {}
  • ACRONYM {}
  • ADDRESS {}
  • BLOCKQUOTE {}
  • BR {}
  • CITE {}
  • CODE {}
  • DFN {}
  • DIV {}
  • EM {}
  • H1 {}
  • H2 {}
  • H3 {}
  • H4 {}
  • H5 {}
  • H6 {}
  • KBD {}
  • P {}
  • PRE {}
  • Q {}
  • SAMP {}
  • SPAN {}
  • STRONG {}
  • VAR {}

/*Modulos de Hipertexto*/
  • A:link { } /* vínculos no visitados */
  • A:visited { } /* vínculos visitados */
  • A:hover { } /* el usuario señala el vínculo */
  • A:active { } /* vínculos activos */
*/

/* Modulos de Imagenes*/
  • IMG {}

/* los IDs van siempre con un #, ordenalos por orden alfabetico */


/* Modulos de Tablas
  • CAPTION {}
  • COL {}
  • COLGROUP {}
  • TABLE {}
  • TBODY {}
  • TD {}
  • TFOOT {}
  • TH {}
  • THEAD {}
  • TR {}
*/

/* Modulos de Formularios
  • BUTTON {}
  • FIELDSET {}
  • FORM {}
  • INPUT {}
  • LABEL {}
  • LEGEND {}
  • SELECT {}
  • OPTGROUP {}
  • OPTION {}
  • TEXTAREA {}
*/


/* Modulos de Edicion
  • DEL{}
  • INS{}
*/

/* Modulos de Listado
  • DL {}
  • DD {}
  • DT {}
  • LI {}
  • OL {}
  • UL {}

CORE 13/03/2003 00:46
FAQ 19
 
Utilizando LIST en CSS
  • list-style-type : circle; (circulo) •
  • list-style-type : square; (cuadro) •
  • list-style-type : decimal; (numeros) 1.
  • list-style-type : lower-roman; (N. romanos Minuscula) i.
  • list-style-type : upper-roman; (N. romanos Mayuscula) I.
  • list-style-type : lower-alpha; (letas minuscula, Incisos) a.
  • list-style-type : upper-alpha; (letras mayuscula, Incisos) A.
  • list-style-type : none; Nada
  • list-style : url(imagenes/estrella.gif); (Utilizando tus propias imagenes)

se pueden usar en etiquetas

DL {},DD {},DT {},LI {},OL {},UL {}

Creditos : Core

ferny 22/03/2003 05:58
FAQ 21
 
¿Qué manuales sobre CSS me recomiendan?

- Para principiantes:
http://www.webestilo.com/css/
http://www.desarrolloweb.com/manuales/2/ (sobre todo este)
- Para expertos:
http://www.sidar.org/recur/desdi/tra...css/cover.html

KarlanKas 23/03/2003 18:22
FAQ 22.- !important
 
P.-¿Cómo obligar a utilizar un estilo determinado en toda la página?
R.-Poniendo !important detrás de la definición.

Ejemplo:
Código PHP:
<html>
<head>

    <STYLE>
    H1{    color:red!important;
        text-decoration:underline!important;
        font:bold 30px/45px verdana!important;
        text-align:center;}
    </STYLE>
</head>

<body>
<H1 style="    color:green;
            text-decoration:none;
            font:normal 10px/15px 'courier new';
            text-align:right;">
            
    HOLA FORO HTML
</H1>


</body>
</html> 


Fijaos en la alineación del texto. Como no hemos utilizado en la definición general el !important prima el de la etiqueta...

Cain 28/03/2003 07:04
Faq-23
 
Dando borde a tablas:

Para dar borde a una tabla podemos hacer 2 cosas:

1. Dar borde externo a la tabla:
table {
border-style: solid;
border-color: #C9CCC5;
border-width: 1;
}

2. Dar borde externo e interno a las tablas
table {
border-style: solid;
border-color: #C9CCC5;
border-top-width: 1;
border-left-width: 1;
}
td {
border-style: solid;
border-color: #C9CCC5;
border-bottom-width: 1;
border-right-width: 1;
}


El truco del punto 2 consiste en dibujar los bordes superior e izquierdo de la tabla para luego ir pintando los bordes inferior y derecho de las celdas. ¿Que logramos con esto? Con esto logramos que los bordes de las celdas colindantes no sean el doble de gruesos que los bordes externos ;-)

Nota: Los bordes pueden definirse de forma "abreviada" así: border: 1 solid #FFFFFF; Pero esto sólo lo soporta Internet Explorer :-(

caricatos 31/03/2003 16:34
Faq 24 - Propiedades de los fondos
 
Propiedades de los fondos (aplicable a todas las etiquetas del body, incluído éste)
Esta FAQ complementa la nº 1 :pensando:

background-color: un color;
background-image: url(una imagen);
background-repeat: repeat|repeat-x|repeat-y|no-repeat;
background-position: [sitio]top|center|bottom [sitio]left|center|right;
background-attachment: scroll|fixed;

Nota: background-position puede desglosarse en explorer en:

background-position-x
y
background-position-y

sitio puede ser en posición o porcentaje (%)
Agradezco la ayuda de JavierB :adios:

saludos :arriba:

Helbira 02/06/2003 10:56
Faq 25 - Espacio entre líneas
 
line-height: 5px;

amanda75 06/06/2003 07:19
Faq 26.- Cambiar el espaciado de la fuente
 
letter-spacing: +1px (+2px...-1px..-2px etc.)

alexa10 12/06/2003 14:24
Faq 27.- Aplicar transparencia a cuadros y areas de texto
 
P.- Puedo hacer que una caja de texto o unaarea de texto tenga el fondo transparente?

R.-

Código:
<style>
<!--
  .transparente  {
    background-color: transparent;
    border: 1px solid #000000;
}
-->
</style>

<textarea name="textarea" class="transparente"></textarea>
<input type="text" name="textfield" class="transparente">

mebarak 14/08/2003 12:23
FAQ-28 una css en pantalla y otra para impresion [en un solo documento]
 
Saludos, hace dias hice una pregunta, pero ahora que ya resolvi mi duda les comunico mi descubrimiento, ya que me parece genial, en un documento web podemos tener varias css externas cada una para diferentes fines esto automaticamente, es decir veo un articulo este lo veo en el mmonitor de mi pc y veo menus, barra de navegacion, etc. me gusto el articulo y deseo leerlo con mas calma y lo imprimo ¡ohh sorpresa! no se imprimieron los menus y ni la barra de navegacion solo el texto.

un ejemplo es esta página que sus articulos incluyen varios css uno para visualizarlo en pantalla y otro para impresion, prueben darle vista previa al documento o imprime un articulo y veras como solo imprime el texto con sus imagenes.

http://www.alzado.org/articulo.php?id_art=195

La solucion es el atributo "media" del elemento style en el que se especifica la css y el medio para el que se empleara

un ejemplo es este
Código PHP:
<html>
  <head>
     <title>Título del archivo</title>
        <link rel=stylesheet media="screen" href="website.css">
        <link rel=stylesheet media="print" href="printer.css">
        <link rel=stylesheet media="aural" href="speaker.css">
   </head>
<body>
</body>
</html> 
para la cs printer.css solo es necesario crear una clase para ocultar y lo demas se le dara formato normal mente


Código PHP:
.nover{ 
visibility:hidden 
} 
sigue tu hoja de estilo normal [para el texto e imagenes... 
tu documento tendra un tag div para las regiones que deses ocultar a la hora de imprimir

Código PHP:
<div class="nover">
Aqui tu barra de navegacion...
</div>
aqui lo demas de tu sitio... 
si desian profundizar hacerca de este tema pueden visitar los siguientes vinculos:
http://www.w3.org/TR/1998/REC-CSS2-19980512/
o una de sus traducciones al castellano
http://www.sidar.org/recur/desdi/tra...css/cover.html
http://www.selfhtml.com.ar/selfhtml7/tdba.htm

:aplauso: :arriba: :adios:

Gracias ;-)

GG 30/08/2003 13:58
Faq-29
 
Especificaciones para CSS1 y 2 de la W3Cen español
P. ¿Dónde puedo encontrar las especificaciones de ls nojas de estilo, nivel 1 y 2, de la W3C en ESPAÑOL?


R. Les mando estos vinculos donde están las especificaciones de la W3C en ESPAÑOL de hojas de estilos, normas de accesibilidad y HTML4.
Espero que les sirvan.

Hojas de estilo en cascada, nivel 1
http://html.conclase.net/w3c/css1-es.html

Hojas de estilo en cascada, nivel 2
http://www.sidar.org/recur/desdi/tr.../css/cover.html

Helbira 30/09/2003 05:18
FAQ 30.- Tabular sólo la primera línea de un párrafo
 
P: ¿Cómo puedo tabular sólo la primera línea de un párrafo?
R: CSS1 (IE 4, NS 4)

Código PHP:
<style type="text/css">
p {text-indent: 1cm}
</style> 
;-)

epa2 08/10/2003 06:17
Faq-31
 
P: ¿Como puedo hacer mi sitio web construido en base a CSS?
R: Con este código
CREDITOS: BRAVENET

Código:
<html>
<head>
<style>
body
{
    color: #000000;
        background-color: white;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#navcell
{
        padding-top : 2px;
        padding-bottom : 2px;
        padding-left : 30px;
        border-top: 0px solid #fc6;
        border-right: 0px solid #fc6;
        border-bottom: 1px solid #fc6;
        border-left: 0px solid #fc6;
        font-family: Arial, Helvetica, sans-serif;

}


#nav{
        position: absolute;
        top : 130px;
        left : 30px;
        width : 160px;
        font-weight: normal;
        line-height: 30px;
        color: #000000;
        }

#nav ul, #nav li {
        list-style-type: none;
}
       
#nav a, #nav li.active li a
{
        color: #930;
        text-decoration: none;
}

#nav a:hover, #nav li a:hover
{
        background-color: #fc6;
        color: #930;
        text-decoration: none;
}

#nav li.active a {
        background-color: #fc6;
        color: #930;
        text-decoration: none;
}

a {
        color: #930;

}

a:visited {
        color: #f60;
}
       
#content{
        padding-top : 5px;
        padding-bottom : 30px;
        padding-left : 230px;
        padding-right : 5%;
        background-color: #FFFFF9;
        color: #000000;
}

p,ul,ol {
        font-size: 10pt;
        text-align: justify;
        color: #000000;

}

h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
        font-size: 200%;
        font-weight: bold;
}

h2 {
        font-size: 130%;
        font-weight: bold;
        text-align: right;
        padding-right: 3px;
        border-top: 0px solid #fc6;
        border-right: 0px solid #fc6;
        border-bottom: 1px solid #fc6;
        border-left: 0px solid #fc6;

}

h3 {
    font-size: 100%;
    font-weight: bold;
}

</style>
  </head>
  <body>
  <div style="position: absolute; width: 100%;">
    <div id="navcell">
      <div id="nav">
        <ul>
          <li><a href="index.html">Home Page</a></li>
          <li><a href="about.html">Acerca de mí</a></li>
          <li><a href="links.html">Links</a></li>
          <li><a href="contact.html">Contactos</a></li>
        </ul>
      </div>
      <h1>{EPA2.COM}</h1>
    </div>
    <div id="content">
      <h2>Title</h2>
      <h3>Subtitle </h3>
      <p>Hola amigos, que alegría la mia contribuir con mi pequeñez ignoracia a esta faqs, ¿algún día llegaré a ser un maestro?. Bueno, pienso que a lo mejro dentro de unos 500 o 600 años podré hacer algo en este mundillo, un salu2 a todos mis colegas y también a los que no lo son.</p>
      <h3>Subtitle </h3>
      <p>Hola amigos, que alegría la mia contribuir con mi pequeñez ignoracia a esta faqs, ¿algún día llegaré a ser un maestro?. Bueno, pienso que a lo mejro dentro de unos 500 o 600 años podré hacer algo en este mundillo, un salu2 a todos mis colegas y también a los que no lo son.</.</p>
           
      <h2>Title</h2>
      <h3>Subtitle </h3>
      <p>Hola amigos, que alegría la mia contribuir con mi pequeñez ignoracia a esta faqs, ¿algún día llegaré a ser un maestro?. Bueno, pienso que a lo mejro dentro de unos 500 o 600 años podré hacer algo en este mundillo, un salu2 a todos mis colegas y también a los que no lo son.</.</p>
 
    </div>
  </div>
  </body>
  </html>
:adios:

PD: se me olvidaba, en las páginas de enlace de tu sitio no olvides vincular el css (creo)

jamesxv7 29/12/2003 14:47
Faq-32
 
Cita:
FAQ 21

¿Qué manuales sobre CSS me recomiendan?
W3 Schools

http://www.maestrosdelweb.com/editorial/introcss/

http://www.sidar.org/recur/desdi/mcss/manual/indice.php

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


La zona horaria es GMT -6. Ahora son las 21:17.
Página 1 de 2 1 2
Mostrar 50 mensajes desde este tema en una página

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.