Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Menu css y divs% centrados

Estas en el tema de Menu css y divs% centrados en el foro de CSS en Foros del Web. Estuve todo el día investigando como hacer esto pero no encontré nada del tema, les agradeceré si alguno tiene alguna propuesta viable. Necesito hacer con ...
  #1 (permalink)  
Antiguo 04/02/2013, 20:31
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 9 meses
Puntos: 2
Menu css y divs% centrados

Estuve todo el día investigando como hacer esto pero no encontré nada del tema, les agradeceré si alguno tiene alguna propuesta viable.

Necesito hacer con CSS una barra de menú, como la barra inferior de windows. Fija, sin animación.

Tengo un div contenedor de 100% ancho y 46px de alto.

ahí dentro necesito meter 3 div como se ve en la imagen, borde redondeado izquierdo, div central que no tiene ancho, ya que se va a ajustar al contenido y tendrá como background un pixel de ancho que se repite y el borde redondeado derecho.


dejé un pixel blanco entre lo que sería cada div para que se vea cada parte pero quedaría todo junto dando la sensación de una barra.

todo esto debe quedar centrado en el div contenedor.

Si tengo tamaños fijos lo puedo resolver pero si no le pongo tamaños no encuentro la manera.

Espero haberme explicado correctamente.

Desde ya muchas gracias.
  #2 (permalink)  
Antiguo 04/02/2013, 20:46
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años, 7 meses
Puntos: 155
Respuesta: Menu css y divs% centrados

...haber si esto te sirve

http://www.cristalab.com/tutoriales/...-css-c104838l/
http://www.masquewordpress.com/centr...iable-con-css/
http://www.forosdelweb.com/f53/centr...namico-886057/
  #3 (permalink)  
Antiguo 04/02/2013, 21:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Menu css y divs% centrados

Podrías usar border-radius y así sólo usar un elemento, ajustar con padding los laterales y, para centrarlo, sin mirar los enlaces que te pasaron, usar display:inline-block y centrar con text-align:center.
  #4 (permalink)  
Antiguo 04/02/2013, 21:36
 
Fecha de Ingreso: febrero-2013
Mensajes: 5
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Menu css y divs% centrados

Qué onda Juan!

Se me ocurren estas dos opciones:

Usar border-radius (como lo menciona Bonez) y aplicar el la imagen de fondo con repetición en x, en el elemento padre. Y al contenido darle un ancho de 90% y centrarlo con margin: 0 auto para dejarle espacio a los extremos, o darle un padding/margin: 5% cualquiera de los dos.

http://jsfiddle.net/mrbrownie/rLr7v/3/

La otra opción que creo que va más con lo que dices, es crear dentro del elemento padre los tres elementos, poner primero los elementos de las esquinas (los cuales nombre .lb y .rb, por left border, right border) flotandolos a sus respectivos lados, y luego agregar el contenido, el cual se acomodará en medio de estos.

http://jsfiddle.net/mrbrownie/P76W8/4/


Espero te haya servido.

Última edición por raexman; 04/02/2013 a las 21:44
  #5 (permalink)  
Antiguo 04/02/2013, 22:04
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 9 meses
Puntos: 2
Respuesta: Menu css y divs% centrados

Gracias a los tres, impresionante este foro, me quedé estudiando uno de los links que me envió "ipraetoriux" y funcionó a la perfección.
Es bastante similar a lo que proponen "Bonez" y "raexman" sólo que no utiliza el border-radius, lo probaré también, creo que puede resumir un poco el código.

Dejo aquí la liga que respondió a mi pregunta por si a alguien más le sirve.
http://www.masquewordpress.com/centrar-menu-con-ancho-variable-solo-con-css/

Aún no he probado esto en todos los navegadores, si encuentro problemas ya se enterarán jejeje!!!

Nuevamente mil gracias a los tres y en especial a "ipraetoriux" por contestar tan rápido.
Cuando lo pruebe en todos los navegadores pego el código.
  #6 (permalink)  
Antiguo 05/02/2013, 09:21
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 9 meses
Puntos: 2
Respuesta: Menu css y divs% centrados

Bueno tras haber probado esto, me encuentro nuevamente aquí con un problema menor, o al menos eso espero.

Aquí pego la liga y abajo va el código:
http://juanlaborde.com/forosdelweb/dock/archivos/includes/menu_dock.php

Lo que encontré en el link que me pasó "ipraetoriux" anda en PC: IE9, firefox, chrome, safari y opera / Mac: firefox, chrome, safari y opera , en todos se comporta igual, lo cual es muy bueno.
También anda en iphone e ipad.

Mi inconveniente evidentemente está en la manipulación de los estilos, si se fijan en la liga que pegué arriba, al achicar el navegador horizontalmente va recortando cada div, supongo que los está enviando hacia abajo y además no se mueve con el scroll.

Probé jugando con el overflow pero solo actúa sobre ese div y si lo pongo en el contenedor no hace nada sobre el dock.
Encontré esto: display:inline-block; para que se mantenga cada div al lado del otro pero se bajan igual.

va el código a ver si alguno se le ocurre algo, muy posiblemente sea algo simple pero soy nuevo en esto, desde ya muchas gracias y disculpas por la insistencia.


MI CSS
---------

#dock
{
z-index:99998;
position:fixed;
width:100%;
height:134px;
display:inline-block;
float:left;
overflow:hidden;
margin-bottom:0px;
bottom:0%;
}

#dockmedio
{
position:relative;
left:50%;
display:inline-block;
}

#esquina_izquierda
{
position:relative;
right:50%;
height:134px;
width:40px;
background: url('../../img/menu_dock/dock_izq.png');
float:left;
}

#esquina_derecha
{
position:relative;
right:50%;
height:134px;
width:40px;
background: url('../../img/menu_dock/dock_der.png');
float:left;
}

#iconos_dock
{
position:relative;
right:50%;
height:134px;
float:left;
background: url('../../img/menu_dock/dock_centro.png');
}

---------------------------------------------------------------------------

MI PHP


<!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=UTF-8" />
<title>Untitled Document</title>

<link href="../../archivos/css/dock.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="dock">
<div id="dockmedio">
<div id="esquina_izquierda"></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="iconos_dock"><img src="http://www.forosdelweb.com/img/menu_dock/ico_herramientas.png" width="99" height="134" /></div>
<div id="esquina_derecha"></div>
</div>
</div>
</body>
</html>
  #7 (permalink)  
Antiguo 05/02/2013, 09:45
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 9 meses
Puntos: 2
Respuesta: Menu css y divs% centrados

ok, ni se esmeren, estaba revisando nuevamente y en IE9 no funciona, no queda centrado.

creo que empezaré de cero con otro método, no entiendo por qué la gente se empecina en usar un navegador tan malo!!!

I hate Microsoft!!!!!
  #8 (permalink)  
Antiguo 05/02/2013, 09:47
Avatar de juanlaborde  
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 9 meses
Puntos: 2
Respuesta: Menu css y divs% centrados

No se nada de java ni jquery pero tengo entendido que hay muy buenas cosas para armar menús de este tipo, si alguno sabe de algún tutorial, también será bienvenido.

Gracias

Etiquetas: Ninguno
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:20.