Efecto iluminar celda

yoseman · #1 (**permalink**) 02/06/2004, 01:24

Estoy intentando aplicar un efecto para iluminar celdas:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style type="text/css">

@font-face { 

font-family: "Arial"; 

src: url("./arial.ttf"); 

} 

 
body { 

    background-color: #807CA8;

    scrollbar-shadow-color: #706C98; 

    scrollbar-highlight-color: #E0E0E0; 

    scrollbar-darkshadow-color: #cccccc; 

    scrollbar-track-color: #7E94C3; 

    scrollbar-arrow-color: #7E94C3; }

 
#menu        {    position:relative;

                top:10px;

                bottom:10px;

                text-align:center;

                color:#5F587A;

                background:#706C98;

                }

 
#menu th    {    position:relative;                

                font-family: Arial; 

                font-weight: bold;

                letter-spacing:1px;

                font-size:14;

                color:#FFFFFF;

                background:#5F587A;    

                padding-left: 4px;

                padding-right: 4px;

                padding-top: 50px;

                padding-bottom: 50px;}

 
#menu td    {    vertical-align:sub;

                position:relative;

                height:40;

                border-top-width: 1px;

                border-left-width: 1px;

                border-right-width: 2px;

                border-bottom-width: 2px;

                border-color: #706C98;

                border-style: outset;

                font-family: Arial;

                letter-spacing:1px;

                font-size:14px;

                color:#FFFFFF;

                background:#A0A0B8;

                }

 
#menu a        {    display:block;height:20;

                text-decoration:none;

                }

                                

#menu a:active,#menu a:link

            {    display:block;

                background:#A0A0B8;

                color:#EEEEEE} 

 
#menu a:hover    

            {    display:block;

                background-color: #C0C0D8;

                color:#A0A0B8}

 
 
#menu a.letra        {    display:block;

vertical-align:middle;

                color:#EEEEEE}

 
</STYLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

 
<BODY>

 
<table id="menu" cellspacing="10">

<tr>

    <th height="30">

    <span class="letra">

    .:: El Otro Sitio ::.

    </span>

    </th>

</tr>

<tr>

    <td >

    <a href="#">

        <span class="letra">

            Noticias

        </span>

    </a>

    </td>

</tr>

</tr>

<tr>

<td >

<a href="#"><span class="letra">Foros</span></a>

</td>

</tr>

</tr>

<tr>

<td >

<a href="#"><span class="letra">Artículos</span></a>

</td>

</tr>

<tr>

<td >

<a href="#"><span class="letra">Ranking</span></a>

</td>

</tr>

<tr>

<td >

<a href="#"><span class="letra">Jugar</span></a>

</td>

</tr>

<tr>

<th height="400"></th>

</tr>

</table>

 
 
</BODY>

</HTML>

Y mi problema es que con altura height:40; en el estilo ya no se me ilumina entero, solo una parte

. si lo reduzco a height:20; sin embargo si que funciona :S
No entiendo mucho de css, lo mismo he cometido algunos errorcillos.

Salu2. (me disculpo si ya se trato pero he estado hojeando y no encontre nada)

caricatos · #2 (**permalink**) 02/06/2004, 01:43

Hola yoseman:

Donde tengas el elemento al que quieres aplicar el efecto (por lo que vi son las etiquetas dentro del menu) prueba con height al 100% para que abarque toda la celda:

#menu a { display:block;height: 100%;
text-decoration:none;
}

Saludos

JavierB · #3 (**permalink**) 02/06/2004, 01:44

Hola, yoseman.

El problema es que le estás dando un ancho al enlace en esta línea:

Código:

#menu a        {    display:block;height:20;

Cambialo por esto:

Código:

#menu a        {    display:block;height:100%;

Saludos,

caricatos · #4 (**permalink**) 02/06/2004, 01:57

JavierB

:

Está bien que estaba con la resaca de la fiesta

, pero hay que respetar los semáforos

Saludos

JavierB · #5 (**permalink**) 02/06/2004, 02:25

Saludos, caricatos.

No ha estado mal, para ser el primer golpe en los nuevos Foros. La próxima vez miraré antes de cruzar.

Saludos,

yoseman · #6 (**permalink**) 02/06/2004, 03:40

Gracias

Ahora resulta que el texto se me alinea mas o menos bien en el internet explorer de windows, pero sin embargo en netscape no me hace el vertical-align:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> Iluminar celda </TITLE>

<style type="text/css">

 
@font-face

        {font-family: "Arial"; 

        src: url("./arial.ttf");} 

 
body        

        {background-color: #807CA8;

        scrollbar-shadow-color: #706C98;

        scrollbar-highlight-color: #807CA8;

        scrollbar-darkshadow-color: #706C98;

        scrollbar-track-color: #706C98;

        scrollbar-arrow-color: #706C98;}

 
#menu

        {background:#706C98;

        font-family: Arial;}

 
#menu th

        {color:#EEEEEE;

        background:#5F587A;

        padding-left: 4px;

        padding-right: 4px;

        padding-top: 50px;

        padding-bottom: 50px;}

 
#menu td

        {text-align:center;

        height: 50px;

        border-top-width: 1px;

        border-left-width: 1px;

        border-right-width: 2px;

        border-bottom-width: 2px;

        border-color: #706C98;

        border-style: outset;                

        background-color:#A0A0B8;}

 
#menu a    

        {display:block;

        height: 100%;            

        text-decoration:none;}

 
#menu a,a:active,#menu a:link,#menu a:visited

        {color:  #333333}

 
#menu a:hover    

        {color:#FFFFFF;

        background:#C0C0D8;}

 
span

        {font-weight: bold;

        letter-spacing:1px;

        font-size:14;    

        vertical-align:sub;}

 
</STYLE>

<META NAME="Generator" CONTENT="EditPlus">

</HEAD>

<BODY>

<table id="menu" cellspacing="8">

<tr>

    <th height="30">

    <span>

    .:: El Otro Sitio ::.

    </span>

    </th>

</tr>

<tr>

    <td>

    <a href="#"><span>Noticias</span></a>

    </td>

</tr>

</tr>

<tr>

    <td>

    <a href="#"><span>Foros</span></a>

    </td>

</tr>

</tr>

<tr>

    <td>

    <a href="#"><span>Artículos</span></a>

    </td>

</tr>

<tr>

    <td>

    <a href="#"><span>Ranking</span></a>

    </td>

</tr>

<tr>

    <td>

    <a href="#"><span>Jugar</span></a>

    </td>

</tr>

<tr>

<th height="400"></th>

</tr>

</table>

</BODY>

</HTML>

Pero creo que eso es ya mas raro.

Salu2 y gracias por vuestras respuestas.

caricatos · #7 (**permalink**) 02/06/2004, 12:53

Hola otra vez:

Prueba con vertical-align: sub; en los tag "a"...

Saludos