Foros del web, para los que viven de bits

yoseman · 02-jun-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 · 02-jun-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 · 02-jun-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 · 02-jun-2004, 01:57

JavierB

:

Está bien que estaba con la resaca de la fiesta

, pero hay que respetar los semáforos

Saludos

JavierB · 02-jun-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 · 02-jun-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 · 02-jun-2004, 12:53

Hola otra vez:

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

Saludos

02-jun-2004, 01:24	#1 (permalink)
yoseman Fecha de Ingreso: diciembre-2003 Ubicación: Alicante (Spain) Mensajes: 430	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"; 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) Última edición por yoseman; 02-jun-2004 a las 01:37.

02-jun-2004, 01:44	#3 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.552	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, __________________ Lee las Políticas de los foros y escribe correctamente.

02-jun-2004, 02:25	#5 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.552	Saludos, caricatos. No ha estado mal, para ser el primer golpe en los nuevos Foros. La próxima vez miraré antes de cruzar. Saludos, __________________ Lee las Políticas de los foros y escribe correctamente.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

02-jun-2004, 01:43	#2 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.218	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

02-jun-2004, 01:57	#4 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.218	JavierB : Está bien que estaba con la resaca de la fiesta , pero hay que respetar los semáforos Saludos

02-jun-2004, 03:40	#6 (permalink)
yoseman Fecha de Ingreso: diciembre-2003 Ubicación: Alicante (Spain) Mensajes: 430	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.

02-jun-2004, 12:53	#7 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.218	Hola otra vez: Prueba con vertical-align: sub; en los tag "a"... Saludos