div que mueve al resto

ananda · #1 (**permalink**) 21/08/2012, 05:57

Hola, tengo una pagina con varios divs y lo que me pasa es que al mover un div, se me mueve el resto de divs y no entiendo por que. Me gustaria que me dijerais el error teorico, si lo necesitais cuelgo los codigos css, ojala sepais de que viene ese error. Muchisimas gracias.

flashmax · #2 (**permalink**) 21/08/2012, 06:10

si pon el cogido para ver .
Pueden haber varios motivos la posición, relative absolute, fixed, los z-index.
si trabajas con contenedor etcetera.

ananda · #3 (**permalink**) 21/08/2012, 07:27

Hola, gracias por el interés, te dejo el esqueleto del código html, hay mas div's pero he puesto los principales.

HTML

Código PHP:

  body

 
<div id="marco">

 
 
<div id="menu" class="menu" >

</div>

 
<div id="nombre">

 
</div>

 
<div id="cuadromuro">

    

 <div id="todo">

 

 

 

 <div id="wall"></div>

     </div>

 </div>

 

 

                 <div class="changediv" id="changediv">

 
</div>

 
<div id="fotoperfil" class="fotoperfil" >

 
</div>

 
 
 
<div class="caja">

 
</div>

CSS

Código PHP:

  body {

    background-color: white;

    background-position: relative;

    background-repeat: no-repeat;

}

 
#marco {

background-color: #EBEBEB;

margin-top: 35px;

border: 3px solid #22B14C;

z-index: 1;

width: 1095px;

margin-left: 358px;

padding-bottom: 50px;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

position: relative;

}

 
.menu{

background-color: #22B14C;

border: 2px solid #22B14C;

height: 30px;

left: 0;

position: fixed;

top: 0;

width: 2400px;

}

 
#nombre {

margin-left: 370px;

margin-top: -4px;

}

 
#todo {

margin-top: 95px;

margin-left: 50px;

width: 462px;

z-index: 3;

display: inherit;

}

 
.changediv {

background-color: #22B14C;

border: 1px solid green;

color: white;

cursor: pointer;

font-weight: bold;

width: 412px;

margin-left: 668px;

height: 30px;

position: absolute;

margin-top: -549px;

text-align: center;

}

 
.fotoperfil {

border: 1px solid green;

height: 331px;

margin-left: 669px;

margin-top: -518px;

text-align: center;

width: 411px;

background-color: white;

z-index: 3;

}

 
.caja {

margin-left: 668px;

margin-top: 14px;

}

 
#wall{

     

     border: 3px solid #B4BBCD !important; 

    margin-top: 20px;

    background-color: #22B14C;

    padding-right: 5px;

    padding-left: 5px;

    padding-bottom: 5px;

    overflow:scroll;

}

Ahí están los códigos, acepto todas las críticas, sugerencias y errores que tienen los scripts porqué seguramente tienen. Gracias!

pedrogp9693 · #4 (**permalink**) 21/08/2012, 07:52

Seguramente sea porque si la etiqueta que mueves tiene una posición fixed o absolute y las de dentro igual las de dentro toman como referencia a la que mueves

flashmax · #5 (**permalink**) 21/08/2012, 10:32

no puedo localizar el error pon el código html completo y detalla bien cual es el div en cuestion! y al hacer que cosa se produce el error

ananda · #6 (**permalink**) 21/08/2012, 13:29

Hola, bueno lo que he hecho ha sido ponerle al div contenedor un position relative y un z-index:1 y a los otros position absolute y z-index: 3 pero el problema es ahora que los que tienen z-index:3 no se ponen encima del div contenedor de todo, no sé si me explico. ¿Como consigo que se pongan por encima? Muchas gracias por todo.

flashmax · #7 (**permalink**) 21/08/2012, 18:00

prueba con esto haber si se soluciona.

Código:

.fotoperfil { 
border: 1px solid green; 
height: 331px; 
margin-left: 669px; 
margin-top: -518px; 
text-align: center; 
width: 411px; 
background-color: white; 
z-index: 3;
position: absolute; 
}

y te falto:

Código:

<div class="caja"> 

</div>
</div>

ananda · #8 (**permalink**) 22/08/2012, 03:12

Eso es lo que actualmente tengo, el div contenedor con position: relative y los divs que están dentro con position:absolute y el contenedor se queda justo arriba de los divs que tienen que estar por encima. ¿Alguna idea?

jeiceta · #9 (**permalink**) 22/08/2012, 04:08

Cita:

Iniciado por ananda

¿Alguna idea?

Si. Pon el enlace :) Y si dices que div mueves mejor.

ananda · #10 (**permalink**) 22/08/2012, 05:28

Lo tengo en localhost, te pongo los códigos.

html

Código PHP:

   
 
 
<body>

    

        

    

 
 
 
<div id="menu" class="menu" >

 
</div>

 
<div id="marco">

    <div id="nombre">

        </div>

                

<div id="cartelmax" class="nomax" >

 
</div>

 
<div id="cuadromuro">

    

 <div id="todo">

    <div id="visitas" class="visitas"> 

        

    </div>

    <div id="muro">

      

    <div id="cajon">

        <div id="cartelito">

         

        </div>

         

       </div>

      

    <div id="loading"><img src="loading.gif" /></div>

    

    

    

    <div id="wall"></div>

    </div>

 </div>

 
        

                <div class="changediv" id="changediv">

    

</div>

        

<div id="fotoperfil" class="fotoperfil" >

    

 
    

 <div class="imageRow">

  

 </div>

    </div>

 
 
 
  

  

  

     

              

<div class="caja">

    

    <div id="edicion" class="edicion"> 

    </div>

    

    <div class="formulario"> 

        

 
    </div>

    <div class="formu" > 

 

 

    </div>

</div>

</div>

    </body>

    

</html>

Lo explico un poco: El div marco es un cuadro en el que se deben situar correctamente los divs : todo, fotoperfil y caja. Y lo que pasa es que el div todo contiene una especie de comentarios y al hacerse grande, el div fotoperfil y caja bajan para abajo o suben para arriba. Lo que quiero es que todos esos divs sean independientes, que no se muevan cuando el todo tiene más height. Otra cosa es que el div marco se me va hasta abajo del todo y lo que quiero es que englobe hasta el último div que haya dentro, es decir que el height y el width sean auto.

Espero haberme explicado, dejo el CSS

css

Código PHP:

  #marco {

background-color: #EBEBEB;

border: 3px solid #22B14C;

padding-bottom: 50px;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

position: relative;

left: 358px;

top: 37px;

z-index: 1;

}

 
#nombre {

margin-left: 370px;

margin-top: -4px;

}

 
#cuadromuro{

margin-top: -40px;

}

 
#todo{

width: 462px;

z-index: 3;

position: relative;

top: 122px;

left: 96px;

}

 
#cajon{

    background-color: white;

    border: 3px solid #B4BBCD !important;

    padding: 5px;

}

 
#wall{

     

     border: 3px solid #B4BBCD !important; 

    margin-top: 20px;

    background-color: #22B14C;

    padding-right: 5px;

    padding-left: 5px;

    padding-bottom: 5px;

    height: 350px;

    overflow:scroll;

}

 
.changediv{

background-color: #22B14C;

border: 1px solid green;

color: white;

cursor: pointer;

font-weight: bold;

height: 30px;

left: 690px;

position: relative;

text-align: center;

top: -439px;

width: 412px;

}

 
.fotoperfil{

background-color: white;

border: 1px solid green;

height: 331px;

left: 690px;

position: relative;

text-align: center;

top: -440px;

width: 412px;

z-index: 3;

}

 
 
  .caja{

    left: 690px;

    position: relative;

    top: -390px;

    z-index: 3;

}

Espero que podáis encontrar el error, quiero avanzar y todo el rato me choco con este problema, muchas gracias por el interés y todo ;)

flashmax · #11 (**permalink**) 22/08/2012, 11:20

Cita:

Iniciado por ananda

Lo tengo en localhost, te pongo los códigos.

html

Código PHP:

   
 
 
<body>

    

        

    

 
 
 
<div id="menu" class="menu" >

 
</div>

 
<div id="marco">

    <div id="nombre">

        </div>

                

<div id="cartelmax" class="nomax" >

 
</div>

 
<div id="cuadromuro">

    

 <div id="todo">

    <div id="visitas" class="visitas"> 

        

    </div>

    <div id="muro">

      

    <div id="cajon">

        <div id="cartelito">

         

        </div>

         

       </div>

      

    <div id="loading"><img src="loading.gif" /></div>

    

    

    

    <div id="wall"></div>

    </div>

 </div>

 
        

                <div class="changediv" id="changediv">

    

</div>

        

<div id="fotoperfil" class="fotoperfil" >

    

 
    

 <div class="imageRow">

  

 </div>

    </div>

 
 
 
  

  

  

     

              

<div class="caja">

    

    <div id="edicion" class="edicion"> 

    </div>

    

    <div class="formulario"> 

        

 
    </div>

    <div class="formu" > 

 

 

    </div>

</div>

</div>

    </body>

    

</html>

Lo explico un poco: El div marco es un cuadro en el que se deben situar correctamente los divs : todo, fotoperfil y caja. Y lo que pasa es que el div todo contiene una especie de comentarios y al hacerse grande, el div fotoperfil y caja bajan para abajo o suben para arriba. Lo que quiero es que todos esos divs sean independientes, que no se muevan cuando el todo tiene más height. Otra cosa es que el div marco se me va hasta abajo del todo y lo que quiero es que englobe hasta el último div que haya dentro, es decir que el height y el width sean auto.

Espero haberme explicado, dejo el CSS

css

Código PHP:

  #marco {

background-color: #EBEBEB;

border: 3px solid #22B14C;

padding-bottom: 50px;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

position: relative;

left: 358px;

top: 37px;

z-index: 1;

}

 
#nombre {

margin-left: 370px;

margin-top: -4px;

}

 
#cuadromuro{

margin-top: -40px;

}

 
#todo{

width: 462px;

z-index: 3;

position: relative;

top: 122px;

left: 96px;

}

 
#cajon{

    background-color: white;

    border: 3px solid #B4BBCD !important;

    padding: 5px;

}

 
#wall{

     

     border: 3px solid #B4BBCD !important; 

    margin-top: 20px;

    background-color: #22B14C;

    padding-right: 5px;

    padding-left: 5px;

    padding-bottom: 5px;

    height: 350px;

    overflow:scroll;

}

 
.changediv{

background-color: #22B14C;

border: 1px solid green;

color: white;

cursor: pointer;

font-weight: bold;

height: 30px;

left: 690px;

position: relative;

text-align: center;

top: -439px;

width: 412px;

}

 
.fotoperfil{

background-color: white;

border: 1px solid green;

height: 331px;

left: 690px;

position: relative;

text-align: center;

top: -440px;

width: 412px;

z-index: 3;

}

 
 
  .caja{

    left: 690px;

    position: relative;

    top: -390px;

    z-index: 3;

}

Espero que podáis encontrar el error, quiero avanzar y todo el rato me choco con este problema, muchas gracias por el interés y todo ;)

Estaría bueno que subas el proyecto con las imagenes (completo) a un hosting free!

ananda · #12 (**permalink**) 23/08/2012, 05:04

Hola, esta en http:skyshallow.atwebpages.com es una red social así que tendrás que registrarte, al registrarte el script que me da errores es miperfil.php pero sobretodo el perfil.php?id=(numero). El div fotoperfil2 se me desplaza siempre que hago otro div más grande, a ver si encuentras el error que ya estoy harto de este problema, gracias.

C2am · #13 (**permalink**) 24/08/2012, 00:34

Hola Ananda.
¿En serio pretendes que nos registremos en una red social para ayudarte a corregir tu problema?
¿Por qué no pones tu código de forma que podamos acceder sin tener que registrarnos?
O como han hecho otros, dar un usuario y clave general, por ejemplo usuarioprueba - 123456.
Digo, al fin y al cabo es para ayudarte.
Es una crítica constructiva, y espero que lo tomes así.

En cuanto al problema, me parece que deberías repensar el maquetado, porque todos esos problemas de cajas que bajan para abajo y cajas que suben para arriba

es señal de un mal maquetado o de que no entiendes como funcionan las cosas.

De todas formas espero a tener acceso a tu código y probarlo en vivo y en directo para poder opinar con fundamentos.

Saludos

ananda · #14 (**permalink**) 24/08/2012, 02:22

Cita:

Iniciado por C2am

Hola Ananda.
¿En serio pretendes que nos registremos en una red social para ayudarte a corregir tu problema?
¿Por qué no pones tu código de forma que podamos acceder sin tener que registrarnos?
O como han hecho otros, dar un usuario y clave general, por ejemplo usuarioprueba - 123456.
Digo, al fin y al cabo es para ayudarte.
Es una crítica constructiva, y espero que lo tomes así.

En cuanto al problema, me parece que deberías repensar el maquetado, porque todos esos problemas de cajas que bajan para abajo y cajas que suben para arriba

es señal de un mal maquetado o de que no entiendes como funcionan las cosas.

De todas formas espero a tener acceso a tu código y probarlo en vivo y en directo para poder opinar con fundamentos.

Saludos

Hola, entiendo lo que dices pero no es mi intención hacertelo ver así ya que primero me pidieron los códigos y los posteé y luego me pidieron que lo subiera a un servidor gratuito, cosa que yo no quería hacer ya que estoy en el pueblo y la conexión es de lo peor que hay, por lo que para mí no es nada cómodo. No obstante entiendo que lo de registrarte te pueda parecer un impedimento así que te proporcionaré un usuario para que puedas probarlo.

El segundo punto, que la página está mal maquetada, creo que ese es el error ya que en maquetación no tengo tanta experiencia como con PHP (Tampoco es que tenga muchísima con php pero lo controlo más) por eso si me pudieras ayudar, te estaría muy agradecido.

Y por último te dejo con el usuario.

Correo: C2am
Contraseña: forosdelweb

C2am · #15 (**permalink**) 24/08/2012, 12:49

Hola
Estuve mirando rapidamente y veo que es la maquetación la que me parece que no funciona bien.
Haces mal uso de propiedades como top, left, position relative, etc.
Tienes los encabezados de las secciones por un lado y las cajas que contienen esas secciones por otro.

Por ejemplo:
"Actualizar mi foto"
Para mí deberías hacer algo así:

Código HTML:

Ver original<div id="contenedor-seccion">
<div>titulo de seccion</div>
<div>cuerpo de la seccion</div>
<div>pie de la seccion</div>
</div>

Con esto te evitas manipular las distintas partes como por ejemplo el titulo que tienes en una caja con fondo verde, y lo tienes posicionado con position relative + top + left.

Estoy un poco apurado, luego cuando regrese de trabajar trato de ser mas claro.

Saludos

ananda · #16 (**permalink**) 24/08/2012, 13:14

Ah de acuerdo, ya entiendo a lo que te refieres, lo aplicare en los scripts, si encuentras mas errores asi estaria encantado de que los postearas, muchas gracias! :)