Foros del Web » Creando para Internet » CSS »

El div se me mueve..

 Estas en el tema de El div se me mueve.. en el foro de CSS en Foros del Web. Buenas, primero que nada, os dejo el código: Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...
  #1 (permalink)  
Antiguo 26/02/2011, 14:02
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
El div se me mueve..
Buenas, primero que nada, os dejo el código:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Super Mario Website</title>
<style type="text/css">
#contenedor {
background-color: #FFF;
width: 1024px;
}
#news {
width: 823px;
float: left;
}
#menu2 {
float: right;
width: 201px;
}
#news2header {
float: left;
width: 410px;
}
#news2hd {
width: 413px;
}
#news2hd2 {
width: 410px;
}
.news2bg {
background-image: url(imagenes/bgnews1.png);
width: 410px;
}
#news2bg {
background-image: url(imagenes/bgnews1.png);
width: 410px;
}
#news3header {
width: 823px;
}
#news3bg {
background-image: url(imagenes/bgnews2.png);
width: 823px;
}
#news3ft {
width: 823px;
}
#news3content {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
width: 775px;
margin-left: 26px;
}
#news2bg2 {
background-image: url(imagenes/bgnews1_2.png);
width: 410px;
}
#news2ft {
width: 410px;
}
#news2ft2 {
width: 413px;
}
#news2content {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: italic;
font-weight: bold;
color: #FFF;
width: 255px;
margin-left: 130px;
margin-top: 0px;
margin-bottom: 0px;
}
#news2content2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #FFF;
text-decoration: underline;
width: 255px;
margin-top: 0px;
margin-left: 30px;
}
#news2header2 {
float: right;
width: 413px;
}
#contenido {
width: 1024px;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#relleno {
width: 823px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 5px;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="header"><img src="imagenes/logo.jpg" width="1024" height="224" /></div>
<div id="menu"><img src="imagenes/barmenu_1.png" width="224" height="49" /><img src="imagenes/barmenu_2.png" width="313" height="49" /><img src="imagenes/barmenu_3.png" width="230" height="49" /><img src="imagenes/barmenu_4.png" width="256" height="48" /></div>
<div id="contenido">Colocar aquí el contenido para id "contenido"
<div id="news">
<div id="news2header">Colocar aquí el contenido para id "news2header"
<div id="news2hd"><img src="imagenes/news1_1.png" width="410" height="42" /></div>
<div id="news2bg">
<div id="news2content">Colocar aquí el contenido para id "news2content"</div>
</div>
<div id="news2ft"><img src="imagenes/ftnews1.png" width="410" height="17" /></div>
</div>
<div id="news2header2">Colocar aquí el contenido para id "news2header2"
<div id="news2hd2"><img src="imagenes/news1_2.png" width="413" height="42" /></div>
<div id="news2bg2">
<div id="news2content2">Colocar aquí el contenido para id "news2content2"</div>
</div>
<div id="news2ft2"><img src="imagenes/ftnews1_2.png" width="413" height="17" /></div>
</div>
</div>
</div>
<div id="menu2">Colocar aquí el contenido para id "menu2"</div>
<div id="relleno">Colocar aquí el contenido para id "relleno"</div>
<div id="news2">
<div id="news3header">Colocar aquí el contenido para id "news3header"<img src="imagenes/news2_header.png" width="823" height="40" /></div>
<div id="news3bg">
<div id="news3content">Colocar aquí el contenido para id "news3content"</div>
</div>
<div id="news3ft"><img src="imagenes/ftnews2.png" width="823" height="52" /></div>
</div>
<div id="footer"><img src="imagenes/footer1.png" width="1024" height="68" /><img src="imagenes/footer2.png" width="1024" height="132" /></div>
</div>
</body>
</html>
Vereis, lo que ocurre es lo siguiente: Yo quiero que justo encima del div "news3header" haya un div que se llame relleno, de la misma anchura o similar, simplemente para que haya un hueco blanco desde los divs "news2ft" y "news2ft2" hasta abajo, entre los dos anteriores y "news3header" pero lo que ocurre es que el div se me va hacia la derecha, toma el tamaño y se sitúa debajo del div "menu2" el cual no tiene nada que ver... ¿Alguno sabe como corrijo esto?

Saludos y gracias!
  #2 (permalink)  
Antiguo 26/02/2011, 14:06
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: El div se me mueve..
No hace falta, y no es recomendable, usar un div vacío para generar un espacio entre div, para eso están las propiedades del css
Por ejemplo le puedes poner al news3header en su css, un margin-top con la distancia que quieres que quede de los otros que están arriba de él.
Ejemplo: margin-top:100px;

Más ayuda en:
www.librosweb.es
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 26/02/2011, 14:30
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: El div se me mueve..
Gracias por responder pero a veces el margin-X no me funciona, es decir, hay veces que me funciona bien en left-right-bottom pero a lo mejor en top ponga lo que ponga no me cambia.. De todas formas esta vez me sirvió pero para el futuro me gustaría saber por qué ocurre...

Y, hay un error muy claro y es que si uso el "margin-top", como por ejemplo en este código:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Super Mario Website</title>
<style type="text/css">
#contenedor {
background-color: #FFF;
width: 1024px;
}
#news {
width: 823px;
float: left;
}
#menu2 {
float: right;
width: 201px;
}
#menu2hd {
width: 201px;
}
#menu2bg {
background-image: url(imagenes/bgmenu2.png);
width: 201px;
}
#menu2ft {
width: 201px;
}
#menu2content {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
color: #FFF;
text-decoration: line-through;
width: 175px;
margin-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-shadow: 0.1em 0.1em #333
}
#contentstrong {
width: 823px;
}
#news2header {
float: left;
width: 410px;
}
#news2hd {
width: 413px;
}
#news2hd2 {
width: 410px;
}
#news2bg {
background-image: url(imagenes/bgnews1.png);
width: 410px;
}
#news3header {
width: 823px;
}
#relleno {
}
#news3bg {
background-image: url(imagenes/bgnews2.png);
width: 823px;
}
#news3ft {
width: 823px;
}
#news3content {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
width: 775px;
margin-left: 26px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
#contentnews {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #CCC;
width: 755px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
text-shadow: 0.1em 0.1em #333;
margin-left: 0px;
}
#news2bg2 {
background-image: url(imagenes/bgnews1_2.png);
width: 410px;
}
#news2ft {
width: 410px;
}
#news2ft2 {
width: 413px;
}
#news2content {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: italic;
font-weight: bold;
color: #FFF;
width: 255px;
margin-left: 130px;
margin-top: 0px;
margin-bottom: 0px;
}
#news2content2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #FFF;
text-decoration: underline;
width: 255px;
margin-top: 0px;
margin-left: 30px;
}
#news2header2 {
float: right;
width: 413px;
}
#contenido {
width: 1024px;
}
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.relleno {
width: 823px;
float: left;
margin-top: 15px;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="header"><img src="imagenes/logo.jpg" width="1024" height="224" /></div>
<div id="menu"><img src="imagenes/barmenu_1.png" width="224" height="49" /><img src="imagenes/barmenu_2.png" width="313" height="49" /><img src="imagenes/barmenu_3.png" width="230" height="49" /><img src="imagenes/barmenu_4.png" width="256" height="48" /></div>
<div id="contenido">
<div class="relleno"> </div>
<div id="news">
<div id="news2header">
<div id="news2hd"><img src="imagenes/news1_1.png" width="410" height="42" /></div>
<div id="news2bg">
<div id="news2content">Colocar aquí el contenido para id "news2content"</div>
</div>
<div id="news2ft"><img src="imagenes/ftnews1.png" width="410" height="17" /></div>
</div>
<div id="news2header2">
<div id="news2hd2"><img src="imagenes/news1_2.png" width="413" height="42" /></div>
<div id="news2bg2">
<div id="news2content2">Colocar aquí el contenido para id "news2content2"</div>
</div>
<div id="news2ft2"><img src="imagenes/ftnews1_2.png" width="413" height="17" /></div>
</div>
</div>
</div>
<div id="menu2">
<div id="menu2hd"><img src="imagenes/menu2.png" width="201" height="42" /></div>
<div id="menu2bg">
<div id="menu2content">· Inicio<br />
· Descargas<br />
· Eventos Glóbales<br />
· Quiénes somos
</div>
</div>
<div id="menu2ft"><img src="imagenes/ftmenu2.png" width="187" height="46" /></div>
</div>
<div id="news2">
<div id="news3header">
<div class="relleno"> </div>
<img src="imagenes/news2_header.png" width="823" height="40" /></div>
<div id="news3bg">
<div id="news3content">
<div id="contentnews">Colocar aquí el contenido para id "contentnews"<br />
Colocar aquí el contenido para id &quot;contentnews&quot;<br />
Colocar aquí el contenido para id &quot;contentnews&quot;<br />
Colocar aquí el contenido para id &quot;contentnews&quot; </div>
</div>
</div>
<div id="news3ft"><img src="imagenes/ftnews2.png" width="823" height="52" /></div>
</div>
<div id="footer"><img src="imagenes/footer1.png" width="1024" height="68" /><img src="imagenes/footer2.png" width="1024" height="132" /></div>
</div>
</body>
</html>
En el div "contentnews" he puesto el margin-top a 15px pero si lo hago el fondo que está justo detrás se me corta, osea, no sigue sino que se corta y me aparece un espacio blanco.. Y no consigo solucionarlo, alguna solución?

Saludos y gracias por responder!
  #4 (permalink)  
Antiguo 26/02/2011, 15:22
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: El div se me mueve..
Veo que sufres de divitis aguda.

En vez de margin-top a contentnews, dale un padding-top a news3bg.
Pero me parece que deberías replantear un poco más simple la estructura de la página, algunos de esos div se podrían unificar por ejemplo: <div id="news3bg">
<div id="news3content"> en <div id=zonanews> o algo parecido ya que tienes un div unicamente para poner un fondo, lo cual no tiene mucho sentido, ya que se lo podrías poner directamente a news3content.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 26/02/2011, 16:23
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: El div se me mueve..
Muchas gracias por responder. Si tengo un div para cada fondo es porque luego a la hora de poner texto y centrarlo o moverlo 15px también se me suele estirar el fondo :\

Etiquetas: mueve
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:36.