1 Como mover tablas dentro de tablas? Miér Dic 21, 2011 6:00 am
Ayax
Bueno, estoy intentado crear un nuevo menú de navegación que lo emepezé hoy y llevo este código
Lo último de L no es nada xD es solo para poder ver que pasa si bajo en el foro
Bueno acá dejo el link de la página HTML para que vean como vá quedando , por ahora se vé bien en google chrome
http://ttutoriales.activoforo.com/h8-navbar-usuarios
Lo que quiero mover son los dos cuadros de "Cerrar sesión" y "Mi cuenta" y que se separen... hasta intenté crear dos tablas distintas para posicionarlas con "position: absolute; top: 100px; right: 50px; " y a la otra le dí 100px a el right para que se separara pero no pasa nada, que hago mal?
Se pueden correr o no? que tengo hacer para moverlos dentro de la table que es el contenido central?
- Código:
<style>
.ayaxregister2:hover{-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
background: -moz-linear-gradient(top, #F1F1F1 0%, #F2F2F2 68%, #FEFEFE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1F1F1), color-stop(68%,#FEFEFE), color-stop(100%,#F1F1F1));
background: -webkit-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
background: -o-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
background: -ms-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#FEFEFE',GradientType=0 );
background: linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
margin-bottom: 0px; margin: 0px; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;}
.ayaxregister2 {position: absolute; top: 100px; right: 100px; margin-left: 60px; box-shadow: 1px 1px 6px #919191; border-bottom: 1px ridge #FCFCFC; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;padding: 10px; margin-top: 0px; margin-bottom: 0px; background: -moz-linear-gradient(top, #FEFEFE 0%, #F2F2F2 68%, #F1F1F1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFEFE), color-stop(68%,#F2F2F2), color-stop(100%,#F1F1F1));
background: -webkit-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);
background: -o-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);
background: -ms-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f1f1f1',GradientType=0 );
background: linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);
border-left: ridge 1px #FCFCFC; border-top: ridge 1px #FCFCFC; margin-bottom: 0px; border-radius: 5px; border-right: 1px ridge #FCFCFC;}
.ayaxregister2 a:hover {text-decoration: none; color: #707070; -webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;}
.ayaxregister2 a {color: #292929;text-shadow: 1px 1px 1px white; font-weight: bold; font-family: tahoma;}
.ayaxlogonav img:hover {opacity: 1; -webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s; -o-transition-duration: 0.7s;
transition-duration: 0.7s;}.ayaxmenu {position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; align: center; width: 100%;-webkit-transition-duration: 1s;
-moz-transition-duration: 1s; -o-transition-duration: 1s;
transition-duration: 1s;}.ayaxlogonav img{opacity: 0.8; -webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s; -o-transition-duration: 0.7s;
transition-duration: 0.7s; }.ayaxregister2:hover{-webkit-transition-duration: 1s;
-moz-transition-duration: 1s; -o-transition-duration: 1s;
transition-duration: 1s;background: -moz-linear-gradient(top, #F1F1F1 0%, #F2F2F2 68%, #FEFEFE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1F1F1), color-stop(68%,#FEFEFE), color-stop(100%,#F1F1F1));
background: -webkit-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
background: -o-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
background: -ms-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#FEFEFE',GradientType=0 );background: linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);margin-bottom: 0px; margin: 0px; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}.ayaxregister2 {position: absolute; top: 100px; right: 20px; margin-left: 60px; box-shadow: 1px 1px 6px #919191; border-bottom: 1px ridge #FCFCFC; -webkit-transition-duration: 1s; -moz-transition-duration: 1s;-o-transition-duration: 1s;transition-duration: 1s;padding: 10px; margin-top: 0px; margin-bottom: 0px; background: -moz-linear-gradient(top, #FEFEFE 0%, #F2F2F2 68%, #F1F1F1 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFEFE), color-stop(68%,#F2F2F2), color-stop(100%,#F1F1F1));background: -webkit-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);background: -o-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);background: -ms-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f1f1f1',GradientType=0 );background: linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);border-left: ridge 1px #FCFCFC; border-top: ridge 1px #FCFCFC; margin-bottom: 0px; border-radius: 5px; border-right: 1px ridge #FCFCFC;}.ayaxregister a:hover {text-decoration: none; color: #707070; -webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;}
.ayaxregister a {color: #292929;text-shadow: 1px 1px 1px white; font-weight: bold; font-family: tahoma;}
.ayaxlogonav img:hover {opacity: 1; -webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;}
.ayaxlogout {float: right; top: 0px;}
.ayaxtable{ padding-right: 20px; box-shadow: inset -4px -2px 10px black; top: 0px; left: 0px;width: 100%; padding-left: 10px; background-image: url(http://i42.servimg.com/u/f42/15/92/96/93/top_bg10.png); border-bottom: 5px solid #0052a6;}
.ayaxtable:hover{top: -30;}
.ayaxnavbac {text-align: center; align: center; width: 100%; border-bottom: 2px solid #919191; border-right: 2px solid #919191; border-left: 2px solid #919191; box-shadow: 0px 0px 10px black; border-top: 3px solid #00526; border-radius: 0px 0px 5px 5px;background: url(http://i42.servimg.com/u/f42/15/92/96/93/ayaxba11.png) repeat-x; height: 30px; bottom: 0px; margin-top: 0px; }
.ayaxposition {float: right; top: 100px; right: 200px;}
.ayaxnav2 {align: center; text-align: center;border-right: 1px ridge #919191; padding-top: 2px; padding-left: 10px; padding-right: 10px; margin-bottom: 0px; height: 30px; text-transform: uppercase; font-family: tahoma; font-weight: bold; align: center; text-align: center;"}
.ayaxnav2:hover {text-align: center; box-shadow: inset: 0 0 8px white; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;color: black; text-shadow: 1px 2px 1px #919191; border-left: 3px ridge #919191; border-right: 3px groove #919191;; background: url(http://i42.servimg.com/u/f42/15/92/96/93/backgr10.png) repeat-x;}
.ayaxnav2 a{ text-align: center;text-shadow: 1px 1px 1px #919191; color: white; }
.ayaxnav2 a:hover {text-shadow: 1px 1px 1px black; color: black;}
.ayaxregister:hover{-webkit-transition-duration: 1s; -moz-transition-duration: 1s;-o-transition-duration: 1s;
transition-duration: 1s;background: -moz-linear-gradient(top, #F1F1F1 0%, #F2F2F2 68%, #FEFEFE 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1F1F1), color-stop(68%,#FEFEFE), color-stop(100%,#F1F1F1));
background: -webkit-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
background: -o-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
background: -ms-linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#FEFEFE',GradientType=0 );
background: linear-gradient(top, #F1F1F1 0%,#F2F2F2 68%,#FEFEFE 100%);
margin-bottom: 0px; margin: 0px; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}.ayaxregister {position: absolute; top: 100px; right: 20px; margin-left: 60px; box-shadow: 1px 1px 6px #919191; border-bottom: 1px ridge #FCFCFC; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s; -o-transition-duration: 1s;transition-duration: 1s;padding: 10px; margin-top: 0px; margin-bottom: 0px; background: -moz-linear-gradient(top, #FEFEFE 0%, #F2F2F2 68%, #F1F1F1 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFEFE), color-stop(68%,#F2F2F2), color-stop(100%,#F1F1F1));background: -webkit-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);background: -o-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);
background: -ms-linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f1f1f1',GradientType=0 );background: linear-gradient(top, #FEFEFE 0%,#F2F2F2 68%,#F1F1F1 100%);border-left: ridge 1px #FCFCFC; border-top: ridge 1px #FCFCFC; margin-bottom: 0px; border-radius: 5px; border-right: 1px ridge #FCFCFC;}</style><table class="ayaxmenu"><td><table class="ayaxtable" height="200px"><td><table class="ayaxlogonav"><td><a href="http://webdesignforo.net"><img src="http://i42.servimg.com/u/f42/15/92/96/93/ayaxlo11.png"></a></td></table><table class="ayaxposition2"><td><table><td><table class="ayaxregister"><td><a href="/logout" >Cerrar sesión</a></td></table><table class="ayaxregister2"><td><a href="profile?mode=editprofile">Mi cuenta</a></td></table></td></table></td></table></td></table><table class="ayaxnavbac"><td><table><td class="ayaxnav2"><a href="/forum">FORO</a></td><td class="ayaxnav2"><a href="/portal">PORTAL</a></td><td class="ayaxnav2"><a href="/gallery">GALERÍA</a></td><td class="ayaxnav2"><a href="FAQ">FAQ</a></td><td class="ayaxnav2"><a href="/search">BUSCAR</a></td><td class="ayaxnav2"><a href="/memberlist">MIEMBROS</a></td><td class="ayaxnav2"><a href="/groups">GRUPOS</a></td><td class="ayaxnav2"><a href="/t1-normas-generales-del-foro">NORMAS</a></td></table></td></table></td></table>
L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>L</br>
Lo último de L no es nada xD es solo para poder ver que pasa si bajo en el foro
Bueno acá dejo el link de la página HTML para que vean como vá quedando , por ahora se vé bien en google chrome
http://ttutoriales.activoforo.com/h8-navbar-usuarios
Lo que quiero mover son los dos cuadros de "Cerrar sesión" y "Mi cuenta" y que se separen... hasta intenté crear dos tablas distintas para posicionarlas con "position: absolute; top: 100px; right: 50px; " y a la otra le dí 100px a el right para que se separara pero no pasa nada, que hago mal?
Se pueden correr o no? que tengo hacer para moverlos dentro de la table que es el contenido central?
Última edición por Ayax el Jue Dic 22, 2011 11:15 pm, editado 2 veces