problema del float en explorer

[Dnielf]

Hola, tengo un problema con una maquetación. Resulta que funciona a la perfección en exploradores como Firefox, Chrome y Opera; sin embargo, como siempre, en Explorer no.

El objetivo es hacer que ese cuadro rojo quede en forma de L invertida y el logo ,que vendria a ser "S", ubicandose sobre la parte ya mencionada.

Acá esta la página:

http://www.softudio.110mb.com/

Ayúdenme por favor.

[Dnielf]

alguien me ayuda?

[willyfc]

el problema que tienes es de medidas, estas marqueteando mal, no debes utilizar 1000px de ancho, por que imaginate que alguien esta viendo tu web con una configuración de 800 x 600, apareceran los scrolls habidos y por haber, si quieres que tu web aparezca en toda la ventana del navegador tienes que trabajarla en porcentajes. por ejemplo de esta manera: http://www.araudi.net/ejemplos/3columnas.html

[Calizman]

Fijate que... veo tu pagina y trato de entender lo que quieres, pero... aun no entiendo que es lo que quieres!

La parte ya mencionada? cual es la parte mencionada?
Si lo que quieres es que tu logo se quede dentro de el cuadro rojo, simplemente hay que anidarlo, veo que tienes un div solo para el logo, que no lo veo mal, pero no lo veo necesario.

Simplemente puedes hacer un header, y ahi poner como background una imagen que contenga tu logo. Bajo ese header, puedes poner dos columnas, y tu web quedara perfecta!

[willyfc]

mira la verdad que yo no te entiendo muy bien, pero lo que te decía en mi anterior post es que tienes todo mal estructurado por ejemplo modifique un poco el contenido, checkalo haber si te sirve para mejorarlo, ahh y lo que te digo de los 1000px y que no debes utilizarlo, puedes probarlo haciendo mas chica la ventana de tu navegador para que veas el efecto, ojo no adaptes el código, copialo y pegalo en un archivo nuevo para ver si es lo que necesitas:

Código:

body{color:#fff}
.corte{clear:both}
#contenido{ width:100%; height:100%; margin:0 auto; overflow:auto; background:#336613}
#col_der, #col_izq{height: 100%; margin:5px}
#col_der {float: right; width: 200px; width:65%;}
#col_izq {float: left; width: 200px;background-color: #CC0000; width:30%}

.textos{padding:15px; color:#fff; text-align:justify;}

/*contenido de la columna derecha*/
#verde_superior{ width:100%; height:auto; display:table; background:#009933}
#verde_oscuro_uno{ float:left; width:49%; height:auto;background:#333300;margin:10px 1px 0 0}
#verde_oscuro_dos{ float:right; width:49%; height:auto; background:#333300; margin:10px 0 0 0}
#logo{ width:70px; height:70px; float:left; text-align:center; background:#999900;}

Código HTML:

<div id="contenido">
	<div id="col_izq">
		<div class="textos">
			<div id="logo"><h1>S</h1></div>
			In non turpis vel felis fermentum luctus. Pellentesque ac nibh. Ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam luctus mi vel quam. Mauris sapien. Fusce feugiat condimentum sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec orci. Ut pharetra. Donec faucibus pede ac nisl. Nam pulvinar, metus sit amet euismod auctor, metus purus porttitor tellus, et hendrerit quam mi eget velit. Phasellus risus mauris, commodo sed, accumsan in, porttitor id, augue. Phasellus vehicula eros eget sem. Vestibulum aliquam tincidunt augue. Duis vel nisi a sapien volutpat viverra. Curabitur iaculis turpis sed lacus. Sed vestibulum dictum urna. Nulla sit amet diam.
		</div>
	</div>
	<div id="col_der">
		<div id="verde_superior">
			<div class="textos">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel tellus. Vivamus bibendum, massa eu commodo egestas, turpis erat mattis tellus, suscipit eleifend libero turpis nec libero. Praesent luctus gravida turpis. Duis ornare mollis sem. Praesent facilisis tincidunt pede. Fusce ac urna. Nulla placerat ultricies purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget nisl a nisl scelerisque pharetra. Ut sed elit in tortor varius suscipit. Vestibulum pretium, est et suscipit fringilla, arcu risus placerat magna, vel porta mi tellus at arcu. Praesent eget mi vitae sem gravida rutrum. Donec sollicitudin. Integer consequat ullamcorper turpis. In nisi nunc, imperdiet quis, aliquam in, porta sit amet, est. Etiam consequat suscipit enim.
			</div>
		</div>
		<div id="verde_oscuro_uno">
			<div class="textos">
				In non turpis vel felis fermentum luctus. Pellentesque ac nibh. Ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam luctus mi vel quam. Mauris sapien. Fusce feugiat condimentum sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec orci. Ut pharetra. Donec faucibus pede ac nisl. Nam pulvinar, metus sit amet euismod auctor, metus purus porttitor tellus, et hendrerit quam mi eget velit. Phasellus risus mauris, commodo sed, accumsan in, porttitor id, augue. Phasellus vehicula eros eget sem. Vestibulum aliquam tincidunt augue. Duis vel nisi a sapien volutpat viverra. Curabitur iaculis turpis sed lacus. Sed vestibulum dictum urna. Nulla sit amet diam.
			</div>
		</div>
		<div id="verde_oscuro_dos">
			<div class="textos">
				In non turpis vel felis fermentum luctus. Pellentesque ac nibh. Ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam luctus mi vel quam. Mauris sapien. Fusce feugiat condimentum sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec orci. Ut pharetra. Donec faucibus pede ac nisl. Nam pulvinar, metus sit amet euismod auctor, metus purus porttitor tellus, et hendrerit quam mi eget velit. Phasellus risus mauris, commodo sed, accumsan in, porttitor id, augue. Phasellus vehicula eros eget sem. Vestibulum aliquam tincidunt augue. Duis vel nisi a sapien volutpat viverra. Curabitur iaculis turpis sed lacus. Sed vestibulum dictum urna. Nulla sit amet diam.
			</div>
		</div>
		<div class="corte"></div>
	</div>
	<div class="corte"></div>
</div> 

espero te sirva de algo..

[willyfc]

por si acaso use este doctype

Código HTML:

<!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"> 

[Dnielf]

mira quiero hacer algo así:

http://img141.imageshack.us/my.php?image=maqueteadomy4.jpg

(creo que ya está, lo malo es que en iexplorer se sale una parte mal)

Y willyfc gracias por tu respuesta, voy a probar como me has dicho

------------------------------

gracias, no actualicé la pag. y respondí, voy a chequear tus respuestas

Gracias !

[Dnielf]

he aplicado tu código pero lo que yo quiero es que al achicar la ventana no se me achique también la página.

Lo puse con píxeles para una resolucion de 1024*768 porque no creo que la gente use resoluciones de 800*600.



Ese es el bendito problema del iexplorer, ese espacio en blanco

Ayúdenme por favor. Gracias

[willyfc]

mira hice unos cambios, espero que este si te sirva lo probé en IE6, Chrome,ff y si funciona para otros navegadores quizá tengas que hacer unos ajustes pero no creo, copialo y pegalo en tu editor y me avisas, como te digo a mi si me funciona y con dtd stric y transitional, creo que es la mejor solución y si aunque no lo creas hay gente que utiliza 800x600 aunque sea por problemas de vista pero si hay personas que lo utilizan además que como buen programador web tienes que mantener estandares y ese es uno, bueno aquí va el código:

Código:

body{color:#fff}
.corte{clear:both}
#contenido{ width:100%; height:100%; margin:0 auto; overflow:auto; background:#336613; position:relative}
#header{ width:100%; height:50px; margin:0 auto;background:#FFCCCC}
#header_centro{ background:#FFCCCC; float:left; margin:0 0 0 9%; height:50px; width:61%;_width:50%;}
#header_derecha{ background:#CC9900; float:right;height:50px; width:30%;}
#col_der, #col_izq{height: 100%; margin:0 5px 5px 5px}
#col_der {float: right; width: 200px; width:65%;}
#col_izq {float: left; width: 200px;background-color: #CC0000; width:30%}

.textos{padding:15px; color:#fff; text-align:justify;}

/*contenido de la columna derecha*/
#verde_superior{ width:100%; height:auto; display:table; background:#009933}
#verde_oscuro_uno{ float:left; width:49%; height:auto;background:#333300;margin:10px 1px 0 0}
#verde_oscuro_dos{ float:right; width:49%; height:auto; background:#333300; margin:10px 0 0 0}
#relleno_logo{ width:80px; height:22px; float:left;}
#logo{ width:90px; height:90px; float:left; text-align:center; background:#999900; position:absolute; top:0;}

Código HTML:

<div id="contenido">
<div id="logo"></div>
<div id="header">
	<div id="header_centro"></div>
	<div id="header_derecha"></div>
</div>
	<div id="col_izq">
		<div class="textos">
			<div id="relleno_logo"></div>
			In non turpis vel felis fermentum luctus. Pellentesque ac nibh. Ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam luctus mi vel quam. Mauris sapien. Fusce feugiat condimentum sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec orci. Ut pharetra. Donec faucibus pede ac nisl. Nam pulvinar, metus sit amet euismod auctor, metus purus porttitor tellus, et hendrerit quam mi eget velit. Phasellus risus mauris, commodo sed, accumsan in, porttitor id, augue. Phasellus vehicula eros eget sem. Vestibulum aliquam tincidunt augue. Duis vel nisi a sapien volutpat viverra. Curabitur iaculis turpis sed lacus. Sed vestibulum dictum urna. Nulla sit amet diam.
		</div>
	</div>
	<div id="col_der">
		<div id="verde_superior">
			<div class="textos">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel tellus. Vivamus bibendum, massa eu commodo egestas, turpis erat mattis tellus, suscipit eleifend libero turpis nec libero. Praesent luctus gravida turpis. Duis ornare mollis sem. Praesent facilisis tincidunt pede. Fusce ac urna. Nulla placerat ultricies purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget nisl a nisl scelerisque pharetra. Ut sed elit in tortor varius suscipit. Vestibulum pretium, est et suscipit fringilla, arcu risus placerat magna, vel porta mi tellus at arcu. Praesent eget mi vitae sem gravida rutrum. Donec sollicitudin. Integer consequat ullamcorper turpis. In nisi nunc, imperdiet quis, aliquam in, porta sit amet, est. Etiam consequat suscipit enim.
			</div>
		</div>
		<div id="verde_oscuro_uno">
			<div class="textos">
				In non turpis vel felis fermentum luctus. Pellentesque ac nibh. Ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam luctus mi vel quam. Mauris sapien. Fusce feugiat condimentum sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec orci. Ut pharetra. Donec faucibus pede ac nisl. Nam pulvinar, metus sit amet euismod auctor, metus purus porttitor tellus, et hendrerit quam mi eget velit. Phasellus risus mauris, commodo sed, accumsan in, porttitor id, augue. Phasellus vehicula eros eget sem. Vestibulum aliquam tincidunt augue. Duis vel nisi a sapien volutpat viverra. Curabitur iaculis turpis sed lacus. Sed vestibulum dictum urna. Nulla sit amet diam.
			</div>
		</div>
		<div id="verde_oscuro_dos">
			<div class="textos">
				In non turpis vel felis fermentum luctus. Pellentesque ac nibh. Ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam luctus mi vel quam. Mauris sapien. Fusce feugiat condimentum sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec orci. Ut pharetra. Donec faucibus pede ac nisl. Nam pulvinar, metus sit amet euismod auctor, metus purus porttitor tellus, et hendrerit quam mi eget velit. Phasellus risus mauris, commodo sed, accumsan in, porttitor id, augue. Phasellus vehicula eros eget sem. Vestibulum aliquam tincidunt augue. Duis vel nisi a sapien volutpat viverra. Curabitur iaculis turpis sed lacus. Sed vestibulum dictum urna. Nulla sit amet diam.
			</div>
		</div>
		<div class="corte"></div>
	</div>
	<div class="corte"></div>
</div> 

como te digo esto hace lo que tu quieres. Copialo y pegalo en un archivo nuevo

[Dnielf]

gracias willyfc lo he solucionado con tu ayuda.

Saludos