Foros del Web » Creando para Internet » CSS »

Efecto iluminar celda

Estas en el tema de Efecto iluminar celda en el foro de CSS en Foros del Web. 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  ...
  #1 (permalink)  
Antiguo 02/06/2004, 02:24
Avatar de yoseman  
Fecha de Ingreso: diciembre-2003
Ubicación: Alicante (Spain)
Mensajes: 471
Antigüedad: 14 años
Puntos: 5
Efecto iluminar celda

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"
srcurl("./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-familyArial
                
font-weightbold;
                
letter-spacing:1px;
                
font-size:14;
                
color:#FFFFFF;
                
background:#5F587A;    
                
padding-left4px;
                
padding-right4px;
                
padding-top50px;
                
padding-bottom50px;}

#menu td    {    vertical-align:sub;
                
position:relative;
                
height:40;
                
border-top-width1px;
                
border-left-width1px;
                
border-right-width2px;
                
border-bottom-width2px;
                
border-color#706C98;
                
border-styleoutset;
                
font-familyArial;
                
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)

Última edición por yoseman; 02/06/2004 a las 02:37
  #2 (permalink)  
Antiguo 02/06/2004, 02:43
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #3 (permalink)  
Antiguo 02/06/2004, 02:44
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #4 (permalink)  
Antiguo 02/06/2004, 02:57
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
JavierB :

Está bien que estaba con la resaca de la fiesta , pero hay que respetar los semáforos

Saludos
  #5 (permalink)  
Antiguo 02/06/2004, 03:25
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Saludos, caricatos.

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

Saludos,
  #6 (permalink)  
Antiguo 02/06/2004, 04:40
Avatar de yoseman  
Fecha de Ingreso: diciembre-2003
Ubicación: Alicante (Spain)
Mensajes: 471
Antigüedad: 14 años
Puntos: 5
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>
<
TITLEIluminar celda </TITLE>
<
style type="text/css">

@
font-face
        
{font-family"Arial"
        
srcurl("./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-familyArial;}

#menu th
        
{color:#EEEEEE;
        
background:#5F587A;
        
padding-left4px;
        
padding-right4px;
        
padding-top50px;
        
padding-bottom50px;}

#menu td
        
{text-align:center;
        
height50px;
        
border-top-width1px;
        
border-left-width1px;
        
border-right-width2px;
        
border-bottom-width2px;
        
border-color#706C98;
        
border-styleoutset;                
        
background-color:#A0A0B8;}

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

#menu a,a:active,#menu a:link,#menu a:visited
        
{color:  #333333}

#menu a:hover    
        
{color:#FFFFFF;
        
background:#C0C0D8;}

span
        
{font-weightbold;
        
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.
  #7 (permalink)  
Antiguo 02/06/2004, 13:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola otra vez:

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

Saludos
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




La zona horaria es GMT -6. Ahora son las 02:58.