Foros del Web » Creando para Internet » HTML »

PROBLEMAS IFRAME DESFASADO o fuera de lugar

Estas en el tema de PROBLEMAS IFRAME DESFASADO o fuera de lugar en el foro de HTML en Foros del Web. Hola, vengo del foro de php que me dijeron que evacue la duda aqui q seguro me van a ayudar estoy haciendo una pagina, en ...
  #1 (permalink)  
Antiguo 25/09/2009, 13:44
 
Fecha de Ingreso: septiembre-2009
Mensajes: 5
Antigüedad: 8 años, 2 meses
Puntos: 0
Pregunta PROBLEMAS IFRAME DESFASADO o fuera de lugar

Hola, vengo del foro de php que me dijeron que evacue la duda aqui q seguro me van a ayudar
estoy haciendo una pagina, en realidad tome un template y lo estoy modificando de cero, el problema surgio cuando dentro de mi html agregue in iframe, el iframe aparaece perfectamente pero desfazado o fuera del contenido o del div. para probar escribi algo en el sidebar y el contenedor div bajo pero iframe queda afuera horrible, es como si dentro del div nunca puse el iframe.

les dejos la dire para que vean. no critiquen que esta mal puesta en el hosting, solo lo cuelgo asin para poder mostrarles lo q voy haciendo...

Gracias a los genios q me saquen de este problemita.

esta es la dire para que vean como queda.

www(punto)elsaenglerpinturas(punto)com(punto)ar/index1.php
  #2 (permalink)  
Antiguo 25/09/2009, 19:33
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: PROBLEMAS IFRAME DESFASADO o fuera de lugar

Hola

Mira estos arreglos, tanto en el html como en css. Hazte un copy-paste de los dos archivos y prueba si esto te arregla el problema:

index1.php

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina de eljonus</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenido"><!--Comienza Contenido-->
	<div id="header"><!--Comienza Header-->
		<div id="imagen-header"><!--Comienza imagen header-->
    	</div><!--Termina imagen-header-->
            	 <div id="menu"><!--Empieza menu-->
               		<ul>
                    <li class="current_page_item"><a href="#">Inicio</a></li>
                    <li><a href="#">Pinturas</a></li>
                    <li><a href="#">Perfil</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="contacto/contact.php" rel="facebox">Contacto</a></li>
            		</ul>
               	 </div><!--Termina MENU-->
	</div><!--Termina Header-->
    
<div id="centro"><!--Comienza centro-->
	<div id="contenido-izquierda"><!--Comienza contenido izquierda-->
		<iframe width="700" height="700" src="simpleviewer/galeriavisor.php" id="ifra" name="ifra" frameborder="0"></iframe>
	</div><!--Termina contenido izquierda-->
	<div id="sidebar"><!--Comienza sidebar-->
		<p>Contenido del Sidebar</p>
	</div><!--Termina sidebar--> 
</div><!--Termina Centro-->

<div id="footer"><!--Comienza footer-->
	<p>Copyright (c) 2009 JonDesign.com.ar Derechos Reservados. Dise&ntilde;os <a href="http://www.JonDesign.com.ar/">Jon Design</a>.</p>
</div><!--Termina footer-->

</div><!--Termina Contenido-->

</body>
</html> 
style1.css:

Código HTML:
@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	outline: none;
}
body {
	margin: 0;
	padding: 0;
	background: #1B120B;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #787878;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #181818;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #B94E0E;
}

a:hover {
}


#contenido {
	padding: 0;
	margin: auto;
	background: url(images/img05.jpg) repeat-x left top;
}

#imagen-header {
	width: 960px;
	height: 240px;
	margin: auto;
	background: url(images/img02.jpg) no-repeat left top;
}


#menu {
	float: none;
	width: 960px;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	background: url(images/img03.jpg) repeat-x left top;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 25px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	height: 18px;
	margin-right: 3px;
	padding: 12px 40px 0px 40px;
	background: url(images/img06.jpg) no-repeat right 10px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
}

#menu .current_page_item a {
	padding-left: 0;
}

#menu a:hover {
	text-decoration: underline;
}

#centro {
	/*margin-bottom: 20px;*/
	position: relative;
	width: 960px;
	height: 708px;
	margin: 0 auto;
	background: url(images/img04.jpg) repeat-y left top;
	border: 0px solid #fff; /*para tests*/
}

#contenido-izquierda {
	position: absolute;
	top: 0px;
	left: 0px;
	/*float: left;*/
	display: block;
	/*width: 700px;*/
	/*margin-top: 5px;*/
	/*margin-bottom: 10px;*/
	/*margin-right: 6px;*/
	padding-left: 14px;
	padding-top: 4px;
	border: 0px solid #fff; /*para tests*/
}
#ifra {
	margin: 0;
	padding: 0;
}
.post {
}

.post .title {
	height: 38px;
	padding: 12px 0 0 20px;
	letter-spacing: -.5px;
	color: #181818;
}

.post .title a {
	color: #181818;
	border: none;
}

.post .meta {
	margin-top: -10px;
	padding-bottom: 5px;
	padding-left: 20px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}

.post .meta a {
}

.post .entry {
	text-align: justify;
	margin-bottom: 25px;
	padding: 30px 20px 10px 20px;
}

.links {
	display: block;
	width: 130px;
	margin: 20px 0px;
	padding: 5px;
	background: #A03128;
	border-left: 20px solid #1B120B;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #FFFFFF;
}

/* Sidebar */

#sidebar {
	position: absolute;
	top: 5px;
	right: 10px;
	/*float: right;*/
	display: block;
	width: 210px;
	height: auto;
	padding: 0px 15px 0px 0px;
	color: #787878;
	border: 0px solid #ccc; /*para tests*/
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 0px;
}

#sidebar li li {
	line-height: 20px;
	border-bottom: 1px dashed #808080;
	padding-left: 40px;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 30px;
	padding: 10px 0 0 30px;
	letter-spacing: -.5px;
	color: #181818;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 10px 0px 20px;
	text-align: justify;
}

#sidebar a {
	border: none;
	color: #B94E0E;
}

#sidebar a:hover {
	text-decoration: underline;
}


#footer {
	clear: both;
	margin: 0 auto;
	width: 960px;
	height: 100px;
	background: url(images/img01.jpg) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 40px;
	line-height: normal;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	color: #D78983;
}

#footer a {
	color: #FFDBD9;
}
Sólo es una aproximación al problema. Debes ajustar y refinar.

Esperando comentario...

Bye
  #3 (permalink)  
Antiguo 25/09/2009, 19:48
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: PROBLEMAS IFRAME DESFASADO o fuera de lugar

Hola de nuevo...

Porqué no pones la galería directamente en el primer html, sin necesidad de utilizar el iframe y el otro html?

No tienes necesidad de utilizar un iframe y otra página para cargar la galería.

Bye
  #4 (permalink)  
Antiguo 25/09/2009, 20:24
 
Fecha de Ingreso: septiembre-2009
Mensajes: 5
Antigüedad: 8 años, 2 meses
Puntos: 0
De acuerdo Respuesta: PROBLEMAS IFRAME DESFASADO o fuera de lugar

Cita:
Iniciado por deirdre Ver Mensaje
Hola de nuevo...

Porqué no pones la galería directamente en el primer html, sin necesidad de utilizar el iframe y el otro html?

No tienes necesidad de utilizar un iframe y otra página para cargar la galería.

Bye
y pense hacer eso,.- pero la galeria llevaba mas cosas y nose supongo que iba a hacer mas lio q antes... la que tenia pensado es ponerla en un include porque la idea para despues, es tener el menu por un lado, el sidebar por otro, el contenido por otro,.- y cuando quiera agregar algo no tenia q hacerlas en todas las paginas que haga, pero este iframe me volvia loco porque de desfazaba,.- lo habia solucionado solo usando un div con clear:both despues del cierre de contenido izquierdo... despues el codigo q me paaste anduvo tambien igualmente salio otro inconveniente pero esto es mas dificil,.- si te fijas,.- cuando hace clic en contactos,.- agregue con jquery un formulario de contacto pero sale atras del iframe...

Gracias por la ayuda y si no te jode podrias explicarme que hiciste con el codigo q no entendi . jejeje,.-

no te puedo pasar el codigo que habia hecho porque no me deja el foro pero me parece q la tuya esta mejor.
  #5 (permalink)  
Antiguo 26/09/2009, 11:35
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: PROBLEMAS IFRAME DESFASADO o fuera de lugar

Hola eljonus

Si quieres te envío un zip con el conjunto (con iframe y sin él) y ahí podrás 'estudiar' el código fuente y ver los cambios. Si lo quieres puedes enviarme un privado con algún email y te lo adjunto.

Bye
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 07:37.