Comunidad de diseño web y desarrollo en internet online
Escrito el 01 Dic 2008 04:31 pm
|
Mi problema es el siguiente: http://www.latinmanagers.com/clientes/patios16/singularidad/ tengo ese dise;o que se ve bien en firefox pero necesito que se ve exactamente igual en IE y no encuentro la solucion. Les comento un poco... Es un slideshow generado con el cms concrete 5, las imagenes van cambiando con las propiedades opacity y z-index. la capa que esta sobre ella navbar tiene un z-index de 3, mietras que las otras de 1 y 2. Espero haber sido claro. espero sus respuestas. Muchas gracias |
Por derkaffex
0 de clabLevel
Envíale un mensaje privado Web |
|
Argentina 
|
Escrito el 02 Dic 2008 04:39 pm
|
Ya vi tu problema y ya lo resolvi, primero corrige la distribucion de las etiketas html, en esa pagina k pasaste mira el codigo fuente, la primera etiketa no es <html> esta mas abajo, y tienes dos etiketas <title>, si corriges eso ya tu pagina sale centrada en IE, debes dejar en la primera linea el <html> k tienes mas abajo k es
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> Luego borrar esos <title>Patios 16 :: singularidad</title> <meta name="description" content="" /> que tienes en la primera linea, y debajo de eso hay unos javascript, eso ponlo dentro de las etiketas <head> y segundo en tu css a #navbar cambia el atributo position: relative a position: absolute. Con eso ya se ve bien en IE. Aqui te dejo el codigo con el que yo probe. Mira pegas esto en un html y lo corres y vas a ver que ya se ve bien. Código :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var CCM_ENABLE_BREADCRUMB = false;
var CCM_DISPATCHER_FILENAME = 'http://www.latinmanagers.com/clientes/patios16/singularidad/clientes/patios16/index.php';
var CCM_CID = 24;
var CCM_FEEDBACK = true;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "http://www.latinmanagers.com/clientes/patios16/concrete/images";
var CCM_TOOLS_PATH = "http://www.latinmanagers.com/clientes/patios16/singularidad/clientes/patios16/tools/required";
var CCM_REL = "/clientes/patios16";
</script>
<script type="text/javascript" src="http://www.latinmanagers.com/clientes/patios16/singularidad/clientes/patios16/tools/required/i18n_js"></script>
<script type="text/javascript" src="http://www.latinmanagers.com/clientes/patios16/concrete/js/jquery1.2.6.js"></script>
<script type="text/javascript" src="http://www.latinmanagers.com/clientes/patios16/concrete/js/swfobject2.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Patios 16</title>
<style>
/* CSS Document */
* { margin:0; padding:0; }
body { font-family:Arial, Helvetica, sans-serif; color:#333333; background-color:#FFFFFF; }
#totalContainer { width:860px; margin:0 auto; background-color:#CECECE; }
#container { margin-left:30px; width:800px; background-color:#FFFFFF; }
#header { position:relative; margin-left:30px; background-image:url(http://www.latinmanagers.com/clientes/patios16/themes/patios16_slidex/images/header.png); background-repeat:no-repeat; width:800px; height:69px; z-index:250; }
#header span { float:right; padding-top:25px; color:#989898; font-size:18px; font-family:Verdana, Arial, Helvetica, sans-serif; }
#center { position:relative; margin-left:30px; margin-top:-23px; width:800px; }
/* NAVBAR */
#navbar { position:absolute; float:left; margin-left:-9px; z-index:240; }
#backNavbar { background-image:url(http://www.latinmanagers.com/clientes/patios16/themes/patios16_slidex/images/bk_menu.png); background-repeat:repeat-y; height:450px; }
#navbar ul { margin-left:30px; padding-top:40px; padding-bottom:1.7px; list-style:none inside; }
#navbar ul li { color:#87A231; width:110px; height:30px; margin-left:10px; padding-left:30px; text-decoration:none; border-bottom:1px solid #929290; }
#navbar ul li:hover { background-image:url(http://www.latinmanagers.com/clientes/patios16/themes/patios16_slidex/images/over.png); }
#navbar .nav-selected { background-image:url(http://www.latinmanagers.com/clientes/patios16/themes/patios16_slidex/images/press.png); }
#navbar ul li a { color:#87A231; text-decoration:none; line-height:30px; }
#navbar ul li a:hover { color:#87A231; text-decoration:none; }
#navbar img { margin-left:40px; }
/* NAVBAR */
#slides { position:relative; z-index:20; height:450px; background-image:url(http://www.latinmanagers.com/clientes/patios16/themes/patios16_slidex/images/terraza.jpg); background-repeat:no-repeat; }
#content { color:#3F3F3F; font-family:Arial; font-size:12px; background-color:#E5E5E5; position:relative; width:auto; height:auto; margin-left:250px; text-align:justify; padding:15px 10px; border-bottom:6px solid #6B9200; }
.separator { clear:both; }
</style>
<!--[if lt IE 7]>
<script src="http://www.latinmanagers.com/clientes/patios16/themes/patios16_slidex/ie7/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="totalContainer">
<div id="container">
<div id="header">
</div>
<div id="center">
<div id="navbar">
<div id="backNavbar">
<ul>
<li class="nav-selected">
<a href="#">Singularidad</a>
</li>
<li>
<a href="#">Composicion</a>
</li>
<li>
<a href="#">Espacios</a>
</li>
<li>
<a href="#">Paseo virtual</a>
</li>
</ul>
<ul>
<li>
<a href="#">Showroom</a>
</li>
<li>
<a href="#">Contacto</a>
</li>
</ul>
</div>
<img src="http://www.latinmanagers.com/clientes/patios16/themes/patios16_slidex/images/marcaRA.png" alt="RR+a" />
</div>
<div id="slides">
<script>
var ccmSlideShowHelper145 = {
bID:145,
imgNum:0,
init:function(){
this.displayWrap=$('#ccm-SlideshowBlock-display'+this.bID);
if(this.imgInfos.length==0){
//alert('There are no images in this slideshow');
return false;
}
var minHeight=0;
for(var i=0;i<this.imgInfos.length;i++){
this.addImg(i);
if(minHeight==0 || this.imgInfos[i].imgHeight<minHeight)
minHeight=this.imgInfos[i].imgHeight;
}
this.displayWrap.css('height',minHeight);
/*
//center images
for(var i=0;i<this.imgInfos.length;i++){
alert(this.imgInfos[i].imgHeight+' '+minHeight);
if( this.imgInfos[i].imgHeight>minHeight ){
var t=((this.imgInfos[i].imgHeight-minHeight)/2)*-1
alert(t);
this.imgEls[i].css('top',t);
}
}
*/
this.nextImg();
},
nextImg:function(){
if(this.imgNum>=this.imgInfos.length) this.imgNum=0;
this.imgEls[this.imgNum].css('opacity',0);
this.imgEls[this.imgNum].css('display','block');
this.imgEls[this.imgNum].animate({opacity:1},
this.imgInfos[this.imgNum].fadeDuration*1000,'',function(){ccmSlideShowHelper145.preparefadeOut()});
var prevNum=this.imgNum-1;
if(prevNum<0) prevNum=this.imgInfos.length-1;
if(this.imgInfos.length==1) return;
this.imgEls[prevNum].animate({opacity:0},this.imgInfos[this.imgNum].fadeDuration*800,function(){this.style.zIndex=1;});
},
preparefadeOut:function(){
if(this.imgInfos.length==1) return;
var milisecDuration=parseInt(this.imgInfos[this.imgNum].duration)*1000;
this.imgEls[this.imgNum].css('z-index',2);
this.imgEls[this.imgNum].css('display','');
setTimeout('ccmSlideShowHelper'+145+'.nextImg();',milisecDuration);
this.imgNum++;
},
maxHeight:0,
imgEls:[],
addImg:function(num){
var el=document.createElement('div');
el.id="slideImgWrap"+num;
el.className="slideImgWrap";
if(this.imgInfos[num].fullFilePath.length>0)
imgURL=this.imgInfos[num].fullFilePath;
else imgURL='http://www.latinmanagers.com/clientes/patios16/singularidad/clientes/patios16/files/'+this.imgInfos[num].fileName;
//el.innerHTML='<img src="'+imgURL+'" >';
el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; background:url('+imgURL+') center no-repeat"> </div>';
//alert(imgURL);
if(this.imgInfos[num].url.length>0) {
//el.linkURL=this.imgInfos[num].url;
var clickEvent='onclick="return ccmSlideShowHelper145.imgClick( this.href );"';
el.innerHTML='<a href="'+this.imgInfos[num].url+'" '+clickEvent+' >'+el.innerHTML+'</a>';
}
el.style.display='none';
this.displayWrap.append(el);
var jqEl=$(el);
this.imgEls.push(jqEl);
},
imgClick:function(linkURL){
//override for custom behavior
},
imgInfos:[
{
fileName:"15751228143837ventanas.jpg",
fullFilePath:"",
duration:5,
fadeDuration:2,
url:"",
groupSet:0,
imgHeight:450 }
, {
fileName:"73141228143850home.jpg",
fullFilePath:"",
duration:5,
fadeDuration:2,
url:"",
groupSet:0,
imgHeight:450 }
, {
fileName:"22901228143865plaza.jpg",
fullFilePath:"",
duration:5,
fadeDuration:2,
url:"",
groupSet:0,
imgHeight:450 }
, {
fileName:"45301228143881terraza.jpg",
fullFilePath:"",
duration:5,
fadeDuration:2,
url:"",
groupSet:0,
imgHeight:450 }
]
}
$(function(){ccmSlideShowHelper145.init()});
</script>
<style>
.ccm-SlideshowBlock-display{ position:relative; width:100%; height:auto; }
.ccm-SlideshowBlock-display .slideImgWrap{ position:absolute; width:100%; height:auto; top:0px; left:0px; }
</style>
<div id="ccm-SlideshowBlock-display145" class="ccm-SlideshowBlock-display">
<div id="ccm-SlideshowBlock-heightSetter145" class="ccm-SlideshowBlock-heightSetter"></div>
<div class="ccm-SlideshowBlock-clear" ></div>
</div>
</div>
<div id="content">
<p><span style="font-size: large;">Un nuevo concepto en arquitectura</span></p>
<p> </p>
<p>Patios 16 es un complejo diferente, en una cuidad diferente. Un proyecto que apuesta a la naturaleza, al diseño y al confort en cada uno de sus espacios, tanto interiores como exteriores. Un edificio bioclimático compuesto por verdaderas casas en altura, con interiores plenos de luz, espacio y diseño que siempre miran hacia el verde. Dos torres se separan por una plaza de 16 m; pulmón principal del proyecto; donde habitan diferentes especies arbóreas seleccionadas para lograr el equilibrio justo entre árboles y plantas en las cuatro estaciones, además de garantizar la privacidad de cada ambiente. Estas especies serán mantenidas por un sistema de riego, abastecido por un reservorio que acoge el agua de lluvia de las cubiertas. A su vez cada una de las torres gira en torno a su propio pulmón verde, con jardines colgantes que permiten la salida del aire caliente e inundan de luz y verde a cada espacio interior. Ascensores hidráulicos ultra silencioso de bajo consumo energético; gracias a su transparencia; siguen el recorrido vertical del verde llegando hasta la terraza donde se ubica el área de parrillas y un gran espejo de agua, desde donde se pueden apreciar las mejores vistas de la ciudad. El complejo cuenta con departamentos de un dormitorio, de dos dormitorios y de cuatro, además de una casa, un local y diez cocheras para vehículos. Los interiores de las diferentes unidades presentan una distribución funcional y muestran en cada espacio un toque personalizado, a través del color, del mobiliario o de los revestimientos. De esta forma presentamos un nuevo concepto de “Habitar”, pensando en el hombre, en la naturaleza y en una arquitectura que estudia la mejor forma de convivencia entre ambos.</p> </div>
</div>
</div>
</div>
</body>
</html>
|
Por drarock Claber  705 de clabLevel
3 tutoriales
Envíale un mensaje privado Web |
|
Lima, Peru 
|
Escrito el 02 Dic 2008 04:40 pm
|
Ahh puse el css dentro del mismo HTML para yo probar, pero tu solo has la correccion en tu propio css.
|
Por drarock Claber 705 de clabLevel
3 tutoriales
Envíale un mensaje privado Web |
|
Lima, Peru
|
Escrito el 02 Dic 2008 04:41 pm
|
Ah y tambien tuve k colocar unas rutas absolutas a los archivos para poder probar, tu solo sigue las indicaciones que te di mas arriba para corregir el codigo, con eso ya debe estar.
|
Por drarock Claber 705 de clabLevel
3 tutoriales
Envíale un mensaje privado Web |
|
Lima, Peru
|
