¿Cómo colocar una imagen de fondo utilizando CSS?

[ambigus]

Mi idea es colocar los botones del menú como fondo, es decir, las imagenes de los botones como fondo y encima las letras, a continuación les comparto mi diseño:



También quiero que cada uno de los botones sean tratados como una casilla o algo así. Es que sé que se puede hacer con Tablas y Celdas, pero nose quiero probar el CSS creo
que sería más elegante :)

[ArturoGallegos]

los menús no se deben de hacer con tablas eso es algo precario.

crea el menú usando listas <ul> y para colocar una imagen de fondo en el menú se hace como en cualquier otro elemento

si no sabes como es porque en definitiva debes empezar a documentarte sobre CSS, te recomiendo librosweb.es en especial esta sección que es la que aplica a tu pregunta -> clic aquí

[ambigus]

Muchas gracias Ag666 seguí tu consejo y he estudiado un poco acerca de la CSS.

Ahora te comparto esta URL, donde logré lo que quería hacer:


http://extremegamex1.gofreeserve.com/aprendiendocss/index_1.2.3.html

Ahora bien, ya logré colocar el botón de fondo, sin embargo quiero que el otro botón esté al lado del de arriba, y no debajo de él, tal y como la imagen de ejemplo que postulé al iniciar el tema.

Te comparto el .CSS que he logrado hasta ahora.

Código CSS:

@charset "utf-8";
/* CSS Document */
 
p { color: black; font-family: Verdana; }
.destacado { color: white; }
div {
  width: 120px;
  height: 60px;
  padding-left:  20px;
  padding-right: 20px;
  padding-top:  3px;
  padding-bottom: 1px;
  margin-left:   10px;
  margin-right:  10px;
  margin-top: 10px;
  margin-bottom: 0px;
  border: 0px solid black;
  background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  background-repeat: no-repeat;
  background-position: 3.5px 12px;
}
 

Espero que me ayudes y me des algunos consejos para mejorarlo.

Muchas gracias de antemano.

[Ventru3]

Mhmm... dale un class o id al div que contenga la imagen o al navegador para poder diferenciar.

Para que te salga el menu en linea tienes que poner la propiedad display: inline; en el li.

Un ejemplo

Código CSS:

ul#nav li {
    display: inline;
    padding: 0px 15px 0px 20px; //Esto es para las separaciones laterales
}
 

[Rolldi]

Dios! Cómo se te ocurre mezclar ese menú con el contenido!!

Te recomendaría hacer un menú de color blanco o negro con texto de menor tamaño.

Es una lástima que arruines un diseño tan bonito con ese menú.

[ambigus]

Gracias: Rolldi y Ventru3, por su pronta respuesta.

La pregunta mia ahora es,

Rolldi ¿Qué diseño de menú me aconsejarías para el diseño que tengo?. Te comparto algunos de los botones que me llamaron la atención:

http://www.psdgraphics.com/buttons/p...d-web-buttons/

Ahora bien, Dices que:

Cómo se te ocurre mezclar ese menú con el contenido!!

¿Cómo puedo corregir eso?, ¿Qué solución me recomendarías?.

Ventru3

¿Cómo agrego un "ID" o un "Class" al DIV, es decir, sería otro DIV diferente del contenido globar?, ¿Puedo darle el nombre de:

Código CSS:

div=id {
  width: 120px;
  height: 60px;
  margin-left:   10px;
  margin-right:  10px;
  margin-top: 10px;
  margin-bottom: 0px;
  border: 0px solid black;
  background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  background-repeat: no-repeat;
  background-position: 3.5px 12px;
  display: inline;
  padding: 0px 15px 0px 20px;
}
 

Otra pregunta:

Esto:

Código CSS:

padding: 0px 15px 0px 20px;
 

Reemplaza esto?:

Código CSS:

padding-left:  20px;
  padding-right: 20px;
  padding-top:  3px;
  padding-bottom: 1px;
 

Gracias por una pronta respuesta.

[ArturoGallegos]

1.- como ya te menciono el compañero @Ventru3 solo es aplicar display inline
- acabo de ver tu pagina de muestra y veo creaste los botones utilizando div y párrafos, esto pinta muy mal y te da poca flexibilidad
intenta algo como

Código HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
 

mira el código fuente de este menú básico, la estructura y css te puede servir como base para armar el tuyo
-> clic aquí

2.- el como este tu diseño y como se vea con ese menú es mera apreciación del visitante, puede ser muy bonito o muy feo pero recuerda que siempre lo principal que has de buscar es la usabilidad antes de la estética.
al compañero @rolldi no le gustaron, para mi son solamente un tanto burdos y exagerados al intentar decorarlos pero al final no están tan mal si consideras que estas aprendiendo ya con el tiempo veras mejores opciones, trata de utilizar algo mas simple y menos adornado... y que te den la flexibilidad de agregar mas o menos texto sin que se vean mal.

3.- padding: 0px 15px 0px 20px; es equivalente y forma abreviada de:

Código CSS:

padding-top:0;
padding-right:15px;
padding-bottom:0;
padding-left:20px;
 

aunque te aconsejo usar el método abreviado siempre que te sea posible

[ambigus]

Muchas gracias: Ag666 por tu pronta respuesta.

Ahora te comparto mis avances:

http://extremegamex1.gofreeserve.com...dex_1.2.4.html

He avanzado un poco, sin embargo aún no logro colocarlos los dos en forma vertical.

Les dejo el código .CSS:

Código CSS:

<style type="text/css">
p { color: black; font-family: Verdana; }
.destacado { color: white; }
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  background-repeat: no-repeat;
  background-position: 3.5px 12px;
  font-family: Verdana;
  padding-left:  20px;
  padding-right: 20px;
  padding-top:  3px;
  padding-bottom: 1px;
  margin-top: 5px;
  margin-bottom: 0px;
    }
 
#menu1 {
  clear: both;
  float: left;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  }
    
#menu1 li a {
    height: 32px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    height: 60px;
    text-decoration: none;
    display: inline;
    }   
    
#menu1 li a:link, #menu1 li a:visited {
    color: #FFF;
    display: block;
    padding: 15px 0 0 0px;
    }   
  </style>
 

y el HTML por si acaso:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Free CSS Vertical Menu Designs at exploding-boy.com</title>
  <style type="text/css">
p { color: black; font-family: Verdana; }
.destacado { color: white; }
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-image: url("http://extremegamex1.gofreeserve.com/images/boton_menu_1.png");
  background-repeat: no-repeat;
  background-position: 3.5px 12px;
  font-family: Verdana;
  padding-left:  20px;
  padding-right: 20px;
  padding-top:  3px;
  padding-bottom: 1px;
  margin-top: 5px;
  margin-bottom: 0px;
    }
 
#menu1 {
  clear: both;
  float: left;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  }
    
#menu1 li a {
    height: 32px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    height: 60px;
    text-decoration: none;
    display: inline;
    }   
    
#menu1 li a:link, #menu1 li a:visited {
    color: #FFF;
    display: block;
    padding: 15px 0 0 0px;
    }   
  </style>
</head>
 
<body>
 
<div id="menu1">
        <ul>
            <li><a href="Descripción" title="Descripción">Descripción</a></li>
        </ul>
</div>
<div id="menu1">
        <ul>
            <li><a href="#2" title="Link 2">Requisitos</a></li>
        </ul>
</div>
</body>
</html>
 

Espero una pronta respuesta.

[ArturoGallegos]

hay amigo jeje no viste el link al menú de ejemplo que te deje?

1.- las id son únicas y no se pueden repetir en una mis pagina html
2.- utiliza solo una lista para todos los enlaces no una lista por cada enlace, de echo ese es tu problema y por eso no se muestran en una linea como tu los deseas.

Código HTML:

<ul>
        <li>boton 1</li>
        <li>boton 2</li>
        <li>boton 3</li>
    </ul>
 

3.- cuando tu estas participando en un tema y alguien responde se te notifica vía email quien ha respondido y que respondió... no es necesario que este usuario te mande un mensaje privado para que tu te des cuenta.

[ambigus]

Hola amigo: Ag666, si ví el ejemplo que me diste, y me llamó la atención. Sin embargo, lo que yo quiero es algo similar a eso, pero con la diferencia de que con la imagen:



se ponga de fondo en cada uno de las secciones: Descripción, Imagenes, Requisitos, Videos, Desgargar.

Supongo que se podría hacer dandole un "Repeat-x" al bacground, pero tendría que calcular las distancias modificar la imagen, nose, ¿Podrías recomendarme y ayudarme cómo hacer lo que quiero?.

Es que estoy seguro que con una tabla y sus celdas lo podría hacer, porque así lo hacía antes, pero esta vez quiero probar con el estilo .css que sé que es mucho más elegante.

Espero una pronta respuesta, Amigo

[ArturoGallegos]

no nada de repeat por el tipo de imagen que deseas utilizar no tienes la flexibilidad de tamaño, necesitas colocar la imagen en cada <li> por ejemplo:

Código CSS:

#Menu li{display:block;float:left;width:123px;height:38px;font:13px arial;line-height:38px;text-align:center;background:#03f url(imagen.png) no-repeat;}
 

Código HTML:

<ul id="Menu">
    <li>Boton 1</li>
    <li>Boton 2</li>
    <li>Boton 3</li>
</ul>
 

Nota: para mostrar los elementos en linea yo use display:block y float:left para poderles dar el alto y ancho del botón requeridos... hay otros casos donde se puede usar y/o ser mas conveniente usar display:inline pero ambos son validos

te recomiendo pases a http://librosweb.es y le des una repasada a los 3 libros de la parte inferior sobre html y css

[ambigus]

Hola de nuevo Ag666 te agradesco grandemente, me has ayudado mucho, mira cómo quedó al final:

http://extremegamex1.gofreeserve.com...dex_1.2.6.html

Ahora sólo hace falta el resto XD:



Pero bueno es un avance :D.

[ambigus]

Amigo quisiera preguntarte, ¿Es posible colocar este fondo:



Debajo del menú que he creado?:

http://extremegamex1.gofreeserve.com...dex_1.2.6.html

Espero una pronta respuesta.

[tredio]

lo puedes hacer exactamente como pusiste el fondo a los elementos de la lista, al div que ya tienes envolviendo la lista colocale una clase y con css le das el tamaño que necesitas y le pones el fondo que mostraste.

[ambigus]

Hola quiero mostrar mis progresos, gracias a todos:

http://extremegamex1.gofreeserve.com...dex_1.2.8.html



Ahora mi duda es que: Cuando cambio el tamaño de la ventana de mi navegador: Firefox 4.0.1, se destruye todo XD. El menú, todo, se cambian de posición como que se adapta al tamaño de la ventana, y lo que yo quiero es que se queden como estan sin importar el hecho de que yo modifique la ventana de mi navegador. Porque con el IE abro la ventana totalmente y es lo mismo.

¿Cómo corrijo ese error?,

Tengo la leve ilusión de que es con un comando llamado Static, o algo así.

Espero una pronta respuesta.

[tredio]

no le pusiste ancho al div que tiene el fondo, ponselo y no tendras problemas con eso

[ambigus]

Gracias tredio, he logrado configuar todo de forma que no se modifique con el tamaño de la ventana del navegador :)

http://extremegamex1.gofreeserve.com...dex_1.2.9.html

Ahora bien, quisiera saber:

¿Cómo alineo el menú que he hecho con el bacground?, Si te fijas detalladamente el menú está ligeramente corrido hacia la izquierda y no es equitativa la distribuición.

¿Es posible alinearlo?, y ¿Es posible también alienar el DIV que contiene a todos estos datos: El menú la imagen, con el centro de la pantalla?

Espero una pronta respuesta.