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