Foros del Web » Creando para Internet » CSS »

Centrar pestañas en menú horizontal

 Estas en el tema de Centrar pestañas en menú horizontal en el foro de CSS en Foros del Web. Hola a tod@s, he instalado un módulo prediseñado de menú horizontal desplegable en un sistema de tienda online. Estoy intentando por activa y por pasiva ...
  #1 (permalink)  
Antiguo 07/08/2010, 06:04
Avatar de Aldearan  
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 0
[Solucionado] Centrar pestañas en menú horizontal
Hola a tod@s, he instalado un módulo prediseñado de menú horizontal desplegable en un sistema de tienda online.

Estoy intentando por activa y por pasiva centrar las pestañas (independientemente de que haya más o menos), como en la segunda imagen deseada, pero me resulta imposible.



Os dejo el contenido de los archivos por si alguien puede ayudarme, gracias de antemano.

menu.tpl

Código PHP:
        {if $MENU != ''}
        </div>
                <!-- Menu -->
        <div class="sf-contener">
          <ul class="sf-menu">
            {$MENU}
            {if $MENU_SEARCH}
            <li class="sf-search noBack" style="float:right">
              <form id="searchbox" action="search.php" method="get">
                <input type="hidden" value="position" name="orderby"/>
                <input type="hidden" value="desc" name="orderway"/>
                <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" />
              </form>
            </li>
            {/if}
          </ul>
        <div class="sf-right">&nbsp;</div>
        <script type="text/javascript" src="{$this_path}js/hoverIntent.js"></script>
        <script type="text/javascript" src="{$this_path}js/superfish-modified.js"></script>
        <link rel="stylesheet" type="text/css" href="{$this_path}css/superfish-modified.css" media="screen">
                <!--/ Menu -->
        {/if} 
menu.css

Código PHP:
/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
  padding-left: 7px;
  background: transparent url(../img/blocktopmenu_left.gif) no-repeat left center;
}
.sf-right {
  margin-right: 0.5px;
  float: right;
  width: 7px;
  background: transparent url(../img/blocktopmenu_right.gif) no-repeat right center;
}
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.sf-menu {
  float: left;
font-weight:bold;
  width: 965.5px;
    line-height:    1.2;
    background: transparent url(../img/blocktopmenu.gif) repeat-x;
}
.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:            100%;
}
.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            2.7em; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}

/*** DEMO SKIN ***/
.sf-menu {
    float:            left;
    margin-bottom:    1em;
}
.sf-menu a {
  border: 0;
/*    border-left:    1px solid #fff;
    border-top:        1px solid #CFDEFF; */
    padding:         .75em 1em;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:            #374853;
}
.sf-menu li li {
    background:        #ebebed;/*#AABDE6;*/
}
.sf-menu li li li {
    background:        #ebebed;/*#9AAEDB;*/
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHoverForce,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: transparent url(../img/blocktopmenu_hover.gif) repeat-x;
}
.sf-menu li.noBack:hover, .sf-menu li.sfHover.noBack, .sf-menu li.sfHoverForce.noBack,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: inherit;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
    background:        #d0d3d8;
    outline:        0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
    padding-right:     2.25em;
    min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position:        absolute;
    display:        block;
    right:            .75em;
    top:            1.05em; /* IE6 only */
    width:            10px;
    height:            10px;
    text-indent:     -999em;
    overflow:        hidden;
    background:        url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:            .8em;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
    background:    url('../img/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}
li.sf-search {
  background: inherit;
  float: right;
  line-height: 25px;
}
li.sf-search input {
  -moz-border-radius: 0 5px 5px 0;
  padding: 3px 0;
  padding-left: 20px;
  margin-top: 4px;
  background: #fff url(../img/search.gif) no-repeat left center;
} 
Un saludo.
Última edición por Aldearan; 12/08/2010 a las 08:44 Razón: Añadir "Solucionado" al título.
  #2 (permalink)  
Antiguo 07/08/2010, 20:41
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Centrar pestañas en menú horizontal
En realidad no entendí bien tu pregunta. Pero yo cuando hago menús desplegables (que por cierto son muy engorrosos) uso una herramienta prefabricada JavaScript/CSS que se llama JSCookMenu para hacer esto fácil.

http://jscook.yuanheng.org/JSCookMenu/

Espero te sirva.
  #3 (permalink)  
Antiguo 08/08/2010, 05:09
 
Fecha de Ingreso: agosto-2010
Mensajes: 28
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Hola aldearan. No pierdas el tiempo buscando que de alguna manera puedas hacerlo solo con css. Yo te recomendaria que usaras jquery para los menus desplegables.

.css:
Código CSS: 
Ver original
  1. #div-oculto-a-mostrar{
  2.     display:none;
  3. }

html:

Código HTML: 
Ver original
  1. <div id="div-al-pasar-cursor" class"tu-clase">Titulo</div>
  2. <div class="div-oculto-a-mostrar">Texto a mostrar al pasar el cursos</div>
Jquery

Código Javascript: 
Ver original
  1. $('#div-al-pasar-cursor').focus(function(){
  2.        $('div-oculto-a-mostrar').show(1000);
  3. });
  4. $('#div-al-pasar-cursor').blur(function(){
  5.        $('div-oculto-a-mostrar').hide(1000);
  6. });
  #4 (permalink)  
Antiguo 09/08/2010, 10:25
Avatar de Aldearan  
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Hola, gracias por las respuestas y sugerencias, pero necesito centrar el UL de la barra, es un módulo que se gestiona fácilmente desde una interfaz gráfica en el panel de control de la tienda, así no hay que tocar el código cada vez que se cambia el contenido, la amiga a la que estoy ayudando se ha empeñado en que quiere que aparezca centrado.

Un saludo.
  #5 (permalink)  
Antiguo 09/08/2010, 11:07
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 15 años, 4 meses
Puntos: 66
Respuesta: Centrar pestañas en menú horizontal
Código CSS: 
Ver original
  1. .sf-menu{ margin:0 auto;}
  #6 (permalink)  
Antiguo 09/08/2010, 11:24
Avatar de Aldearan  
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Cita:
Iniciado por tredio Ver Mensaje
Código CSS: 
Ver original
  1. .sf-menu{ margin:0 auto;}
Hola Tredio, he añadido la línea de código a ".sf-menu", pero nada, no se centra.

Gracias.
  #7 (permalink)  
Antiguo 10/08/2010, 14:45
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 15 años, 4 meses
Puntos: 66
Respuesta: Centrar pestañas en menú horizontal
es raro, ese css sirve para centrar elementos horizontalmente, pon el código de como te quedo para ver que puede ser.
  #8 (permalink)  
Antiguo 11/08/2010, 04:10
Avatar de Aldearan  
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Hola Tredio, con tu sugerencia el código quedaría tal que así.

Código PHP:
/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
  padding-left: 7px;
  background: transparent url(../img/blocktopmenu_left.gif) no-repeat left center;
}
.sf-right {
  margin-right: 0.5px;
  float: right;
  width: 7px;
  background: transparent url(../img/blocktopmenu_right.gif) no-repeat right center;
}
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.sf-menu {
    float: left;
    font-weight:bold;
    width: 965.5px;
    line-height:    1.2;
    background: transparent url(../img/blocktopmenu.gif) repeat-x;
    margin:0 auto;
}

.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:            100%;
}
.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            2.7em; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}

/*** DEMO SKIN ***/
.sf-menu {
    float:            left;
    margin-bottom:    1em;
}
.sf-menu a {
  border: 0;
/*    border-left:    1px solid #fff;
    border-top:        1px solid #CFDEFF; */
    padding:         .75em 1em;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:            #374853;
}
.sf-menu li li {
    background:        #ebebed;/*#AABDE6;*/
}
.sf-menu li li li {
    background:        #ebebed;/*#9AAEDB;*/
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHoverForce,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: transparent url(../img/blocktopmenu_hover.gif) repeat-x;
}
.sf-menu li.noBack:hover, .sf-menu li.sfHover.noBack, .sf-menu li.sfHoverForce.noBack,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: inherit;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
    background:        #d0d3d8;
    outline:        0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
    padding-right:     2.25em;
    min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position:        absolute;
    display:        block;
    right:            .75em;
    top:            1.05em; /* IE6 only */
    width:            10px;
    height:            10px;
    text-indent:     -999em;
    overflow:        hidden;
    background:        url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:            .8em;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
    background:    url('../img/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}
li.sf-search {
  background: inherit;
  float: right;
  line-height: 25px;
}
li.sf-search input {
  -moz-border-radius: 0 5px 5px 0;
  padding: 3px 0;
  padding-left: 20px;
  margin-top: 4px;
  background: #fff url(../img/search.gif) no-repeat left center;
} 
Este seguiría siendo el resultado.



Un saludo.
  #9 (permalink)  
Antiguo 11/08/2010, 05:57
Avatar de xhiena  
Fecha de Ingreso: enero-2008
Ubicación: Valencia
Mensajes: 34
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
.sf-contener {
text-align:center;
}

.sf-menu{
margin:auto;
}

y quitale al .sf-menu el float: left;


Podrias poner alguna página donde estuviera el menu ese?

De todas formas, tienes muchas cosas en absolute.. para centrar y que quede bien se debe hacer todo en relative (ya que es relativo al ancho de la página).
Última edición por xhiena; 11/08/2010 a las 05:59 Razón: añadir observaciones
  #10 (permalink)  
Antiguo 11/08/2010, 09:32
Avatar de Aldearan  
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Hola Xhiena, aplicando esos cambios....

Código PHP:
/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  margin: 10px 0;
  text-align:center;
  height: 30px;
  line-height: 30px;
  padding-left: 7px;
  background: transparent url(../img/blocktopmenu_left.gif) no-repeat left center;
}
.sf-right {
  margin-right: 0.5px;
  float: right;
  width: 7px;
  background: transparent url(../img/blocktopmenu_right.gif) no-repeat right center;
}
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.sf-menu {
    font-weight:bold;
    width: 965.5px;
    line-height:    1.2;
    background: transparent url(../img/blocktopmenu.gif) repeat-x;
    margin:auto;
}

.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:            100%;
}
.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            2.7em; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}

/*** DEMO SKIN ***/
.sf-menu {
    float:            left;
    margin-bottom:    1em;
}
.sf-menu a {
  border: 0;
/*    border-left:    1px solid #fff;
    border-top:        1px solid #CFDEFF; */
    padding:         .75em 1em;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:            #374853;
}
.sf-menu li li {
    background:        #ebebed;/*#AABDE6;*/
}
.sf-menu li li li {
    background:        #ebebed;/*#9AAEDB;*/
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHoverForce,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: transparent url(../img/blocktopmenu_hover.gif) repeat-x;
}
.sf-menu li.noBack:hover, .sf-menu li.sfHover.noBack, .sf-menu li.sfHoverForce.noBack,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: inherit;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
    background:        #d0d3d8;
    outline:        0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
    padding-right:     2.25em;
    min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position:        absolute;
    display:        block;
    right:            .75em;
    top:            1.05em; /* IE6 only */
    width:            10px;
    height:            10px;
    text-indent:     -999em;
    overflow:        hidden;
    background:        url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:            .8em;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
    background:    url('../img/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}
li.sf-search {
  background: inherit;
  float: right;
  line-height: 25px;
}
li.sf-search input {
  -moz-border-radius: 0 5px 5px 0;
  padding: 3px 0;
  padding-left: 20px;
  margin-top: 4px;
  background: #fff url(../img/search.gif) no-repeat left center;
} 
Sigue igual, no se centra.

Esta tienda usa el mismo tipo de módulo de barra horizontal:

[URL="http://www.eluniversodelperro.com/tienda/"]http://www.eluniversodelperro.com/tienda/[/URL]

Un saludo.
  #11 (permalink)  
Antiguo 11/08/2010, 15:44
 
Fecha de Ingreso: noviembre-2009
Ubicación: Monterrey
Mensajes: 37
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Para que batallas agrega un div y adentro agregas el menu ul y le das un margin:auto.
y listo!
  #12 (permalink)  
Antiguo 11/08/2010, 17:13
Avatar de Aldearan  
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Cita:
Iniciado por zeandesign
Para que batallas agrega un div y adentro agregas el menu ul y le das un margin:auto.
menu.tpl

Código PHP:
 <div class="cent"><ul class="sf-menu">
            {$MENU}
            {if $MENU_SEARCH}
            <li class="sf-search noBack" style="float:right">
              <form id="searchbox" action="search.php" method="get">
                <input type="hidden" value="position" name="orderby"/>
                <input type="hidden" value="desc" name="orderway"/>
                <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{/if}" />
              </form>
            </li>
            {/if}
          </ul></div> 
menu.css

Código PHP:
.cent {
margin:auto;
} 
Tampoco lo centra.

Un saludo.
  #13 (permalink)  
Antiguo 12/08/2010, 08:00
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: Centrar pestañas en menú horizontal
Aldearan aplica text-align:center al UL del menu, quita el float:left a los LI y en su lugar pon display:inline-block; y ya
__________________
Toroflix - movies.
  #14 (permalink)  
Antiguo 12/08/2010, 08:11
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Centrar pestañas en menú horizontal
Creo que están confundiendo el centrar una caja respecto a su contenedor con alinear al centro el contenido de un elemento.
Cita:
Iniciado por waobockdiee Ver Mensaje
Hola aldearan. No pierdas el tiempo buscando que de alguna manera puedas hacerlo solo con css. Yo te recomendaria que usaras jquery para los menus desplegables.
El que algo se desconozca no significa que no se pueda, así que su aseveración es tan rotunda como inexacta.

Si no he comprendido mal, más por la imagen de #1 que por la lectura de todo lo publicado, creo que la solución que busca puede ser el ejemplo "Alineación Simultánea, centrando Cajas "al centro"
Como verá si juega un poco con ese código, los <div class="hijo"> aparecen centrados en su contenedor <div class="padre"> con independencia del nº de ellos.
Deberá adaptarlo a sus intereses, y convertir las cajas (div´s) en una lista (ul/li/a)
  #15 (permalink)  
Antiguo 12/08/2010, 08:43
Avatar de Aldearan  
Fecha de Ingreso: agosto-2010
Mensajes: 7
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Centrar pestañas en menú horizontal
Cita:
Iniciado por alexk Ver Mensaje
Aldearan aplica text-align:center al UL del menu, quita el float:left a los LI y en su lugar pon display:inline-block; y ya
menu.css

Código PHP:
.sf-menu {
    text-align:center;
    font-weight:bold;
    width: 965.5px;
    line-height:1.2;
    background: transparent url(../img/blocktopmenu.gif) repeat-x;
    margin:0 auto;
}

.sf-menu li {
    display:inline-block;
    position:relative;
} 
¡¡Centrado!!

Funciona perfectamente, testeado con Opera, Firefox e Internet Explorer.

Gracias a todos por vuestra desinteresada ayuda, en especial a alexk por la solución definitiva.

Un saludo.

Etiquetas: horizontal, pestañas
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:06.