Atuyuda a Crear menu horizontal

arkang31 · #1 (**permalink**) 08/04/2009, 16:11

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

willyfc · #2 (**permalink**) 08/04/2009, 16:43

Cita:

Iniciado por arkang31

(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.

arkang31 · #3 (**permalink**) 08/04/2009, 17:35

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

willyfc · #4 (**permalink**) 08/04/2009, 17:57

pues mira esto, espero que te ayude a guiarte:

Código html:

Ver original<!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>foro</title>
<style type="text/css">
#menu{width:900px; height:58px; margin:0 auto;}
#izq{width:33px; height:58px; float:left;background:#000 url(../images/menu-l.png);}
#der{width:33px; height:58px; float:right;background:#000 url(../images/menu-r.png);}
#centro{width:834px; height:58px; float:left;background:#000 url(../images/menu-c.png); text-align:center; color:#fff}
#centro ul{list-style:none; margin:15px 0 0 0; padding:0;}
#centro ul li{display:inline; margin:0 6px 0 6px}
</style>
</head>
 
<body>
<div id="menu">
    <div id="izq"></div>
    <div id="centro">
        <ul>
            <li>menu 1</li>
            <li>menu 2</li>
            <li>menu 3</li>
            <li>menu 4</li>
        </ul>
    </div>
    <div id="der"></div>
</div>
</body>
</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

arkang31 · #5 (**permalink**) 08/04/2009, 18:18

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?

willyfc · #6 (**permalink**) 08/04/2009, 18:23

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