ayuda para centrar backgrouns horizontalmente

chuntin · #1 (**permalink**) 19/01/2011, 03:19

hola buenas, mi problema es que tengo una capa con un background puesto en css en .interior y ahora sobre este fondo (que es una imagen), tengo otras imagenes como fondo en .interior .principal li . estas imagenes son botones y quiero que el conjunto de los botones me quede centrado en la capa. pongo imagen para ilustrar y codigo para que veais como lo tengo.

Código HTML:

.interior .principal{
	height:33px;
	margin: 0px;
	padding: 0px;
}
.interior .principal li{
	margin: 0px;
	padding: 0px;
	float:left;
	list-style-type: none;
	position:relative;
	height:33;
}
.interior .principal li a{
	display: block;
	display:inherit;
	height: 33px;
}



.interior .principal li a span{display:none;}
.interior .principal li a:hover{
	background-position: 0px -33px;
}
.interior .principal li a#catalogo{
	background-image: url(theme/menu/menu_01.png);
	width: 95px;
}
.interior .principal li a#novedades{
	background-image: url(theme/menu/menu_02.png);
	width: 107px;
}
.interior .principal li a#ofertas{
	background-image: url(theme/menu/menu_03.png);
	width: 107px;
}
.interior .principal li a#mi_cuenta{
	background-image: url(theme/menu/menu_04.png);
	width: 107px;
}
.interior .principal li a#registrarse{
	background-image: url(theme/menu/menu_05.png);
	width: 107px;
}
.interior .principal li a#empresa{
	background-image: url(theme/menu/menu_06.png);
	width: 150px;
}
.interior .principal li a#informacion{
	background-image: url(theme/menu/menu_07.png);
	width: 117px;
}
/*.interior .principal li a#blog{
	background-image: url(theme/menu/menu_08.png);
	width: 101px;
}*/
.interior .principal li a#contactar{
	background-image: url(theme/menu/menu_09.png);
	width: 105px;
}

Gracias por su ayuda de antemano

sanxuan · #2 (**permalink**) 19/01/2011, 09:19

El CSS sólo no explica gran cosa. Deberías incluir al menos el HTML correspondiente a esas propiedades. Mejor aún si fuese un enlace a tu página una vez subida a algún sitio.

La solución es sencilla. Sólo hay dos tipos de elementos (básicamente) en línea y de bloque y para cada uno de ellos hay un método de centrado horizontal: text-align:center o margin:0 auto respectivamente.
Sin ver el código HTML es imposible saber si la clase .interior se aplica a un elemento en línea o de bloque.

PrendekZ · #3 (**permalink**) 19/01/2011, 09:26

Cita:

Iniciado por sanxuan

El CSS sólo no explica gran cosa. Deberías incluir al menos el HTML correspondiente a esas propiedades. Mejor aún si fuese un enlace a tu página una vez subida a algún sitio.

La solución es sencilla. Sólo hay dos tipos de elementos (básicamente) en línea y de bloque y para cada uno de ellos hay un método de centrado horizontal: text-align:center o margin:0 auto respectivamente.
Sin ver el código HTML es imposible saber si la clase .interior se aplica a un elemento en línea o de bloque.

Creo que esta pidiendo Centrado De Background horizontal. Aquí tienes la solución:

Cita:

background-position:center 0;

el segundo valor en este caso "0" es el eje Y por lo tanto si quieres centrar verticalmente conviertelo así:

Cita:

background-position:center center;

Cualquier duda que tengas puedes publicarla

Saludos!

chuntin · #4 (**permalink**) 19/01/2011, 10:12

la pagina es esta: http://www.angelpardos.com/pepetoner/

tengo que centrar un conjunto de backgrounds que estan sobre otro background. voy a buscar e html a ver si lo encuentro pero hasta la noche no puedo. supongo que sera centrado en bloque

chuntin · #5 (**permalink**) 19/01/2011, 11:06

Código PHP:

 
<div class="interior"> 
    <ul class="principal"> 
        <li><a href="index.php" id="catalogo"><span>catalogo</span></a></li> 
        <li><a href="products_new.php" id="novedades"><span>novedades</span></a></li> 
        <li><a href="specials.php" id="ofertas"><span>ofertas</span></a></li> 
        <li><a href="account.php" id="mi_cuenta"><span>mi cuenta</span></a></li> 
        <li><a href="create_account.php" id="registrarse"><span>registrarse</span></a></li> 
        <li><a href="javascript:;" id="empresa"><span>nuestra empresa</span></a> 
            <?php  
                $information_query = tep_db_query("SELECT information_id, information_title, parent_id FROM " . TABLE_INFORMATION . " WHERE visible='1' and columna=1 and language_id='" . (int)$languages_id ."' and information_group_id = '1' and information_id<>0 ORDER BY sort_order"); 
                echo '<ul class="submenu">'; 
                while($information = tep_db_fetch_array($information_query)) { 
                    echo '<li><a href="' . tep_href_link(FILENAME_INFORMATION, 'info_id=' . $information['information_id']) . '">' . $information['information_title'] . '</a></li>' . "\n"; 
                } 
                echo '</ul>';

aqui os pongo la parte de codigo que referencia a ese punto que ya la he encontrado

chuntin · #6 (**permalink**) 20/01/2011, 01:12

nadie sabe como solucionarlo???

gracias de nuevo

C2am · #7 (**permalink**) 20/01/2011, 03:34

Si tienes un ancho fijo de página, porque no vas dandole un margen a:
.interior .principal{
height:33px;
margin: 0px; --> margin: 0 60px; (cuando es 0 no hace falta poner px)
padding: 0px;
}
Hasta mas o menos centrar esos botones.
Saludos
No es la mejor respuesta pero creo que funciona.

En esta página tienes la respuesta correcta, no me acordaba donde la había visto.
http://www.araudi.net/ejemplos/menu_centrado.html

chuntin · #8 (**permalink**) 20/01/2011, 03:43

ok, muchas gracias.

ahora tengo otro problema, en el boton nuestra empresa y en el boton informacion se me deberia abrir un desplegable echo con java/script pero se ve una linea como que quiere abrirse pero no hace nada mas.

el codigo css es este:

.principal ul.submenu{
margin: 0px!important;
padding: 0px!important;
position:absolute!important;
top:33px!important;
right:0px!important;
left:0px!important;
background-color: #000!important;
border-right-width: 1px!important;
border-bottom-width: 1px!important;
border-left-width: 1px!important;
border-right-style: solid!important;
border-bottom-style: solid!important;
border-left-style: solid!important;
border-right-color: #000!important;
border-bottom-color: #000!important;
border-left-color: #000!important;
z-index:1000!important;
display:none;
border-top-style: none!important;
overflow:hidden;
height:auto!important;
}

chuntin · #9 (**permalink**) 20/01/2011, 03:46

y el php-html aqui:

Código PHP:

 
<li><a href="javascript:;" id="empresa"><span>nuestra empresa</span></a> 
            <?php  
                $information_query = tep_db_query("SELECT information_id, information_title, parent_id FROM " . TABLE_INFORMATION . " WHERE visible='1' and columna=1 and language_id='" . (int)$languages_id ."' and information_group_id = '1' and information_id<>0 ORDER BY sort_order"); 
                echo '<ul class="submenu">'; 
                while($information = tep_db_fetch_array($information_query)) { 
                    echo '<li><a href="' . tep_href_link(FILENAME_INFORMATION, 'info_id=' . $information['information_id']) . '">' . $information['information_title'] . '</a></li>' . "\n"; 
                } 
                echo '</ul>'; 
            ?>                      
        </li> 
        <li><a href="javascript:;" id="informacion"><span>informacion</span></a> 
            <?php  
                $information_query = tep_db_query("SELECT information_id, information_title, parent_id FROM " . TABLE_INFORMATION . " WHERE visible='1' and columna=2 and language_id='" . (int)$languages_id ."' and information_group_id = '1' and information_id<>0 ORDER BY sort_order"); 
                echo '<ul class="submenu">'; 
                while($information = tep_db_fetch_array($information_query)) { 
                    echo '<li><a href="' . tep_href_link(FILENAME_INFORMATION, 'info_id=' . $information['information_id']) . '">' . $information['information_title'] . '</a></li>' . "\n"; 
                } 
                echo '</ul>'; 
            ?>              
        </li>

C2am · #10 (**permalink**) 20/01/2011, 03:51

Con javascript no te puedo ayudar, pero si lo quieres hacer solo con css y html en la página que te puse antes tienes varios ejemplos, sería cuestión de adaptarlos nada más.
www.araudi.net
Saludos y suerte

chuntin · #11 (**permalink**) 20/01/2011, 04:03

gracias de todas formas pero ahi se centra porque es texto. lo mio son imagenes o fondos realmente.

a ver si alguien me hecha una mano aunque creo que esto es mas de css que de otra cosa. nose

chuntin · #12 (**permalink**) 20/01/2011, 11:37

nadie ve algo en el codigo??? esque me estoy volviendo ya loco