Ver Mensaje Individual
  #6 (permalink)  
Antiguo 05/02/2013, 09:21
Avatar de juanlaborde
juanlaborde
 
Fecha de Ingreso: febrero-2013
Mensajes: 39
Antigüedad: 11 años, 3 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>