Problema posicionando

[ananda]

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!!

[educacanis]

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

[ananda]

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 {
display: none;
border: 1px solid green;
margin-top: -22%;
width: 416px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-top: 5px;
}

div.formu{
margin: 0px;
text-align: left;
background: #E5EECC;
border: solid 1px green;
margin-top: -461px;
margin-left: 1000px;
padding-left: 29px;
}


div.formu
{
width: 373px;
display:none;
}

.formulario{
    margin-top:-461px;
    margin-left:1000px;
    width:377px;
    padding: 5px;
text-align: left;
background: #E5EECC;
border: solid 1px green;
padding-left:30px;

}

.academica {
width: 210px;
padding-left: 87px;
}

.artistica{
width: 210px;
padding-left: 42px;
}

.basica{
width: 210px;
padding-left: 66px;
}

.intereses{
width: 210px;
padding-left: 77px;
}

.editar{
margin-left: 1000px;
margin-top: -472px;
background-color: #22B14C;
border: 1px solid green;
color: white;
height: 30px;
width: 130px;
font-weight: bold;
cursor: pointer;
}  
   

Espero que así me podáis ayudar, gracias por el interés educacanis (buen nombre) xD

[educacanis]

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

[ananda]

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 ;)

[ananda]

Por favor, alguien puede ayudarme? Perdón por el doble post pero es para que el tema no se pierda en el olvido...

[gebremswar]

Hola ananda, que tal.

Iniciado por ananda

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.

[ananda]

Iniciado por gebremswar

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; 
    padding: 5px; 
text-align: left; 
background: #E5EECC; 
border: solid 1px green; 
padding-left:30px; 
} 
 
div.formu{ 
margin: 0px; 
text-align: left; 
background: #E5EECC; 
border: solid 1px green; 
margin-top: -461px; 
margin-left: 1000px; 
padding-left: 29px; 
width: 373px; 
display:none; 
} 
 
.formu { 
display: none; 
border: 1px solid green; 
width: 416px; 
padding-left: 10px; 
padding-bottom: 10px; 
padding-right: 10px; 
padding-top: 5px; 
} 
 
.editar{ 
background-color: #22B14C; 
border: 1px solid green; 
color: white; 
height: 30px; 
width: 130px; 
font-weight: bold; 
cursor: pointer; 
}  
   

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.

[gebremswar]

Iniciado por ananda

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.

Iniciado por ananda

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:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
    $(document).ready(function(){
        $(".editar").click(function(){
            $(".editar").animate({width:414},"slow",function(){
                $(".formulario").toggle(function(){
                    $(".formu").slideToggle("slow");
                });
            });
        });
    });
    </script>
    <style>
    .formulario{ 
        background:#E5EECC;
        border:solid 1px green;
        /*margin-top:-461px; 
        margin-left:1000px;*/
        padding:5px 5px 5px 30px;
        text-align:left;
        width:377px
    } 
 
    div.formu{
        background:#E5EECC;
        border:solid 1px green;
        display:none;
        /*margin:0px;
        margin-top:-461px;
        margin-left:1000px;*/
        padding:5px 5px 5px 30px;
        text-align:left;
        width:377px
    } 
    .editar{ 
        background-color:#22B14C;
        border:1px solid green;
        color:white;
        cursor:pointer;
        font-weight:bold;
        height:30px;
        width:140px
    }
    .caja{display:inline-block}
    </style>
</head>
<body>
<div class="caja">
    <div id="edicion" class="caja"> 
        <input type="button" id="editar" class="editar" value="Editar información"> 
    </div>
    <div class="formulario"> 
        <form method="post">
            <!-- elementos de formulario -->
        </form>
    </div>
    <div class="formu" > 
        <form method="post">
            <!-- elementos de formulario -->
        </form>
    </div>
</div>
</body>
</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.

[ananda]

Iniciado por gebremswar

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:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
    $(document).ready(function(){
        $(".editar").click(function(){
            $(".editar").animate({width:414},"slow",function(){
                $(".formulario").toggle(function(){
                    $(".formu").slideToggle("slow");
                });
            });
        });
    });
    </script>
    <style>
    .formulario{ 
        background:#E5EECC;
        border:solid 1px green;
        /*margin-top:-461px; 
        margin-left:1000px;*/
        padding:5px 5px 5px 30px;
        text-align:left;
        width:377px
    } 
 
    div.formu{
        background:#E5EECC;
        border:solid 1px green;
        display:none;
        /*margin:0px;
        margin-top:-461px;
        margin-left:1000px;*/
        padding:5px 5px 5px 30px;
        text-align:left;
        width:377px
    } 
    .editar{ 
        background-color:#22B14C;
        border:1px solid green;
        color:white;
        cursor:pointer;
        font-weight:bold;
        height:30px;
        width:140px
    }
    .caja{display:inline-block}
    </style>
</head>
<body>
<div class="caja">
    <div id="edicion" class="caja"> 
        <input type="button" id="editar" class="editar" value="Editar información"> 
    </div>
    <div class="formulario"> 
        <form method="post">
            <!-- elementos de formulario -->
        </form>
    </div>
    <div class="formu" > 
        <form method="post">
            <!-- elementos de formulario -->
        </form>
    </div>
</div>
</body>
</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.