Preguntas sobre creación de webs (CSS, HTML y Javascript)

Arrovf · Diciembre 18, 2005, 12:17:30 AM

Hola amigos, pues tengo unas dudas sobre CSS (y quizás también de HTML), bueno empiezo:

1 - Tengo una tabla hecha que con internet explorer se ve asi:

en cambio, con Mozilla Firefox se ve así:

Y este es el código de la tabla:

Código [Seleccionar]

<TABLE WIDTH="19%" CELLSPACING=0 CELLPADDING=0 align="left"
>
 <TR><TD align="center">
<IMG SRC="menu.gif" border="0">
<p>
  </TD>

 </TR>


 </TR>
<TR>
  <TD align="center"> <a href="principal.html"><IMG SRC="menunovedades.gif" border="0"> </a></TD>
 </TR>
<TR>
  <TD align="center"> <a href="videos.html"><IMG SRC="menuvideos.gif" border="0"> </a></TD>

 </TR>
 <TR>
  <TD align="center"> <a href="fotos.html"><IMG SRC="menufotos.gif" border="0"> </a></TD>
 </TR>
 <TR>
  <TD align="center"> <a href="spots.html"><IMG SRC="menuspots.gif" border="0"></a> </TD>
 </TR>

 <TR>
  <TD align="center"> <a href="historia.html"><IMG SRC="menuhistoria.gif" border="0"></a> </TD>
 </TR>
  <TR>
  <TD align="center"> <a href="tutoriales.html"><IMG SRC="menututoriales.gif" border="0"></a> </TD>
 </TR>
 <TR>

  <TD align="center"> <a href="planos.html"><IMG SRC="menuplanos.gif" border="0"></a> </TD>
 </TR>
 <TR>
  <TD align="center"> <a href="links.html"><IMG SRC="menulinks.gif" border="0"></a> </TD>
 </TR>
 <TR>
  <TD align="center"> <a href="contactar.html"><IMG SRC="menucontactar.gif" border="0"></a> </TD>

 </TR>
 <TR>
  <TD align="center"> <a href="libro.html"><IMG SRC="menulibro.gif" border="0"></a> </TD>
 </TR>
</TABLE>

bien, lo que quiero es que la tabla se vea también en Firefox de la manera en que se ve en i.explorer, es decir, con una separación entre cada imagen que hace de botón ¿como podria hacerlo?

2 - La siguiente duda es esta:
Tengo una tabla dentro de otra y quiero que la tabla de dentro se separe siempre unos 50 pixels (por ejemplo) de la parte de arriba de la tabla que la contiene. lo que querria es algo asi:

y también me interesaría saber como hacer para que la distancia de separación de la tabla a la derecha o izquierda sea de 50 pixels (por ejemplo)

3 - Última duda:
tengo una hoja de estilo guardada en la que pongo propiedades de color de los links, ¿como puedo poner algunos pocos links de una manera y el resto de la manera que ya tengo definida en una hoja de estilo?

Muchas gracias por la paciencia, reciban un cordial saludo

Eye del Cul · Diciembre 18, 2005, 11:31:54 PM

Bueno, en cuanto a la primera duda, podría hacerse así, por ejemplo:

------------------- Código HTML---------------------------

<TABLE WIDTH="19%" CELLSPACING=0 CELLPADDING=0 align="left">
<TR><TD>
<IMG SRC="menu.gif" class="menu">
</TD> </TR>

<TR>
<TD> <a href="principal.html"><IMG SRC="menunovedades.gif"> </a></TD>
</TR>
<TR>
<TD> <a href="videos.html"><IMG SRC="menuvideos.gif"> </a></TD>
</TR>
<TR>
<TD> <a href="fotos.html"><IMG SRC="menufotos.gif"> </a></TD>
</TR>
<TR>
<TD> <a href="spots.html"><IMG SRC="menuspots.gif"></a> </TD>
</TR>
<TR>
<TD> <a href="historia.html"><IMG SRC="menuhistoria.gif"></a> </TD>
</TR>
<TR>
<TD> <a href="tutoriales.html"><IMG SRC="menututoriales.gif"></a> </TD>
</TR>
<TR>
<TD> <a href="planos.html"><IMG SRC="menuplanos.gif"></a> </TD>
</TR>
<TR>
<TD> <a href="links.html"><IMG SRC="menulinks.gif"></a> </TD>
</TR>
<TR>
<TD> <a href="contactar.html"><IMG SRC="menucontactar.gif"></a> </TD>
</TR>
<TR>
<TD> <a href="libro.html"><IMG SRC="menulibro.gif"></a> </TD>
</TR>
</TABLE>

------------------- Y el CSS correspondiente ---------------------------

TD {text-align: center}
IMG {border: none; margin-top: 5px}
IMG.menu {margin-bottom: 15px}

---------

Vamos, no sé si exactamente funcionará como tú quieres, pero me imagino que te puede servir de orientación.
Respecto a la segunda duda:

Cita de: "Arrovf"Tengo una tabla dentro de otra y quiero que la tabla de dentro se separe siempre unos 50 pixels (por ejemplo) de la parte de arriba de la tabla que la contiene. lo que querria es algo asi:

Supongo que tendrás algo así:

[...]
<TABLE>
<TR> <TD>
<TABLE>
[...]
</TABLE>
</TD> </TR>
</TABLE>

Lo más cómodo para conseguir lo que pretendes quizás sea introducir directamente un par de propiedades de CSS.
Por ejemplo, tendríamos:

[...]
<TABLE>
<TR> <TD style="padding-top: 50px; padding-left: 50px; padding-right: 50px">
<TABLE>
[...]
</TABLE>
</TD> </TR>
</TABLE>

Y con esto probablemente ya funcione como deseas.

Cita de: "Arrovf"tengo una hoja de estilo guardada en la que pongo propiedades de color de los links, ¿como puedo poner algunos pocos links de una manera y el resto de la manera que ya tengo definida en una hoja de estilo?

Con CSS, por supuesto.
Así, tenemos:

A {color: #0000FF} <-- Enlaces normales, en azul.
A.especial {color: #00FF00} <-- Enlaces de tipo "especial", con color verde en vez de azul.

Y para usarlos en tu documento HTML:

<A HREF="..."></A> <-- Enlaces normales, en azul.
<A HREF="..." CLASS="especial"></A> <-- Enlaces de tipo "especial", en color verde.

Como ya habrás adivinado, puedes hacer en realidad tantos tipos de enlaces como te apetezca, definiendo clases -A.especial, A.chiquito, A.torete...- en la hoja de estilo y aplicándolas en el HTML con el atributo CLASS.

Arrovf · Diciembre 19, 2005, 08:56:00 PM

gracias por resonder tan detalladamente

.

Te cuento como me fué:

El primer problema lo solucioné.

El segundo problema lo solucioné también

.

El tercero vi que me funcionó lo que me dijiste, pero lo que quiero es que un botón de forma ovalada se ilumine de verde al pasar el ratón por encima, supongo que para esto tendré que recurrir al Flash.

Tengo una duda mas, ¿como puedo definir la altura de un espacio en blanco?, es decir, lo que sería la altura de un "<br>" para entendernos.

Muchas gracias por tu ayuda, cuando tenga la web lista te la pasaré para que la testees si quieres

Silvay · Diciembre 21, 2005, 11:30:22 AM

lo de el <br> me interesa ami mucho tambien.

A arrovf, para lo del "boton" que se ilumine de verde, necesitas recurrir al flash, si.

Eye del Cul · Diciembre 21, 2005, 06:16:25 PM

Hombre, eso del <br> que planteáis es un poco extraño; lo que suele hacerse es asignar espacio arriba o abajo de los párrafos. De todas formas, quizás con algo como "BR {font-size: 14px}" se pueda conseguir.

Para los botones luminosos -o sea, como los que aparecen en la portada de esta web-, puedes usar Javascript, que quizás sea una solución más práctica que el Flash. Necesitas dos imágenes para cada botón -la normal, y la que veremos al pasar con el ratón sobre él- y un script bastante sencillo.

Por ejemplo, éste el código fuente del frame de los botones:

<html>
<head>
<style type="text/css">
IMG {margin-bottom: 4px; border-width: 0px; width: 175px; height: 33px;}
IMG.publ {width: 88px; height: 31px;}
A {color: #000000}
BODY {margin-top: 0px; background: #000000;}
</style>
<META NAME="robots" CONTENT="noindex">
<SCRIPT LANGUAGE="JavaScript">

</script>
<link rel="SHORTCUT ICON" href="arc3d.ico">
</head>

<body>
<table border="0">
<tr>
<td valign="TOP" style="margin-top: 0px;">
<center>

<A HREF="fprincipal.php" TARGET="ventana" onMouseover="inactive('principal');window.status='principal'"; onMouseout=" active('principal')"> <IMG NAME="principal" SRC="bo_principal2.png" alt="PRINCIPAL" title="PRINCIPAL"></a><br>

<A HREF="fjuegos.php" TARGET="ventana" onMouseover="inactive('juegos');window.status='juegos'"; onMouseout=" active('juegos')"> <IMG NAME="juegos" SRC="bo_juegos2.png" alt="JUEGOS" title="JUEGOS"></a><br>

<A HREF="fmapas.html" TARGET="ventana" onMouseover="inactive('mapas');window.status='mapas'"; onMouseout=" active('mapas')"> <IMG NAME="mapas" SRC="bo_mapas2.png" alt="MAPAS" title="MAPAS"></a><br>

<A HREF="futil.html" TARGET="ventana" onMouseover="inactive('util');window.status='util'"; onMouseout=" active('util')"> <IMG NAME="util" SRC="bo_util2.png" alt="UTILIDADES" title="UTILIDADES"></a><br>

<A HREF="flinux.html" TARGET="ventana" onMouseover="inactive('linux');window.status='linux'"; onMouseout=" active('linux')"> <IMG NAME="linux" SRC="bo_linux2.png" alt="SECCIÓN LINUX" title="SECCIÓN LINUX"></a><br>

<A HREF="ftutor.html" TARGET="ventana" onMouseover="inactive('tutor');window.status='tutor'"; onMouseout=" active('tutor')"> <IMG NAME="tutor" SRC="bo_tutor2.png" alt="TUTORIALES" title="TUTORIALES"></a><br>

<A HREF="http://www.arcades3d.net/foro" TARGET="_blank" onMouseover="inactive('foro');window.status='foro'"; onMouseout=" active('foro')"> <IMG NAME="foro" SRC="bo_foro2.png" alt="FORO" title="FORO"></a><br>

<A HREF="fproyect.html" TARGET="ventana" onMouseover="inactive('proy');window.status='proy'"; onMouseout=" active('proy')"> <IMG NAME="proy" SRC="bo_proy2.png" alt="PROYECTOS" title="FUTUROS PROYECTOS"></a><br>

<A HREF="fnoticias.php?frames=1&puntero=0" TARGET="ventana" onMouseover="inactive('not');window.status='email'"; onMouseout=" active('not')"> <IMG NAME="not" SRC="bo_noticias2.png" alt="NOTICIAS" title="ARCHIVO DE NOTICIAS"></a><br>

<A HREF="femail.html" TARGET="ventana" onMouseover="inactive('email');window.status='email'"; onMouseout=" active('email')"> <IMG NAME="email" SRC="bo_email2.png" alt="EMAIL" title="EMAIL"></a><br>

<A HREF="fenlaces.html" TARGET="ventana" onMouseover="inactive('enlaces');window.status='enlaces'"; onMouseout=" active('enlaces')"> <IMG NAME="enlaces" SRC="bo_enlaces2.png" alt="ENLACES" title="ENLACES"></a><br>
<br> <br>
...

</body>
</html>

No es muy elegante, pero como ejemplo puede servir.

Arrovf · Diciembre 21, 2005, 10:40:34 PM

Lo del <Br> no funcionó pero no importa no es importante, como dices hay otros medios para conseguir lo que quiero.

En cuanto a los botones, he estado mirando el código que pusiste y creo que lo pillo mas o menos como es la cosa.
Aunque hay unas partes que no entiendo bien:



¿Este texto se tiene que poner tal cual para que funcione?.

Una cosa, el javascript lo interpretan bien la mayoria de navegadores ¿verdad?.

Gracias por toda la ayuda que me estás dando

Eye del Cul · Diciembre 22, 2005, 01:12:51 AM

Esto tiene un poco más de tela...
Cada botón tiene un nombre -definido por el atributo <IMG NAME="...">. Al pasar el ratón sobre ellos el script llama a las funciones "active" o "inactive" -según corresponda-. Estas funciones, a partir del nombre del botón, indican qué imagen debe mostrar el navegador (botón inactivo o botón pulsado).

Así, tenemos un botón llamado mapas, al que no estamos señalando con el puntero del ratón. Por lo tanto:

function inactive(imgName) <-- "imgName" tiene el valor del <IMG NAME="..."> de nuestro botón; en este caso 'mapas'.
{
if (ver == "yes") { <-- Esta línea no es importante; comprueba que no uses Netscape 3.0 o inferior.
img2 = eval(imgName + "2.src"); <-- A la variable "img2" le damos el valor de 'mapas' + '2.src'; o sea, mapas2.src
document [imgName].src = img2; <-- Y muestra para el botón la imagen llamada 'mapas2.src'

En este ejemplo, 'mapas2.src' sería el nombre mediante el cual Javascript identifica la imagen "boton_mapas2.gif". Esto se define así:

mapas2 = new Image(); mapas2.src ="boton_mapas2.gif";

Cada botón tiene dos estados (activado y desactivado), y por lo tanto dos imágenes -img1.gif, img2.gif"-. Estas dos imágenes requieren dos definiciones como la que acabo de comentar...
Vale, la explicación es una puta mierda :-((, pero supongo que con esto y el script que te he dejado más arriba -y un poco de ensayo y error- le cogerás el truco.

Cita de: "Arrovf"Una cosa, el javascript lo interpretan bien la mayoria de navegadores ¿verdad?.

Sí, eso no es mayor problema... Sólo los navegadores más sencillos -como Dillo, por ejemplo- no lo tienen implementado. Y aun así, no pasa nada; la página sigue viéndose igual, sólo que al no funcionar el script las imágenes aparecerán fijas -o sea, como si no hubieramos hecho nada especial-.

Arrovf · Diciembre 22, 2005, 01:50:32 AM

Gracias otra vez Eye del Cul, trastearé un poco siguiendo tu ejemplo e indicaciones, lo haré cuando tenga terminado el resto de la web.

Y bueno tengo una última pregunta, ¿que formatos de sonido son compatibles con el mayor numero de navegadores posibles?, por lo menos que sean compatibles con I.Explorer y Firefox.
Gracias de nuevo por la paciencia

Eye del Cul · Diciembre 25, 2005, 07:44:59 PM

Pues de sonidos, la verdad es que no tengo ni idea... En algunas páginas suenan midis cuando entras, así que supongo que con el MID no deberían haber problemas.
De todas formas, a mí nunca me han gustado las webs con músicas y sonidos...

Arrovf · Diciembre 28, 2005, 11:10:57 PM

He logrado que se iluminen los botones al pasar por encima de ellos, gracias Eye del Cul, tu ejemplo me fue vital :¡yepa!: .
Pero me surge la dude de que: los navegadores lo interpretan como codigo inseguro ¿verdad?¿que puedo hacer para que no sea interpretado como "inseguro"?

Otra duda:
¿puedo hacer que un link (una foto) se me abra en una ventana estilo popup con fondo negro?¿como lo puedo hacer?, ¿Los navegadores lo bloquearan al abrir el link?

Última duda que no tiene nada que ver con lo anterior:
¿como puedo integrar un libro de visitas dentro de una celda de una tabla?

Gracias de nuevo

Eye del Cul · Diciembre 29, 2005, 07:37:26 PM

Cita de: "Arrovf"He logrado que se iluminen los botones al pasar por encima de ellos, gracias Eye del Cul, tu ejemplo me fue vital :¡yepa!: .
Pero me surge la dude de que: los navegadores lo interpretan como codigo inseguro ¿verdad?¿que puedo hacer para que no sea interpretado como "inseguro"?

¿Inseguro? Pues ni idea, la verdad...
Con el código que puse para los botones de Arcades 3D creo que no ha habido nunca ese problema. Quizás es que tengas las opciones de seguridad de tu navegador al máximo, o algo así.

Cita de: "Arrovf"
Otra duda:
¿puedo hacer que un link (una foto) se me abra en una ventana estilo popup con fondo negro?¿como lo puedo hacer?, ¿Los navegadores lo bloquearan al abrir el link?

Un par de líneas de Javascript bastan para hacer eso... Y no, los navegadores no suelen bloquearlo; al menos, no deberían hacerlo. Claro que eso depende de las opciones que estén activadas en cada navegador.

Por ejemplo, yo lo hice así en mi vieja página:

<SCRIPT LANGUAGE="JavaScript">
function popup(page) {
window.open(page,'_blank','width=640,height=500,scrollbars=1,resizable=0');
}
</SCRIPT>
--- Dentro de la etiqueta <HEAD> ---

<A HREF='javascript:popup("enlace.html")'> ... </A>
Y esto en el enlace que abrirá la nueva ventana.

Cita de: "Arrovf"
Última duda que no tiene nada que ver con lo anterior:
¿como puedo integrar un libro de visitas dentro de una celda de una tabla?
Gracias de nuevo

Hmmm...
Sobre eso sí que ya no tengo ni idea.

Arrovf · Diciembre 29, 2005, 11:23:23 PM

He estado haciendo pruebas, y al final consegui este codigo copiandolo de una web:

<a href='javascript:CargarFoto("suecodropin.jpg")' onMouseover="inactive('imgfotsue');window.status='imgfotsue'"; onMouseout=" active('imgfotsue')"><IMG NAME="imgfotsue" SRC="fotos/imgfotsue.gif" border=0 alt="ver foto"></a>[/list]

Aunque ponga 'javascript:CargarFoto("fotos/suecodropin.jpg")' no funciona lo de cargar las fotos de otro directorio, no se si me explico.

Si no sabes resolver el problema o no tienes ganas o tiempo no pasa nada, no te preocupes, ya me has ayudado mucho

.
Espero no atormentarte con mas dudas de estas,
un saludo.

Karnizero · Enero 03, 2006, 06:40:33 PM

Bueno, ya que ha salido el tema, os indico una página web genial, que indica si una web dada tiene una validez dentro de los estándares web. Permite comprobar si el código HTML, XHTML, CSS, PHP y demás es correcto y sigue los estándares.

Bueno, la web es la siguiente:

http://validator.w3.org/

Los resultados para //www.arcades3d.net son que tiene 20 errores, frente a los 51 de Google o a los 310 de Yahoo. Toda una proeza

Además, muestra cada uno de los errores, y una breve descripción de ellos, para poder así corregislos más fácilmente:

Se supone que una web que siga todos los estándares (que en realidad yono tengo ni idea de cuales son), irá más rápido, servirá para más navegadores y plataformas, ocupará menos, será más estructurada, más segura, etc... Igual que cualquier otro programa.

También me he fijado que www.arcades3d.net ha pasado una validación del código CSS, así que como podeis comprobar, el autor de la misma (osea, eyedelcul, para los más despistados) ha pasado su trabajo delante del ordenador con el Notepad2