Foros del Web » Creando para Internet » CSS »

div que mueve al resto

Estas en el tema de div que mueve al resto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/08/2012, 05:57
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 14
div que mueve al resto

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.
  #2 (permalink)  
Antiguo 21/08/2012, 06:10
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 8 años, 10 meses
Puntos: 86
Respuesta: div que mueve al resto

si pon el cogido para ver .
Pueden haber varios motivos la posición, relative absolute, fixed, los z-index.
si trabajas con contenedor etcetera.
  #3 (permalink)  
Antiguo 21/08/2012, 07:27
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 14
Respuesta: div que mueve al resto

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-colorwhite;
    
background-positionrelative;
    
background-repeatno-repeat;
}

#marco {
background-color#EBEBEB;
margin-top35px;
border3px solid #22B14C;
z-index1;
width1095px;
margin-left358px;
padding-bottom50px;
padding-left10px;
padding-right10px;
padding-top10px;
positionrelative;
}

.
menu{
background-color#22B14C;
border2px solid #22B14C;
height30px;
left0;
positionfixed;
top0;
width2400px;
}

#nombre {
margin-left370px;
margin-top: -4px;
}

#todo {
margin-top95px;
margin-left50px;
width462px;
z-index3;
displayinherit;
}

.
changediv {
background-color#22B14C;
border1px solid green;
colorwhite;
cursorpointer;
font-weightbold;
width412px;
margin-left668px;
height30px;
positionabsolute;
margin-top: -549px;
text-aligncenter;
}

.
fotoperfil {
border1px solid green;
height331px;
margin-left669px;
margin-top: -518px;
text-aligncenter;
width411px;
background-colorwhite;
z-index3;
}

.
caja {
margin-left668px;
margin-top14px;
}

#wall{
     
     
border3px solid #B4BBCD !important; 
    
margin-top20px;
    
background-color#22B14C;
    
padding-right5px;
    
padding-left5px;
    
padding-bottom5px;
    
overflow:scroll;

Ahí están los códigos, acepto todas las críticas, sugerencias y errores que tienen los scripts porqué seguramente tienen. Gracias!
  #4 (permalink)  
Antiguo 21/08/2012, 07:52
 
Fecha de Ingreso: agosto-2012
Mensajes: 37
Antigüedad: 8 años, 10 meses
Puntos: 12
Respuesta: div que mueve al resto

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
__________________
Pedro Gutiérrez, diseñador y desarrollador web freelance en Toledo,
busco soluciones a los proyectos web que me propongas.

Visita mi web-blog: http://xitrus.es
  #5 (permalink)  
Antiguo 21/08/2012, 10:32
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 8 años, 10 meses
Puntos: 86
Respuesta: div que mueve al resto

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
  #6 (permalink)  
Antiguo 21/08/2012, 13:29
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 14
Respuesta: div que mueve al resto

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.
  #7 (permalink)  
Antiguo 21/08/2012, 18:00
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 8 años, 10 meses
Puntos: 86
Respuesta: div que mueve al resto

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> 
  #8 (permalink)  
Antiguo 22/08/2012, 03:12
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 14
Respuesta: div que mueve al resto

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?
  #9 (permalink)  
Antiguo 22/08/2012, 04:08
 
Fecha de Ingreso: noviembre-2011
Mensajes: 103
Antigüedad: 9 años, 7 meses
Puntos: 5
Respuesta: div que mueve al resto

Cita:
Iniciado por ananda Ver Mensaje
¿Alguna idea?
Si. Pon el enlace :) Y si dices que div mueves mejor.
  #10 (permalink)  
Antiguo 22/08/2012, 05:28
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 14
Respuesta: div que mueve al resto

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;
border3px solid #22B14C;
padding-bottom50px;
padding-left10px;
padding-right10px;
padding-top10px;
positionrelative;
left358px;
top37px;
z-index1;
}

#nombre {
margin-left370px;
margin-top: -4px;
}

#cuadromuro{
margin-top: -40px;
}

#todo{
width462px;
z-index3;
positionrelative;
top122px;
left96px;
}

#cajon{
    
background-colorwhite;
    
border3px solid #B4BBCD !important;
    
padding5px;
}

#wall{
     
     
border3px solid #B4BBCD !important; 
    
margin-top20px;
    
background-color#22B14C;
    
padding-right5px;
    
padding-left5px;
    
padding-bottom5px;
    
height350px;
    
overflow:scroll;
}

.
changediv{
background-color#22B14C;
border1px solid green;
colorwhite;
cursorpointer;
font-weightbold;
height30px;
left690px;
positionrelative;
text-aligncenter;
top: -439px;
width412px;
}

.
fotoperfil{
background-colorwhite;
border1px solid green;
height331px;
left690px;
positionrelative;
text-aligncenter;
top: -440px;
width412px;
z-index3;
}


  .
caja{
    
left690px;
    
positionrelative;
    
top: -390px;
    
z-index3;

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 ;)
  #11 (permalink)  
Antiguo 22/08/2012, 11:20
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 8 años, 10 meses
Puntos: 86
Respuesta: div que mueve al resto

Cita:
Iniciado por ananda Ver Mensaje
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;
border3px solid #22B14C;
padding-bottom50px;
padding-left10px;
padding-right10px;
padding-top10px;
positionrelative;
left358px;
top37px;
z-index1;
}

#nombre {
margin-left370px;
margin-top: -4px;
}

#cuadromuro{
margin-top: -40px;
}

#todo{
width462px;
z-index3;
positionrelative;
top122px;
left96px;
}

#cajon{
    
background-colorwhite;
    
border3px solid #B4BBCD !important;
    
padding5px;
}

#wall{
     
     
border3px solid #B4BBCD !important; 
    
margin-top20px;
    
background-color#22B14C;
    
padding-right5px;
    
padding-left5px;
    
padding-bottom5px;
    
height350px;
    
overflow:scroll;
}

.
changediv{
background-color#22B14C;
border1px solid green;
colorwhite;
cursorpointer;
font-weightbold;
height30px;
left690px;
positionrelative;
text-aligncenter;
top: -439px;
width412px;
}

.
fotoperfil{
background-colorwhite;
border1px solid green;
height331px;
left690px;
positionrelative;
text-aligncenter;
top: -440px;
width412px;
z-index3;
}


  .
caja{
    
left690px;
    
positionrelative;
    
top: -390px;
    
z-index3;

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!
  #12 (permalink)  
Antiguo 23/08/2012, 05:04
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 14
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.

Última edición por ananda; 23/08/2012 a las 09:47
  #13 (permalink)  
Antiguo 24/08/2012, 00:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 12 años, 4 meses
Puntos: 306
Respuesta: div que mueve al resto

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #14 (permalink)  
Antiguo 24/08/2012, 02:22
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 14
Respuesta: div que mueve al resto

Cita:
Iniciado por C2am Ver Mensaje
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
  #15 (permalink)  
Antiguo 24/08/2012, 12:49
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 12 años, 4 meses
Puntos: 306
Respuesta: div que mueve al resto

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
  1. <div id="contenedor-seccion">
  2. <div>titulo de seccion</div>
  3. <div>cuerpo de la seccion</div>
  4. <div>pie de la seccion</div>
  5. </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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #16 (permalink)  
Antiguo 24/08/2012, 13:14
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 5 meses
Puntos: 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! :)

Última edición por ananda; 26/08/2012 a las 02:08

Etiquetas: divs, mueve, resto
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 05:35.