Foros del Web » Creando para Internet » CSS »

Ayuda con div uno encima de otro

Estas en el tema de Ayuda con div uno encima de otro en el foro de CSS en Foros del Web. Se me rompe todo todito,por más que le doy vueltas y miro ejemplos en otras web y comentarios en otros sitios no lo consigo,no se ...
  #1 (permalink)  
Antiguo 24/05/2008, 12:46
 
Fecha de Ingreso: diciembre-2007
Mensajes: 200
Antigüedad: 10 años
Puntos: 10
Ayuda con div uno encima de otro

Se me rompe todo todito,por más que le doy vueltas y miro ejemplos en otras web y comentarios en otros sitios no lo consigo,no se como hacerlo,alguien me hecha un cable?

En internet explorer más o menos se ve bien,pero en firefox es un desastre,asi no acabo la web en un año que llevo ya por lo menos,jjaa

Pongo el codigo porque no me deja poner enlaces
http://www.uluwatumultimedia.com/pruebas/index.html
http://www.uluwatumultimedia.com/pruebas/css.css

Código:
<!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>Diseño Paginas Web Valencia</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
<div id="apDiv1">Diseñamos su página web.<br />
Css,Xhtml,Php,Action Script.</div>
<div id="apDiv2">
  <h2><img src="img/header_gr.png" width="11" height="10" /> Nunca fue tan <span class="header_gr">fácil</span> actualizar una <span class="header_gr">página web</span>.<br />
      <img src="img/header_blue.png" width="11" height="10" /> En <span class="header_bl">cualquier</span> lugar,<span class="header_bl">rápido</span> y <span class="header_bl">comodo</span>.</h2>
</div>
</div>


<div id="middle">
<div id="middle1">
  <div id="middle11"><img src="img/middle_izq.png" width="125" height="42" /></div>
<div id="middle12">
  <div id="apDiv3"><a href="index.html"><img src="img/middle_icon.png" width="19" height="19" /></a> Ud. se encuentra en //..<span class="encuentro">INICIO</span></div>
</div>
</div>
<div id="middle2"><a href="index.html"><img src="img/button_inicio.png" alt="Ir a página de inicio" width="65" height="42" /></a><a href="trabajos.html"><img src="img/button_trabajos.png" alt="Nuestros trabajos realizados" width="97" height="42" /></a><a href="paginaweb.html"><img src="img/button_servicios.png" alt="Que ofrecemos" width="95" height="42" /></a><a href="servidores.html"><img src="img/button_servidores.png" alt="Aloje su web en nuestros servidores" width="110" height="42" /></a><a href="presupuesto.html"><img src="img/button_presupuesto.png" alt="Pida su presupuesto sin compromiso" width="127" height="42" /></a><a href="contacto.html"><img src="img/button_contacto.png" alt="Contacte con nosotros" width="94" height="42" /></a></div>
</div>
<div id="middle_down">
<div id="middle_down1"></div>
<div id="middle_down2"></div>
</div>

<div id="down">
<div id="down1"><img src="img/botton_izq.png" width="130" height="111" /></div>
<div id="down2"></div>
</div>
<div id="prefooter"></div>
<div id="footer">
  <div id="footer_content">
    <div id="footer_1"><span class="footer_gr">Uluwatu Multimedia</span> <span class="footer_nr">-</span> <span class="footer_bl">NIF: 24359209R</span><br />
      <span class="footer_nr">C/Pedro Cabanes nº59 - Bajo C - 46019 - Valencia</span><br />
    <br />
    <img src="img/contacto_footer.jpg" alt="Información de contacto" width="264" height="22" /><br /></div>
      <div id="footer_2"><span class="footer_nr">Copyright 2008</span> <span class="footer_gr">Uluwatu Multimedia</span><br />
        <span class="footer_bl">www.uluwatumultimedia.com - www.4webs.es</span><br />
        <span class="footer_nr">All right reserved</span><br />
        <a href="#" target="_blank"><img src="img/rss_footer.jpg" alt="Novedades" width="16" height="17" /></a><span class="footer_rss">RSS</span> <img src="img/ok_footer.jpg" width="16" height="17" /><span class="footer_xhtml">XHTML</span> <img src="img/ok_footer.jpg" width="16" height="17" /><span class="footer_css">CSS</span><br />
    </div>
  </div>
</div>
</body>
</html>
Código:
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #1A1A1A;
	font-size: 12px;
	margin: 0px;
}
#footer #footer_content {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}
#footer #footer_content #footer_1 {
	width: 400px;
	text-align: left;
	float: left;
	margin-top: 15px;
}
#footer #footer_content #footer_2 {
	width: 400px;
	float: right;
	text-align: right;
	margin-top: 15px;
}
.footer_gr {
	color: #80b020;
	font-size: 10px;
}
.footer_bl {
	font-size: 10px;
	color: #424242;
}
.footer_nr {
	font-size: 10px;
}
.footer_rss {
	color: #80b020;
	font-size: 10px;
	font-weight: bold;
}
.footer_xhtml {
	color: #ff6600;
	font-size: 10px;
	font-weight: bold;
}
#middle {
	width: 1142px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	height: 42px;
}
#down {
	width: 1142px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	height: 111px;
	background-position: right;
}
#down #down1 {
	width: 130px;
	float: left;
	margin-left: 6px;
}
#down #down2 {
	float: right;
	width: 900px;
	background-image: url(img/down_bg.png);
	background-repeat:  repeat-x;
	height: 111px;
	margin-right: 106px;
}


#middle_down {
	width: 1142px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#prueba {
	background-color: #00FF00;
	margin-top: 150px;
}

#middle_down #middle_down1 {
	width: 42px;
	background-color: #FFFFFF;
	margin-left: 81px;
	float: left;
	height: 400px;
}
#middle_down #middle_down2 {
	width: 905px;
	float: right;
	background-color: #FF0000;
	margin-right: 105px;
	height: 400px;
}


#middle #middle1 {
	width: 438px;
	float: left;
	height: 42px;
}
#middle #middle2 {
	width: 704px;
	float: right;
	height: 42px;
}
#middle #middle1 #middle11 {
	width: 125px;
	float: left;
	height: 42px;
}
#middle #middle1 #middle12 {
	float: right;
	width: 313px;
	height: 42px;
	background-image: url(img/middle_bg.png);
	background-repeat:  repeat-x;
}
#middle #middle1 #middle12 #apDiv3 {
	color: #FFFFFF;
position:absolute;
	left:148px;
	top:7px;
	width:282px;
	height:24px;
	z-index:1;
}
.encuentro {
	color: #c7ff58;
}
h2 {
	font-size: 14px;
	color: #212121;
	margin: 0px;
	font-weight: normal;
}


#prefooter {
	background-image: url(img/footer_backgroundpre.jpg);
	height: 26px;
	position: relative;
	left: 297px;
	width: 1142px;
	margin-right: auto;
	margin-left: auto;
	background-position: center;
}
#prefooter2 {
	background-image: url(img/footer_boxs.jpg);
	height: 199px;
	width: 955px;
	margin-right: auto;
	margin-left: auto;
}

.footer_rss {
	color: #80b020;
}
img {
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

.footer_css {
	color: #008aff;
	font-size: 10px;
	font-weight: bold;
}

#footer {
	background-image: url(img/footer_background.jpg);
	background-repeat:  repeat-x;
	height: 98px;
	background-color: #1A1A1A;
}
#header {
	width: 1142px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(img/header.png);
	height: 256px;
	position: relative;

}
#header #apDiv1 {
	font-size: 10px;
	position:absolute;
	left:857px;
	top:69px;
	width:169px;
	height:53px;
	z-index:1;
}
#header #apDiv2 {
	color: #212121;
	position:absolute;
	left:633px;
	top:147px;
	width:368px;
	height:50px;
	z-index:1;
	text-align: right;
}
.header_gr {
	color: #80b020;
}
.header_bl {
	color: #1b78cf;
}

El problema es que ya me estoy empezando a liar con las relativas y las absolutas,digamos que no he tenido problemas hasta que he llegado al final de menu a partir de ahi,todo malamente.La idea era que la parte en rojo fuera elastica para meter ahi el contenido y el resto fijo
  #2 (permalink)  
Antiguo 24/05/2008, 15:06
 
Fecha de Ingreso: diciembre-2007
Mensajes: 200
Antigüedad: 10 años
Puntos: 10
Respuesta: Ayuda con div uno encima de otro

He conseguido arreglarlo casi todo em Internet explorer va perfecto,pero en firefox a partir del <div id="footer"> no se ve correctamente alguien me puede decir porque?se sube el contenido de ese div y el anterior arriba de la pagina cuando tiene que estar abajo
  #3 (permalink)  
Antiguo 24/05/2008, 18:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con div uno encima de otro

Prueba añadiendo una propiedad clear: both a tu selector #prefooter:

#prefooter {
background-image: url(img/footer_backgroundpre.jpg);
height: 26px;
position: relative;
width: 1052px;
margin-right: auto;
margin-left: auto;
clear: both;
}

Mikel.
  #4 (permalink)  
Antiguo 25/05/2008, 04:41
 
Fecha de Ingreso: diciembre-2007
Mensajes: 200
Antigüedad: 10 años
Puntos: 10
Respuesta: Ayuda con div uno encima de otro

No conocia la propieda both:clear,maravilloso
En IE7 perfecto
En Firefox perfecto

En IE6 nada,no funciona bien ,muy mal ahi ya que se ve cada div uno encima de otro y totalmente desmonatado.

Es normal o se podria solucionar?
  #5 (permalink)  
Antiguo 25/05/2008, 05:07
 
Fecha de Ingreso: diciembre-2007
Mensajes: 200
Antigüedad: 10 años
Puntos: 10
Respuesta: Ayuda con div uno encima de otro

Lo he solucionado con
display: inline;

Y solo me falta por solucionar que los png se vean correctamente en IE6,si alguien sabe algo se agradece,comienzo a buscar...
  #6 (permalink)  
Antiguo 25/05/2008, 05:15
Avatar de Antonito  
Fecha de Ingreso: noviembre-2001
Ubicación: en la red
Mensajes: 446
Antigüedad: 16 años
Puntos: 3
Respuesta: Ayuda con div uno encima de otro

filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='tu foto.png')

añadaselo a css de la imagen. Pj:

img src="img/botton_izq.png" style="filter:progid:DXImageTransform.Microsoft.Al phaImageLoader(src='tu foto.png')"
__________________
Pancho - Consultor de usabilidad
  #7 (permalink)  
Antiguo 25/05/2008, 05:32
 
Fecha de Ingreso: diciembre-2007
Mensajes: 200
Antigüedad: 10 años
Puntos: 10
Respuesta: Ayuda con div uno encima de otro

No me funciona,

<img src="img/botton_izq.png" style="filter:progid:DXImageTransform.Microsoft.Al phaImageLoader(src='img/botton_izq.png')"/>

Lo he probado asi y creando una clase en la css pero tampoco
  #8 (permalink)  
Antiguo 25/05/2008, 05:36
Avatar de Antonito  
Fecha de Ingreso: noviembre-2001
Ubicación: en la red
Mensajes: 446
Antigüedad: 16 años
Puntos: 3
Respuesta: Ayuda con div uno encima de otro

uy perdona... http://www.webmasterlibre.com/2006/1...et-explorer-6/

Un ejemplo para descargar en zip: http://www.twinhelix.com/css/iepngfix/

Tienes que poner el htc.
__________________
Pancho - Consultor de usabilidad
  #9 (permalink)  
Antiguo 25/05/2008, 10:27
 
Fecha de Ingreso: diciembre-2007
Mensajes: 200
Antigüedad: 10 años
Puntos: 10
Respuesta: Ayuda con div uno encima de otro

Sigue sin funcionarme,estoy probando la libreria de IE7 pero no consigo hacerla funcionar tampoco
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 00:09.