Foros del Web » Creando para Internet » CSS »

imagen en menu horizontal

Estas en el tema de imagen en menu horizontal en el foro de CSS en Foros del Web. Es la primera vez que hago un menu con <li>, y me ha costado un mundo lograr la distancia correcta y estilos y demás para ...
  #1 (permalink)  
Antiguo 27/04/2009, 15:03
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Exclamación imagen en menu horizontal

Es la primera vez que hago un menu con <li>, y me ha costado un mundo lograr la distancia correcta y estilos y demás para que parezca un menu, ahora, he tratado de insertarle una imágen ( que quiero ponerle un hover tambien) y no he logrado hacerlo. Segui los pasos de libros.es de css pero no se muestra mi imágen, y una vez que si la saque, se veia el texto muy abajo. En esta página pueden ver el resultado:

http://sichemsdachurch.org/test/
y asi quiero que me quede:
http://sichemsdachurch.org/

mi código va así:
Código css:
Ver original
  1. ul {
  2. margin:34px 0 0 0;
  3. padding-left: 1.5em;
  4.  
  5. }
  6. ul.menu li , a:link , a:visited{   
  7.     width:100px;
  8.     float: left;
  9.     font-weight:bold;
  10.     font-size:12px;
  11.     font-family:Tahoma, Arial, "Headache";
  12.     display:block;
  13.     height:25px;
  14.     list-style-image:url(../images/dot-normal.jpg);
  15.     text-decoration: none;
  16.     color:#fff;    
  17. }
mi html
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=utf-8" />
<link rel="stylesheet" href="css/div-style.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<!--[if IE]>--> <link href="css/styles-ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<title>Untitled Document</title>
</head>
<body>
<div id="container">
  <div id="header"> <img src="images/logo-index.gif" alt="Logotype" id="logotype" height="82" />
    	<p class="church-title" style="display:inline">Sichem SDA Church, Inc.</p>
   	 <br />
   	 <span class="slogan">Everybody is Somebody at Sichem</span>
   	 <ul class="menu">
      <li ><a href="#" title="Home Page">Home</a></li>
      <li><a href="#" title="Home Page">About us</a></li>
      <li><a href="#" title="Home Page"> Mission</a></li>
      <li> <a href="#" title="Home Page">Donations</a></li>
      <li><a href="#" title="Home Page">Contact us</a></li>
   	 </ul><br /><br /><br />
   	 <img src="images/head-img.jpg" id="header-img" alt="Header" />
  </div>
  <div id="content">
  
  </div>  
    
    
</div>
</body>
</html> 
la imagen de la iz tiene un float right, por aquello de que afecte.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr

Última edición por gVenom; 28/04/2009 a las 08:45 Razón: no puse el html
  #2 (permalink)  
Antiguo 27/04/2009, 17:59
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: imagen en menu horizontal

no colocaste tu código html, pero bueno si no entiendo mal mira este ejemplo a ver si es lo que quieres lograr

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. .menu{width:100%; text-align:center; background-color:#CCC;}
  7. .menu ul{list-style:none}
  8. .menu ul li{display:inline; padding:5px 5px; }
  9. .menu a{ padding:10px; color:#000; text-decoration:none;background:url(imagenes/dot-normal.gif) no-repeat left 17px;}
  10. .menu a:hover,.menu a:focus,.menu a:active{ padding:10px; color:#000; text-decoration:underline;background:url(imagenes/dot-anormal.gif/*imagen de remplazo*/) no-repeat left 17px;}
  11.  
  12. </head>
  13.  
  14. <div class="menu">
  15.     <ul>
  16.         <li><a href="#">menu 1</a></li>
  17.         <li><a href="#">menu 2</a></li>
  18.         <li><a href="#">menu 3</a></li>
  19.     </ul>
  20. </div>
  21. </body>
  22. </html>
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 28/04/2009, 08:47
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: imagen en menu horizontal

Hola WillyFC, ya edite el msj y puse mi html, sorry no me di cuenta. Voy a probar el código que me pasas a ver como me va.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 28/04/2009, 10:13
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: imagen en menu horizontal

WillyFC pues fijate que lo he usado y quedo casi bien. Trate de arreglarlo y mas bien casi lo desarmo asi que mejor lo deje como lo pusiste.
Trate de correrle el texto a la derecha pero se me iba para abajo o se quedaba arriba, no logre centrarlo.

http://sichemsdachurch.org/test/

Código css:
Ver original
  1. .menu{width:100&#37;; text-align:center;}
  2. .menu ul{list-style:none}
  3. .menu ul li{display:inline; padding:5px 5px;}
  4. .menu a{ padding:10px; color:#000; text-decoration:none;background:url(../images/dot-normal.jpg) no-repeat left 17px;}
  5. .menu a:hover,.menu a:focus,.menu a:active{ padding:10px; color:#000; text-decoration:underline;background:url(../images/dot-over.jpg) no-repeat left 17px;}
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 28/04/2009, 10:41
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: imagen en menu horizontal

lo que pasa es que la imagen con la que pruebas es mucho más grande que con la que yo probé hacerlo, solo tendrías que mover el valor del barckground, pero bueno, a ver pasame las medidas de tu imagen y el font-size del texto y a ver que podemos hacer.
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 28/04/2009, 10:48
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: imagen en menu horizontal

Gracias, la imágen va asi:
Código HTML:
width="29" height="30"
y el css así:
Código css:
Ver original
  1. .menu{width:100%; text-align:center;}
  2. .menu ul{list-style:none;}
  3. .menu ul li{display:inline; padding:5px 10px;}
  4. .menu a{ padding:10px; color:#fff; text-decoration:none;background:url(../images/dot-normal.jpg) no-repeat left 17px; top 10px}
  5. .menu a:hover,.menu a:focus,.menu a:active{ padding:10px; color:#000; text-decoration:underline;background:url(../images/dot-over.jpg) no-repeat left 17px;}
  6. li{font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}

y el html:
Código HTML:
<body>

<div id="container">
  <div id="header"> <img src="images/logo-index.gif" alt="Logotype" id="logotype" height="82" width="231" />
    	<p class="church-title" style="display:inline">Sichem SDA Church, Inc.</p>
   	 <br />
   	 <span class="slogan">Everybody is Somebody at Sichem</span>
     <div class="menu">
   	 <ul>
      <li ><a href="index.html" title="Home Page">Home</a></li>
      <li><a href="#" title="Home Page">About us</a></li>
      <li><a href="#" title="Home Page"> Mission</a></li>
      <li> <a href="#" title="Home Page">Donations</a></li>
      <li><a href="#" title="Home Page">Contact us</a></li>
   	 </ul>
     </div>
     <img src="images/head-img.jpg" id="header-img" alt="Header" />
 <br /><br /><br />
  </div>
  <div id="content">

  </div>  
</div>
</body> 
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 28/04/2009, 11:52
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: imagen en menu horizontal

mira, de momento lo que se me ocurre es esto, a ver si te sirve, utilize una imagen del tamñao de la tuya:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. body{background-color:#990000;}
  7. .menu{width:100%; text-align:center;}
  8. .menu ul{list-style:none}
  9. .menu ul li{display:inline; padding:5px 10px;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
  10. .menu a{padding:33px; color:#FFF; width:120px; text-decoration:none;background:url(imagenes/dot.jpg) no-repeat 0px;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
  11. .menu a:hover,.menu a:focus,.menu a:active{padding:33px; color:#000; text-decoration:underline;background:url(imagenes/dot.jpg) no-repeat 0;}
  12. </head>
  13.  
  14. <div class="menu">
  15.     <ul>
  16.         <li><a href="#">menu 1</a></li>
  17.         <li><a href="#">menu 2</a></li>
  18.         <li><a href="#">menu 3</a></li>
  19.     </ul>
  20. </div>
  21. </body>
  22. </html>

quizás debas poner algunas medidas pero no creo
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 28/04/2009, 12:01
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: imagen en menu horizontal

mmm, no se si lo hiciste asi o no, pero quedan una arriba y una abajo.http://sichemsdachurch.org/test/

Pero el texto se ve bien, talvez lo pueda acomodar yo de alguna forma,. Te agradezco tu tiempo Willy. Ahi nos vemos.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #9 (permalink)  
Antiguo 28/04/2009, 12:17
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: imagen en menu horizontal

no realmente, el problema es que yo no calcule el ancho de tu contenedor de menú, pero ahora es cuestión de medidas y no de poner más código, ya me avisarás
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 28/04/2009, 12:43
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: imagen en menu horizontal

Willy ahora si el ultimo empujon, ya casi se ve bien pero ya no pude seguir. Estuve cambiando algunos parametros, sobre todo el padding y me acerque a ponerlos bien, pero ya no se que cambiar porque si los aumento o disminuyo mas se pierde de nuevo el menu. ya se ve asi: http://sichemsdachurch.org/test/

y me quedo asi:
Código css:
Ver original
  1. .menu{width:100&#37;; text-align:center;}
  2. .menu ul{list-style:none}
  3. .menu ul li{display:inline; padding:5px 0;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
  4. .menu a{padding:21px; color:#FFF; width:120px; text-decoration:none;background:url(../images/dot-normal.jpg) no-repeat 0px;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
  5. .menu a:hover,.menu a:focus,.menu a:active{padding:20px; color:#000; text-decoration:underline;background:url(../images/dot-over.jpg) no-repeat 0;}

lo que pasa es que no entiendo donde le das la medida de separacion entre cada li. Porque aqui padding:5px 0; es lo mas que aguanta sin mandar una imagen para arriba o montar un li sobre otro.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #11 (permalink)  
Antiguo 28/04/2009, 13:25
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: imagen en menu horizontal

mira de esta forma, con esto creo que si quedará, copie tu código para ver mejor las cosas y creo que si resulta:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. body{background: #990000 url(../images/bg_01.jpg);}
  8. #container{
  9.     position:relative;
  10.     margin:0 auto;
  11.     width:770px;
  12.     height:100%;
  13. }
  14. #logotype{float:right}
  15. #navegation-menu{
  16.     position:relative;
  17.     width:540px;
  18.     }
  19. #header{
  20.     position:relative;
  21.     width:770px;
  22. }
  23. #content{
  24.     position:relative;
  25.     width:770px;
  26.     background-color:#330404;
  27. }
  28. #welcome{
  29.     position:relative;
  30.     width:435px;
  31.     background-image:url(../images/bg_welcome.jpg);
  32.     background-repeat:repeat;
  33.     text-align:justify;
  34. }
  35. /*fin primer hoja de estilo*/
  36. .church-title{
  37.     font-family: "MarlboroWide", Myriad Pro, Verdana;
  38.     font-smooth:always;
  39.     color:#fff;
  40.     font-size:18px;
  41. }
  42. .slogan{
  43.     font-family:Tahoma, Arial, "Century Schoolbook";
  44.     color:#fefefe;
  45.     font-size:9px;
  46. }
  47. .style1{font-family:"Tahoma", Arial, Century Schoolbook; font-size:11px; color:#DFCEC4}
  48. .style2{ font-family:"Verdana", Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; color:#fff; padding-bottom:50px}
  49.  
  50.  
  51. .menu{width:100%; text-align:left;}
  52. .menu ul{list-style:none; margin:20px 0 10px 0; padding:0;}
  53. .menu ul li{display:inline; padding:5px 0;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
  54. .menu a{padding:25px 10px 25px 33px; color:#FFF; width:120px; text-decoration:none;background:url(../images/dot-normal.jpg) no-repeat 0px;font-weight:bold;font-size:12px; font-family:Tahoma, Arial, "Headache";}
  55. .menu a:hover,.menu a:focus,.menu a:active{padding:25px 10px 25px 33px;  color:#000; text-decoration:underline;background:url(../images/dot-over.jpg) no-repeat 0;}
  56.  
  57. #header-img{
  58.     position:relative;
  59.     clear:both;
  60. }
  61.  
  62. #img-welcome{float:left; padding:5px 10px 5px 0;}
  63. </head>
  64. <body>
  65.  
  66. <div id="container">
  67.   <div id="header"> <img src="images/logo-index.gif" alt="Logotype" id="logotype" height="82"      width="231" />
  68.         <p class="church-title" style="display:inline">Sichem SDA Church, Inc.</p>
  69.      <br />
  70.      <span class="slogan">Everybody is Somebody at Sichem</span>
  71.      <div class="menu">
  72.      <ul>
  73.           <li ><a href="index.html" title="Home Page">Home</a></li>
  74.           <li><a href="#" title="Home Page">About us</a></li>
  75.           <li><a href="#" title="Home Page"> Mission</a></li>
  76.           <li> <a href="#" title="Home Page">Donations</a></li>
  77.           <li><a href="#" title="Home Page">Contact us</a></li>
  78.      </ul>
  79.      </div>
  80.      <img src="images/head-img.jpg" id="header-img" alt="Header" />
  81.    </div>
  82.  <div id="content">
  83.   <div id="welcome" class="style1">
  84.   <span class="style2">Bienvenue</span> <br /><br />
  85.    <img src="images/pic1.gif" id="img-welcome" alt="image 1" width="78" height="78" />
  86.   Les cieux racontent la gloire de Dieu et l’étendue manifeste l’œuvre de ses mains. Bien que ce ne soit pas des paroles, des discours ni des voix quon puisse entendre, cependant leur retentissement parvient jusquaux confins de la terre. Dans cet élan de joie, de reconnaissance, damour et de  fraternité, nous les frères et sœurs de l’église adventiste du 7eme jour de Sichem, nous unissons pour adorer, pour louer pour glorifier notre Dieu créateur et rédempteur. <br /><br />
  87.  
  88.   Dans cette église, véritable communauté fraternelle, chaque frère, sœur, ou visiteur a une valeur inestimable aux yeux de Dieu et aux yeux des dirigeants. Une place dhonneur vous est réservée, que vous soyez hommes, femmes, vieillards, jeunes ou enfants. Voilà pourquoi nous vous invitons à vous unir à nous, pour quensemble, nous puissions travailler pour notre Sauveur qui revient bientôt. Nos bras et nos cœurs sont ouverts pour vous accueillir. Bienvenue à Sichem où tout un chacun est traité en citoyen du ciel. <br /><br />
  89.   <span class="style2">Welcome</span><br>
  90.     <img src="images/pic2.gif" id="img-welcome" alt="image2" width="78" height="78" />
  91.   The skies relate the glory of God and the range shows the work of its hands.  Although these are not words, speeches or voices that one can hear, nevertheless their impact reaches until the earth confine.  In this joy momentum, of recognition, of love and of brotherhood, we, the brothers and sisters of the Adventist church of the 7th day of Sichem, we get to gather to adore, worshiping and glorifying our God creator and savior.   <br />
  92.   <br />
  93.  
  94.   In this church, true brotherly community, every brother, sister or visitor has an inestimable value to the eyes of God and to the eyes of the leaders.  A place of honor is reserved for you, whether you are a men, women, old persons, young or children.  Here why we invite to unite you to ourselves, for that together, so we could work for our God who returns soon.  Our arm and our hearts are opened to welcome you.  Welcome to Sichem where all an each is treated in sky citizen.  <br />
  95.   <br />
  96.   </div>
  97.    
  98.    
  99.  </div>  
  100. </div>
  101. </body>
  102. </html>

espero te salgan bien las cosas.

PD:coloque todos tus estilo sobre el html, estan bien separados
__________________
WFC
codigo82
  #12 (permalink)  
Antiguo 28/04/2009, 14:20
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: imagen en menu horizontal

Correcto Willy, ya los acomodaste perfectamente. Valla, no pense que llevara tanto trabajo hacer un menu asi con las imágenes, nunca lo hubiese hecho yo solo. Aveces no entiendo bien el comportamiento del padding y el margin, que aunque se supone que se que hacen, pues no me quedan bien, y acomodar los estilos así:.menu a:hover,.menu a:focus,.menu a:active tampoco es mi fuerte. Hay cosas que los libros definitivamente no te enseñan. Bueno, gracias, voy a guardar esto para un futuro, . Ahi nos vemos de nuevo.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
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 08:24.