Foros del Web » Creando para Internet » CSS »

Atuyuda a Crear menu horizontal

Estas en el tema de Atuyuda a Crear menu horizontal en el foro de CSS en Foros del Web. buenas muchachos vengo con esta duda me traen locos los menus de un dia hacia aka bueno mi idea es hacer algo paresido a esto: ...
  #1 (permalink)  
Antiguo 08/04/2009, 17:11
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 4
Atuyuda a Crear menu horizontal

buenas muchachos vengo con esta duda me traen locos los menus de un dia hacia aka bueno mi idea es hacer algo paresido a esto: (no copio el codigo por que son mis diseños y estan en psd :S)




algo asi el resultado final






con esas imagenes e tratado de contruirlas pero uhh con div me sale pero me queda un gran espacio de un lado y con tabla me queda una dicion en el midio de cada uno espero que me puedan orientar o mostrar la forma mas prctica de aserla gracias
  #2 (permalink)  
Antiguo 08/04/2009, 17:43
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: Atuyuda a Crear menu horizontal

Cita:
Iniciado por arkang31 Ver Mensaje
(no copio el codigo por que son mis diseños y estan en psd :S)
pues compañero le diré que tendrá que poner su código para ver los errores, ahora como va la cosa te paso un vínculo para que veas como se hacen.
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 08/04/2009, 18:35
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 4
Respuesta: Atuyuda a Crear menu horizontal

Código:
#user-menu {
	width:900px;
	height:58px;
	z-index:3;
	margin: auto;
}

#user-menu li {
	color:#FFFFFF;
	text-decoration:none;
	float: left;
	list-style-type: none;
	margin-right: 6px;
	margin-left: 6px;
	font-size: 16px;
	font-weight: bold;
	margin-top: 2px;
}
#user-menu a {
	color:#FFFFFF;
	text-decoration:none;
	float: left;
	list-style-type: none;
	margin-right: 10px;
	margin-left: 10px;
}
#user-menu a:hover {
	color:#333333;
	text-decoration:none;
	float: left;
	list-style-type: none;
	margin-right: 10px;
	margin-left: 10px;
}
#user-menu-l {
	background-image: url(../images/menu-l.png);
	background-repeat: no-repeat;
	float: left;
	height: 58px;
	width: 33px;
	position: relative;
	z-index: 10;
}
#user-menu-r {
	background-image: url(../images/menu-r.png);
	background-repeat: no-repeat;
	height: 58px;
	width: 33px;
	float: right;
	position: relative;
	z-index: 11;
}
#user-menu-c {
	background-image: url(../images/menu-c.png);
	background-repeat: repeat-x;
	height: 58px;
	position: relative;
	z-index: 8;
	width: auto;
}
Código:
<div id="user-menu">
<div id="user-menu-l"></div>
<div id="user-menu-r"></div>
<?php if($this->countModules('user3')) : ?>
<div id="user-menu-c"><jdoc:include type="modules" name="user3" style="horz" /></div>
<?php endif; ?>
</div>
bueno algo mas omenos asi pues quiero que se quede en el centro y amedida que amenten sus enlanses se expanda hacia los lados con un maximo de 900px si me ayudan :S
  #4 (permalink)  
Antiguo 08/04/2009, 18:57
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: Atuyuda a Crear menu horizontal

pues mira esto, espero que te ayude a guiarte:
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>foro</title>
  5. <style type="text/css">
  6. #menu{width:900px; height:58px; margin:0 auto;}
  7. #izq{width:33px; height:58px; float:left;background:#000 url(../images/menu-l.png);}
  8. #der{width:33px; height:58px; float:right;background:#000 url(../images/menu-r.png);}
  9. #centro{width:834px; height:58px; float:left;background:#000 url(../images/menu-c.png); text-align:center; color:#fff}
  10. #centro ul{list-style:none; margin:15px 0 0 0; padding:0;}
  11. #centro ul li{display:inline; margin:0 6px 0 6px}
  12. </head>
  13.  
  14. <div id="menu">
  15.     <div id="izq"></div>
  16.     <div id="centro">
  17.         <ul>
  18.             <li>menu 1</li>
  19.             <li>menu 2</li>
  20.             <li>menu 3</li>
  21.             <li>menu 4</li>
  22.         </ul>
  23.     </div>
  24.     <div id="der"></div>
  25. </div>
  26. </body>
  27. </html>

ahora, tal vez cree algún conflicto la clase que estas utilizando style="horz" en user-menu-c que no la veo declarada en tu css
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 08/04/2009, 19:18
 
Fecha de Ingreso: septiembre-2008
Mensajes: 101
Antigüedad: 9 años, 2 meses
Puntos: 4
Respuesta: Atuyuda a Crear menu horizontal

pues me sirvio pues ese estylo solo hace que carge de modo horizontal no tiene nada que ver en pocas palabras y como se hace para poner la imagen de divicion entre las opciones?
  #6 (permalink)  
Antiguo 08/04/2009, 19:23
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: Atuyuda a Crear menu horizontal

Código:
#centro ul li{display:inline; margin:0 6px 0 6px; background:url(img/barra.jpg) right no-repeat; padding:0 10px 0 10px;}
pues podrías colocarlas así, aumentando esas lineas al código que te pase, ahí coloque una imagen de 3px por 50px
__________________
WFC
codigo82
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 22:21.