Foros del Web » Creando para Internet » CSS »

Problema posicionando

Estas en el tema de Problema posicionando en el foro de CSS en Foros del Web. Hola, el problema que tengo es un poco díficil de explicar pero si pueden ayudarme, les estaría realmente muy agradecido. He hecho un SlideToggle, que ...
  #1 (permalink)  
Antiguo 25/07/2012, 15:54
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Pregunta Problema posicionando

Hola, el problema que tengo es un poco díficil de explicar pero si pueden ayudarme, les estaría realmente muy agradecido.

He hecho un SlideToggle, que es un efecto de jQuery que supongo que ya sabrán para que sirve. Entonces tengo un formulario y arriba un botón que al pulsarlo hace el efecto anteriormente mencionado y te abre un nuevo formulario, ocultando el antiguo.

El problema está en que el botón de "Hacer el efecto de jQuery" (Por llamarlo de algún modo) en Chrome me aparece en un sitio y en Mozilla en otro, ya sé que se ve diferente en los distintos navegadores pero es una diferencia demasiado notable y sé que es un problema de la estructura pero no sé encontrar donde está el error, os dejo como lo he hecho:

Código PHP:

jQuery:

$(document).ready(function(){
$(".editar").click(function(){
    $(".editar").animate({width:414},"slow",function(){
    $(".formulario").toggle(function(){
        $(".formu").slideToggle("slow");
    });
    });
  });
});

Fin del jQuery.


//Este botón activa el efecto jQuery //

<input type="button" id="editar" class="editar" value="Editar información" onclick="actualizar()" /><br/><br/>

    <div class="formulario">
    
    <table>

Aquí viene el formulario que voy a obviar

</table>

</div>

 <div class="formu" >

 <form action="actualizar.php?id=<?php echo $idsesion;?>" name="actu" id="actu" method="post">

<table>

Aquí viene el formulario que se despliega cuando le doy al botón

</table>
</div>
Es que no sé si es culpa de que el botón debe ir dentro del primer div y al ponerlo dentro, el segundo div directamente no se me despliega, bueno pues ese es mi problema, ojalá alguien pueda ayudarme, muchísimas gracias!!
  #2 (permalink)  
Antiguo 26/07/2012, 04:03
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 295
Antigüedad: 14 años, 1 mes
Puntos: 12
Respuesta: Problema posicionando

Tendrías que haber puesto el código de css que utilizas. Mira este enlace de posicionamiento y visualización de las cajas http://www.librosweb.es/css/capitulo5.html que seguro que te ayuda, o también puedes probar a modificar los márgenes con respecto al resto, etc. Es un problema de CSS, no tienes que modificar el código HTML, sino CSS
  #3 (permalink)  
Antiguo 26/07/2012, 05:53
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Problema posicionando

Ok, gracias por responder. Te dejo el código CSS

Código PHP:

//Y el CSS corresponde a los ID's que están en el código de arriba//
//Excepto los de intereses, basica, artistica y academica que son para el tamaño de las celdas//


CSS:

.
formu {
displaynone;
border1px solid green;
margin-top: -22%;
width416px;
padding-left10px;
padding-bottom10px;
padding-right10px;
padding-top5px;
}

div.formu{
margin0px;
text-alignleft;
background#E5EECC;
bordersolid 1px green;
margin-top: -461px;
margin-left1000px;
padding-left29px;
}


div.formu
{
width373px;
display:none;
}

.
formulario{
    
margin-top:-461px;
    
margin-left:1000px;
    
width:377px;
    
padding5px;
text-alignleft;
background#E5EECC;
bordersolid 1px green;
padding-left:30px;

}

.
academica {
width210px;
padding-left87px;
}

.
artistica{
width210px;
padding-left42px;
}

.
basica{
width210px;
padding-left66px;
}

.
intereses{
width210px;
padding-left77px;
}

.
editar{
margin-left1000px;
margin-top: -472px;
background-color#22B14C;
border1px solid green;
colorwhite;
height30px;
width130px;
font-weightbold;
cursorpointer;

Espero que así me podáis ayudar, gracias por el interés educacanis (buen nombre) xD
  #4 (permalink)  
Antiguo 26/07/2012, 06:31
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 295
Antigüedad: 14 años, 1 mes
Puntos: 12
Respuesta: Problema posicionando

He estado revisando el código CSS que has puesto y resulta que el ID formu manda dos cosas totalmente diferentes en cuanto al margin-top por ejemplo,
en uno es
margin-top: -22%
y en otro
margin-top:-465px

a lo mejor es que un navegador prima uno y el otro no, es que tampoco sé como se te diferencian, pero revisa el código porque sin comprobar nada ya he visto que hay contradicciones entre el mismo ID

Y por cierto, un consejillo, intenta organizar más o menos dentro de los mismos clases o id los valores de manera similar (siguiendo un orden alfabético o algo así) para poder compararlos mejor
  #5 (permalink)  
Antiguo 26/07/2012, 07:43
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Problema posicionando

El problema es el botón de editar, que es el que hace el efecto SlideToggle, en chrome me queda perfecto pero en mozilla el botón se me ve muy abajo y si lo pongo dentro del primer div, cuando aparece el segundo formulario el botón ya no me aparece y por lo tanto no puedo volver al primer formulario. Lo que quiero hacer es que ese botón esté en ambos formularios para que pueda volver y lo he conseguido dejándolo por ahí suelto, sin div ni nada y Chrome me funciona perfectamente y se me queda bien posicionado pero en mozilla me sale muuuy abajo y por eso creo que es de estructuración.

Cual crees que es el problema? Muchas gracias tío ;)
  #6 (permalink)  
Antiguo 27/07/2012, 14:26
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Por favor, alguien puede ayudarme? Perdón por el doble post pero es para que el tema no se pierda en el olvido...
  #7 (permalink)  
Antiguo 27/07/2012, 18:05
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 9 meses
Puntos: 57
Información Respuesta: Problema posicionando

Hola ananda, que tal.
Cita:
Iniciado por ananda Ver Mensaje
Por favor, alguien puede ayudarme? Perdón por el doble post pero es para que el tema no se pierda en el olvido...
Olvido? Pero si tu penúltimo mensaje es de ayer.

Si lo que deseas es pronta ayuda, lo mejor es que compartas tu código completo y de ser muy extenso quitar lo innecesario.

Yo copie tu código y lo introduje en sus respectivas etiquetas html, body, script, style, etc. Y sin modificar nada solo obtuve en el navegador un botón verde con demasiado margen izquierdo y un exagerado margen negativo superior.

Si lo que quieres es una respuesta acertada, lo mínimo que puedes hacer es facilitamos el trabajo.
  #8 (permalink)  
Antiguo 29/07/2012, 09:23
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Problema posicionando

Cita:
Iniciado por gebremswar Ver Mensaje
Hola ananda, que tal.


Olvido? Pero si tu penúltimo mensaje es de ayer.

Si lo que deseas es pronta ayuda, lo mejor es que compartas tu código completo y de ser muy extenso quitar lo innecesario.

Yo copie tu código y lo introduje en sus respectivas etiquetas html, body, script, style, etc. Y sin modificar nada solo obtuve en el navegador un botón verde con demasiado margen izquierdo y un exagerado margen negativo superior.

Si lo que quieres es una respuesta acertada, lo mínimo que puedes hacer es facilitamos el trabajo.
Ok, tienes razón, te dejo el código completo a ver si ves donde esta el error

Código PHP:

<html etc>
 <
script type="text/javascript">

$(
document).ready(function(){
$(
".editar").click(function(){
    $(
".editar").animate({width:414},"slow",function(){
    $(
".formulario").toggle(function(){
        $(
".formu").slideToggle("slow");
    });
    });
  });
});

</script>

   <div class="formulario">
        
    <table>

//Aquí va todo el formulario que omito por ser muy largo//

</table>
</div>

 <div id="edicion">
    <input type="button" id="editar" class="editar" value="Editar información"/>
    </div>

    <div class="formu" >
 
 
  <table>

//El segundo formulario que también voy a omitir//

</table>

</div> 

Y el código CSS:
Código PHP:

.formulario{
    
margin-top:-461px;
    
margin-left:1000px;
    
width:377px;
    
padding5px;
text-alignleft;
background#E5EECC;
bordersolid 1px green;
padding-left:30px;
}

div.formu{
margin0px;
text-alignleft;
background#E5EECC;
bordersolid 1px green;
margin-top: -461px;
margin-left1000px;
padding-left29px;
width373px;
display:none;
}

.
formu {
displaynone;
border1px solid green;
width416px;
padding-left10px;
padding-bottom10px;
padding-right10px;
padding-top5px;
}

.
editar{
background-color#22B14C;
border1px solid green;
colorwhite;
height30px;
width130px;
font-weightbold;
cursorpointer;

La class "div.formu" no sé si está bien que la ponga porqué vi que lo pusieron en el tutorial de w3schools y pensé que debía ponerlo.

El efecto que tiene que hacer es el siguiente: Aparecer el formulario 1 con el botón de "Editar información" arriba (eso lo conseguí dejándolo suelto con ayuda de los margins pero en mozilla se ve distinto) y que al darle a dicho botón, el formulario 1 desaparezca y aparezca el formulario 2 justo en el mismo sitio y con el botón de "Editar información" en el mismo sitio que el anterior, ya que es un Toggle y al darle volvería a aparecer el formulario 1.

Agradezco mucho vuestra ayuda.
  #9 (permalink)  
Antiguo 29/07/2012, 17:34
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 9 meses
Puntos: 57
Información Respuesta: Problema posicionando

Cita:
Iniciado por ananda Ver Mensaje
La class "div.formu" no sé si está bien que la ponga porqué vi que lo pusieron en el tutorial de w3schools y pensé que debía ponerlo.
Pensaste que debías? Veo que no tienes claro el manejo de selectores en CSS, es bastante básico te recomiendo que revises Selectores Básicos (para este caso "Selector de clase") y no estria mal estudies todos los capítulos de CSS básico y luego CSS avanzado.

En cuanto a div.formu, pues el selector no es incorrecto y la explicación esta el link que dejé lineas más arriba.

Cita:
Iniciado por ananda Ver Mensaje
El efecto que tiene que hacer es el siguiente: Aparecer el formulario 1 con el botón de "Editar información" arriba (eso lo conseguí dejándolo suelto con ayuda de los margins pero en mozilla se ve distinto) y que al darle a dicho botón, el formulario 1 desaparezca y aparezca el formulario 2 justo en el mismo sitio y con el botón de "Editar información" en el mismo sitio que el anterior, ya que es un Toggle y al darle volvería a aparecer el formulario 1.
1. Quieres el botón arriba de los formularios siempre.
2. Y "aparecer" los formularios debajo del botón siempre.
El siguiente ejemplo parte de tu código original. Cambios: 'subí' el div que contiene el botón para que se ubique antes de los div de los formularios. Agregué una nueva clase ".caja" con la propiedad display y su valor inline-block.
Código CSS:
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script type="text/javascript">
  6.     $(document).ready(function(){
  7.         $(".editar").click(function(){
  8.             $(".editar").animate({width:414},"slow",function(){
  9.                 $(".formulario").toggle(function(){
  10.                     $(".formu").slideToggle("slow");
  11.                 });
  12.             });
  13.         });
  14.     });
  15.     </script>
  16.     <style>
  17.     .formulario{
  18.         background:#E5EECC;
  19.         border:solid 1px green;
  20.         /*margin-top:-461px;
  21.         margin-left:1000px;*/
  22.         padding:5px 5px 5px 30px;
  23.         text-align:left;
  24.         width:377px
  25.     }
  26.  
  27.     div.formu{
  28.         background:#E5EECC;
  29.         border:solid 1px green;
  30.         display:none;
  31.         /*margin:0px;
  32.         margin-top:-461px;
  33.         margin-left:1000px;*/
  34.         padding:5px 5px 5px 30px;
  35.         text-align:left;
  36.         width:377px
  37.     }
  38.     .editar{
  39.         background-color:#22B14C;
  40.         border:1px solid green;
  41.         color:white;
  42.         cursor:pointer;
  43.         font-weight:bold;
  44.         height:30px;
  45.         width:140px
  46.     }
  47.     .caja{display:inline-block}
  48.     </style>
  49. </head>
  50. <body>
  51. <div class="caja">
  52.     <div id="edicion" class="caja">
  53.         <input type="button" id="editar" class="editar" value="Editar información">
  54.     </div>
  55.     <div class="formulario">
  56.         <form method="post">
  57.             <!-- elementos de formulario -->
  58.         </form>
  59.     </div>
  60.     <div class="formu" >
  61.         <form method="post">
  62.             <!-- elementos de formulario -->
  63.         </form>
  64.     </div>
  65. </div>
  66. </body>
  67. </html>

Lo que he hecho con el display, en class .caja, es que ocupe solo el espacio necesario. Ya que tu maquetación y la disposición de los demás elementos que puedan contener a este fragmento de código que nos haz compartido pueden estar ocasionando que tu botón se muestre en distinto lugar al que inicialmente le haz asignado y puede que a su vez haya que modificar no solo las reglas de este fragmento par solucionar tu problema.

Última edición por gebremswar; 29/07/2012 a las 17:41
  #10 (permalink)  
Antiguo 30/07/2012, 04:36
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Problema posicionando

Cita:
Iniciado por gebremswar Ver Mensaje
Pensaste que debías? Veo que no tienes claro el manejo de selectores en CSS, es bastante básico te recomiendo que revises Selectores Básicos (para este caso "Selector de clase") y no estria mal estudies todos los capítulos de CSS básico y luego CSS avanzado.

En cuanto a div.formu, pues el selector no es incorrecto y la explicación esta el link que dejé lineas más arriba.



1. Quieres el botón arriba de los formularios siempre.
2. Y "aparecer" los formularios debajo del botón siempre.
El siguiente ejemplo parte de tu código original. Cambios: 'subí' el div que contiene el botón para que se ubique antes de los div de los formularios. Agregué una nueva clase ".caja" con la propiedad display y su valor inline-block.
Código CSS:
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script type="text/javascript">
  6.     $(document).ready(function(){
  7.         $(".editar").click(function(){
  8.             $(".editar").animate({width:414},"slow",function(){
  9.                 $(".formulario").toggle(function(){
  10.                     $(".formu").slideToggle("slow");
  11.                 });
  12.             });
  13.         });
  14.     });
  15.     </script>
  16.     <style>
  17.     .formulario{
  18.         background:#E5EECC;
  19.         border:solid 1px green;
  20.         /*margin-top:-461px;
  21.         margin-left:1000px;*/
  22.         padding:5px 5px 5px 30px;
  23.         text-align:left;
  24.         width:377px
  25.     }
  26.  
  27.     div.formu{
  28.         background:#E5EECC;
  29.         border:solid 1px green;
  30.         display:none;
  31.         /*margin:0px;
  32.         margin-top:-461px;
  33.         margin-left:1000px;*/
  34.         padding:5px 5px 5px 30px;
  35.         text-align:left;
  36.         width:377px
  37.     }
  38.     .editar{
  39.         background-color:#22B14C;
  40.         border:1px solid green;
  41.         color:white;
  42.         cursor:pointer;
  43.         font-weight:bold;
  44.         height:30px;
  45.         width:140px
  46.     }
  47.     .caja{display:inline-block}
  48.     </style>
  49. </head>
  50. <body>
  51. <div class="caja">
  52.     <div id="edicion" class="caja">
  53.         <input type="button" id="editar" class="editar" value="Editar información">
  54.     </div>
  55.     <div class="formulario">
  56.         <form method="post">
  57.             <!-- elementos de formulario -->
  58.         </form>
  59.     </div>
  60.     <div class="formu" >
  61.         <form method="post">
  62.             <!-- elementos de formulario -->
  63.         </form>
  64.     </div>
  65. </div>
  66. </body>
  67. </html>

Lo que he hecho con el display, en class .caja, es que ocupe solo el espacio necesario. Ya que tu maquetación y la disposición de los demás elementos que puedan contener a este fragmento de código que nos haz compartido pueden estar ocasionando que tu botón se muestre en distinto lugar al que inicialmente le haz asignado y puede que a su vez haya que modificar no solo las reglas de este fragmento par solucionar tu problema.

Muchas gracias! Me ha funcionado a la perfección, era más problema de estructura html que de css, no obstante el css también tenía muchos errores. Respecto a lo del "div.formu", sé que se puede usar pero no estaba seguro ya que hice dos clases, una llamada .formu y otra llamada div.formu, y al fin y al cabo son el mismo div, eso me despistó un poco. Tu solución me ha ido genial, muchas gracias y gracias a todos los que me habéis ayudado.

Etiquetas: chrome
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 04:52.