Foros del Web » Creando para Internet » CSS »

ayuda para centrar backgrouns horizontalmente

Estas en el tema de ayuda para centrar backgrouns horizontalmente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/01/2011, 03:19
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
ayuda para centrar backgrouns horizontalmente

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
  #2 (permalink)  
Antiguo 19/01/2011, 09:19
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: ayuda para centrar backgrouns horizontalmente

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.
  #3 (permalink)  
Antiguo 19/01/2011, 09:26
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: ayuda para centrar backgrouns horizontalmente

Cita:
Iniciado por sanxuan Ver Mensaje
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!
  #4 (permalink)  
Antiguo 19/01/2011, 10:12
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: ayuda para centrar backgrouns horizontalmente

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
  #5 (permalink)  
Antiguo 19/01/2011, 11:06
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: ayuda para centrar backgrouns horizontalmente

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
  #6 (permalink)  
Antiguo 20/01/2011, 01:12
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: ayuda para centrar backgrouns horizontalmente

nadie sabe como solucionarlo???

gracias de nuevo
  #7 (permalink)  
Antiguo 20/01/2011, 03:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: ayuda para centrar backgrouns horizontalmente

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 20/01/2011 a las 03:41 Razón: Link a respuesta
  #8 (permalink)  
Antiguo 20/01/2011, 03:43
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: ayuda para centrar backgrouns horizontalmente

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;
}
  #9 (permalink)  
Antiguo 20/01/2011, 03:46
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: ayuda para centrar backgrouns horizontalmente

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>
  #10 (permalink)  
Antiguo 20/01/2011, 03:51
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: ayuda para centrar backgrouns horizontalmente

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #11 (permalink)  
Antiguo 20/01/2011, 04:03
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: ayuda para centrar backgrouns horizontalmente

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
  #12 (permalink)  
Antiguo 20/01/2011, 11:37
 
Fecha de Ingreso: abril-2006
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: ayuda para centrar backgrouns horizontalmente

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

Etiquetas: horizontalmente
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 06:00.