Duda sobre HTML

[Karnizero]

Estoy haciendo una pequeña página web, nada del otro mundo, acerca de los FPS, eventos diversos, herramientas... Pero la novedad está en que todo ello lo voy a hacer enfocándolo hacia un punto de vista Linuxero. Es decir, cómo hacer mapas de Doom en Linux, de Quake, torneos, cómo jugarlos bajo Linux, etc...

Y bueno, dejando de lado la propaganda barata, la cuestión es que en la portada aparece una screenshot del Plutonia Experiment. Y la duda, que a ver si los expertos en HTML, CSS y demás me sabeis resolver.

Lo que quiero hacer es poder escribir encima de la imagen, como si fuese el fondo.
Lo que quiero conseguir es que, en el screenshot, en el cual aparece en la parte de abajo la vida, las balas y armadura, quiero poner un contador encima del número de balas, para que así parezca que estas van aumentando a medida que la gente entre en la web.



No se si me he explicado bién.

Podeis ver la web aquí, para que tengais una idea más clara de lo que quiero:

The DooM

[[Si la imagen es demasiado pesada, que creo que no, avisad, que la pongo en pequeño]]

[EDIT]
Y otra cosilla que se me olvidó comentar, es que si alguien conoce de un buén servicio de foros. Algo que sea similar a éste, o se le acerque. Preferiblemente gratuito.

[Arrovf]

pues el contador te lo da el servidor web normalmente, tu puedes cambiarle su aspecto según las opciones que haya. Luego cuando lo tengas lo linkeas con el codigo que te dan y lo alineas con CSS hasta que quede en el punto donde te interese.

Bueno lo primero que deberias hacer es poner esa imagen como fondo del <td>, asi puedes colocar el contador encima.
luego en esa etiqueta <td> pones los atributos CSS para hacer márgenes, el código es como este ejemplo:

<td style="padding-top: 7px; padding-bottom: 25px; padding-left: 7px; padding-right: 7px">

Supongo que entenderás el significado, cada padding es el margen en pixels de un lado, no hace falta definir los 4 lados si no quieres, solo los que te interesen.

Usando esto puedes colocar el contador donde te parezca dentro del <TD>.

Saludos amigo.

[EDITO, JORL]
se me olvidaba que tienes que poner el tipo de alineacion que tendrá la celda dentro de la etiqueta <td>, en tu caso tendrás que poner dentro de dicha etiqueta valign="bottom", si no te sale bien avisame.

[EDITO2, CONDEMOR!]
se me olvidaba otra cosa, al poner una imagen de fondo en una tabla te recomiendo que pongas dentro del <td> la altura y anchura de esta imagen en pixels, por ejemplo algo asi: HEIGHT=300 WIDTH=200, si no lo pones la tabla será del tamaño del contenido de la misma, no de la imagen de fondo.

[Karnizero]

Ok, he entendido mas o menos lo que dices, teniendo en cuenta que no tengo ni idea de HTML ni CSS. Vamos, sólo sé unas nociones básicas.

Aún así tengo una duda:

La página la hago usando un programa llamado NVU, que no se si hay también para Windows.

La cuestión es que ¿cómo hago para poner la imagen de fondo de la tabla?
Actualmente es una imagen insertada dentro de la tabla.

Indícame el código fuente que sirve para poner la imagen de fondo de la tabla.

Ahora mismo yo lo tengo así:

Código [Seleccionar] Expandir

<table
style="width: 640px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="2">
 <tbody>
   <tr>
     <td><img src="imagenes/plutonia_main.png"
alt="[Plutonia War]" style="width: 640px; height: 480px;"></td>
   </tr>
 </tbody>
</table>


La imagen se llama plutonia_main.png, tal y como puedes leer en ese trozo de código.

[Arrovf]

se nota que usas un programa de creación web por la cantidad de código inútil que tiene la página jeje.
Bueno, lo del fondo funcionaría con este codigo haciendolo exclusivamente en HTML:

Código [Seleccionar] Expandir

<table align="center" border="1" cellpadding="0" cellspacing="2">

  <tr>
  <td width="640" height="480" background="imagenes/plutonia_main.png">
  </td>
  </tr>

</table>


[Karnizero]

Hombre, la verdad es que dicho programa permite editar el código HTML a mano, pero como mis conocimientos acerca de él son mas bién nulos, pues me limito a hacerlo de la forma "fácil".

Bueno. Lo que me has dicho, sí me funcionaba, pero al ver el resultado, preferí dejar el contador de lado, ya que no quedaba estético.

Y eso, muchas gracias por el Micro-Mini-Tutorial.
Ahora ya sé como cambiar esas cosillas en una tabla.  ::oeoe::

[Arrovf]

De nada, si tienes mas dudas pregunta, no te cortes  

[Karnizero]

De nada, si tienes mas dudas pregunta, no te cortes  

Así se hará  

[RicarDooM]

Oye karnizero, te recomiendo que quites el logo animado o trates de disminuir su tamaño, es de 1350.68 KB y valla que es bastante. No tube apuro en ver la página pero conexiones de 56kb van a sufrir mucho.

[Karnizero]

Oye karnizero, te recomiendo que quites el logo animado o trates de disminuir su tamaño, es de 1350.68 KB y valla que es bastante. No tube apuro en ver la página pero conexiones de 56kb van a sufrir mucho.

Es que el logo ese animado me gusta bastante y me fastidiaría bastante quitarlo.
A ver lo que hago. Intentaré quitarle peso la imagen, y si consigo que ocupe menos. Y si no, pues haré lo que dices...

Gracias por el consejo, pues la verdad no me había fijado en absoluto del tamaño de la imagen.

[EDIT]

Listo, he transformado la imagen de 1,5 Megas en otra de 124 Kilobytes jejeje

Cada vez me gusta más el GIMP  

[kain]

si pero mi recomendacion de siempre nunca utilizes un tamaño definido para imgenes,tablas por que en distientos navegadores,monitores se veria mal lo mejor es buscar un numero en porcentaje y se lo cambias por ejemplo:


<html>
<head><title>.::Linux Juegos::.</title></head>
<body background="fondo5.png">
<table width="34%" height="78%">
<td cellspacing="7">
<p>Hola</p>
</td>
</table>
</body>
</html>
]/size]


asi se vera en todos los monitores, se achicara y agrandara en cada monitor
y tu pregunta veo que ya te han respondido y espero que quede bien tu pagina
talvez te pida algunos vavores para terminar la mia (cada vez falta menos)

PD:No se si lo has hecho ahora o de antes pero ahora tu firma birlla donde le pusiste el efecto de luz te a quedado muy currado

[RicarDooM]

Bueno, con el cambio muchos te lo agradeceran, estoy seguro.

si pero mi recomendacion de siempre nunca utilizes un tamaño definido para imgenes,tablas por que en distientos navegadores,monitores se veria mal lo mejor es buscar un numero en porcentaje

Claro que es importante poner valores relativos y no absolutos pero sólo cuando el tamaño de la página ocupa todo el ancho de la pantalla.

En el caso de la web de karnizero la resolucion es menor a 800 pixeles, por lo tanto no es necesario ser tan rigorista.

[Ronald]

parate de darte un consejo... la portada esta excelente...   ¿esta con el souce port Jdoom?

[Karnizero]

asi se vera en todos los monitores, se achicara y agrandara en cada monitor
y tu pregunta veo que ya te han respondido y espero que quede bien tu pagina
talvez te pida algunos vavores para terminar la mia (cada vez falta menos)

PD:No se si lo has hecho ahora o de antes pero ahora tu firma birlla donde le pusiste el efecto de luz te a quedado muy currado

Efectivamente, si alguno de vosotros necesitas ayuda a la hora de hacer un banner, una firma o cualquier otra cosa de diseño gráfico, aquí me teneis.

Y sí, he modificado mi firma y le he puesto ese "brillo" animado.
Sin embargo la voy a cambiar, por que no me quedó como yo quería. La de ahora es sólo una fase Beta, y todo sea dicho, un poco chapucera.  :wink:

parate de darte un consejo... la portada esta excelente...   ¿esta con el souce port Jdoom?

Sí, se trata del mapa map32 del wad plutonia experiment que viene dentro del paquete de Final Doom, junto con TNT. En ese caso estoy usando el Doomsday Engine (jDoom) bajo Linux.
Tengo muchos más screenshots, y no sólo de Doomsday, si no también de Vavoom.
Y ahora que lo dices, pondré una sección de capturas, en la que incluso vosotros podeis enviarme vuestras imágenes.

[Eye del Cul]

Vaya, realmente te está quedando una web chula. Como sugerencia, al fondo de la tabla de abajo -la que muestra el texto- le podías dar un color que la diferencia un poco del fondo negro de la página. Algo oscuro y discreto, que tampoco llame mucho la atención ni haga difícil leer el texto.

[Karnizero]

Vaya, realmente te está quedando una web chula. Como sugerencia, al fondo de la tabla de abajo -la que muestra el texto- le podías dar un color que la diferencia un poco del fondo negro de la página. Algo oscuro y discreto, que tampoco llame mucho la atención ni haga difícil leer el texto.

Gracias por los cumplidos

Anoto tu sugerenci en la lista de cosas pendientes.  

[EDIT]
Otra pequeña duda. En la portada, encima de la imagen, aparece la frase "The Doom". Me he fijado que sólo en mi ordenador aparece con las letras (fuente) correcta, ya que para el título ese usé una fuente llamada "Electroh" o algo así.
La pregunta es que si hay alguna forma de que los demás puedan ver las letras correctamente, sin tener que poner las fuentes para que se las descarge quién quiera.
Vamos, como si fuese como una cookie, que se instala la fuente automáticamente.

En realidad se tendría que ver así: