Foros del Web » Creando para Internet » CSS »

iFrame en CSS

Estas en el tema de iFrame en CSS en el foro de CSS en Foros del Web. Hola a todos, espero disculpen la molestia, pero me estoy iniciando en esto del desarrollo de páginas utilizando CSS, me gustaría que alguien por favor ...
  #1 (permalink)  
Antiguo 31/05/2008, 16:33
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Pregunta iFrame en CSS

Hola a todos, espero disculpen la molestia, pero me estoy iniciando en esto del desarrollo de páginas utilizando CSS, me gustaría que alguien por favor me dijera como puedo hacer un iFrame, osea que todas las páginas que yo haya creado se puedan abrir de misma manera que cuando se utiliza un FrameSet.

He buscado en internet pero aún no encuentro ningun ejemplo claro, le doy las gracias anticipadas.

Es algo como se presenta en estas páginas:
http://www.eurocopa.nom.es/eurocopa-futbol/eurocopa-2008/
http://www.consejosaficionado.com/politica-de-privacidad.php

Última edición por plateado; 31/05/2008 a las 17:18
  #2 (permalink)  
Antiguo 01/06/2008, 02:54
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Respuesta: iFrame en CSS

Hola plateado

Podrías utilizar AJAX. Si te interesa, dilo para mover el mensaje a ese foro.

Saludos,
  #3 (permalink)  
Antiguo 01/06/2008, 08:36
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Pregunta Respuesta: iFrame en CSS

Interesante, pero lo que me gustaria saber es si alguien me puede decir donde encontrar o como hacer un iframe como mostre en las páginas de arriba, osea de forma explicativa pero solo con CSS. Cualquier ayuda se agradece.
  #4 (permalink)  
Antiguo 01/06/2008, 08:53
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Respuesta: iFrame en CSS

Hola de nuevo.

No veo que en esas página haya ningún iframe. Son páginas distintas, hechas con php, que tienes algunos contenidos comunes.

En cualquier caso, sólo con Css no se puede hacer nada parecido a un iframe.

Saludos,
  #5 (permalink)  
Antiguo 01/06/2008, 09:00
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: iFrame en CSS

Entonces no es posible hacer una especie de FrameSet como se hace con Html solo con CSS, osea de forma como aparece en esta página:

http://www.eurocopa.nom.es/eurocopa-futbol/eurocopa-2008/

Alguien sabe como en la página anterior queda todo centrado y no pierde su formato cuando realizamos un cambio de una página a otra?

Última edición por plateado; 01/06/2008 a las 10:00
  #6 (permalink)  
Antiguo 01/06/2008, 10:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: iFrame en CSS

Perdona pero no entiendo.

La página que muestras no tiene ninguna especie de frameset que yo vea. ¿Cómo conserva el formato al cambiar de página? pues repitiendo todo el contenido excepto la parte central que cambia. No entiendo qué es lo que te gustaría hacer que ves en esa página y que tú no consigues.

Mikel.
  #7 (permalink)  
Antiguo 01/06/2008, 10:39
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: iFrame en CSS

A eso me refiero, no usa ningun frameset supongo que lo hicieron utilizando CSS, y esa es la parte que no logro realizar, que mis demas enlaces me aparezcan en una parte derecha por ejeplo de mi página.

He estado investigando y encontre esto, le hice algunas modificaciones, subo el código porque no esta alojada en ningún sitio solo es un ejemplo de lo que quiero lograr hacer:

CODIGO CSS
================================================== =====================

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
overflow:auto;
background-image: url();
background-color: #333333;
}
#Superior {
border-top-color:#FF9933;
position:absolute;
top:33px;
left:49px;
width:907px;
height:81px;
overflow:auto;
background-image: url(img24.jpg);
}
#Izquierda { position:absolute; top:116px; left:50px; width:190px; height:400px; overflow:auto; }
#Derecha {
position:absolute;
top:116px;
left:225px;
width:730px;
height:400px;
overflow:auto;
}

/*===================Menu lateral izquierdo============================*/
#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}

#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

</head>

<body>

<div id="Superior" style=" background-color:#D6EEFC">... contenido de la contenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaontenido de la caja izquierdaaja superior... </div>


<div id="Izquierda" style=" background-color:#DCDABE">
<div id="ddblueblockmenu">

<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
</ul>

<div class="menutitle">CSS Library</div>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>
</div>
</div>

<div id="Derecha" style="background-color:#FFFFFF">Mostrar el contenido de las direcciones laterales en esta parte ùnicamente </div>

</body>
</html>

================================================== =========================

Disculpen la molestia por favor, pero es que no logro encontrar nada para realizar este efecto.

Última edición por plateado; 01/06/2008 a las 10:50
  #8 (permalink)  
Antiguo 01/06/2008, 10:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: iFrame en CSS

Es una imagen de tu ordenador a la que no es posible acceder aquí. No puede verse.

Mikel.
  #9 (permalink)  
Antiguo 01/06/2008, 11:31
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: iFrame en CSS

Por esa razón copie los código, ya que no puedo subir ningún enlace, solo es cuestion de copiar los códigos en dreamweaver o algún editor para visualizar el ejemplo.
  #10 (permalink)  
Antiguo 01/06/2008, 11:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: iFrame en CSS

Mira este enlace de una página en la que hago algo parecido a eso:

http://www.araudi.net/forosdelweb/solapas.html

o este otro

http://www.araudi.net/forosdelweb/co...desastres.html

¿Cómo se hace con css? pues todo el contenido debe estar en el propio html, y mostrarlo u ocultarlo según picas el enlace. Pero esto no funciona bien en todos los casos dependiendo del contenido de ese recuadro, por lo que, si lo que quieres es que haya dentro otros enlaces y demás, como ya te ha dicho javierB, lo mejor es que uses AJAX.

Mikel.
  #11 (permalink)  
Antiguo 01/06/2008, 14:18
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: iFrame en CSS

Algo similar es lo que quiero hacer. Pero aplicable a una página completa, osea poder enlazar mis demas páginas dentro del mismo formato sin perder mi estilo original. Pero cómo se hace esto con Ajax?, la verdad no se nada de esa herramienta que mencionan.

Pero cúal es el código que utilizas para realizar los ejemplos que mencionaste anteriormente, podrias facilitarmelo por favor Mikmoro?

Ya que supongo que lo tienes un archivo .css aparte. Gracias de antemano y disculpen las molestias ocasionadas.

Ck esta página:

http://www.cruzalo.com/modulo-4-quienes-somos.html

exactamente algo como esto quiero realizar pero se me ha complicado el asunto, quizas sea algo simple para expertos como uds. pero mi es algo complicado de momento.

Última edición por plateado; 01/06/2008 a las 14:43
  #12 (permalink)  
Antiguo 01/06/2008, 15:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: iFrame en CSS

Mira, lo de la página que pones lo hacen con algún tipo de función de ASP que desconozco. Este es el enlace que cambia la parte del contenido en uno de los casos:

<img src="../animales.aspx?animal=5-3-2007-1-19-46-san xusto 022.JPG&width=80&height=100" title="DRACO" id="foto" border="0">

Si te das cuenta, al picar el enlace va a una nueva página en la barra de dirección, no se queda en la misma como pareces querer tú.

En mis ejemplos el código css lo puedes seguir muy fácilmente desde el enlace en la página donde los estás viendo, y es este en el primer caso:

http://www.araudi.net/forosdelweb/css/solapas.css

Pero si conoces poco de css te va a costar bastante trabajo entenderlo y mucho más adaptarlo a lo que tú quieres hacer.

Hay un foro específico de AJAX aquí mismo, en forosdelweb, donde imagino que habrá unas FAQ con la información que necesitas, y si no es así, de todas maneras encontrarás en la red muchísima información a cerca de Ajax para aprender a utilizarlo, que es lo más recomendable.

No obstante, si no controlas bien estás cosas deberías plantearte hacer una web normal en html, quiero decir, duplicar tu página cambiando los contenidos de manera tradicional, antes de complicarte la vida con tabs, ajax, javscript, iframes, etcétera.

Mikel.
  #13 (permalink)  
Antiguo 01/06/2008, 20:19
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: iFrame en CSS

Muchas gracias por la ayuda Mikmoro y disculpa las molestias ocasionadas. Investigare sore Ajax.

Aunque te tengo una pregunta, que me recomiendas para el desarrollo web.
ASP.NET, AJAX o JAVA.
y para base de datos PHP o MySQL.

Cúal combinación de estos sería más fácil de aprender o manejar?

Gracias otra vez.

Última edición por plateado; 01/06/2008 a las 20:31
  #14 (permalink)  
Antiguo 01/06/2008, 20:32
Avatar de plateado  
Fecha de Ingreso: julio-2007
Mensajes: 9
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: iFrame en CSS

Por cierto que significa ese * en el código de solapas, es algo como esto.

* {outline: 0px; margin: 0px; padding: 0px;
}
  #15 (permalink)  
Antiguo 02/06/2008, 01:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: iFrame en CSS

Cita:
Iniciado por plateado Ver Mensaje
Muchas gracias por la ayuda Mikmoro y disculpa las molestias ocasionadas. Investigare sore Ajax.

Aunque te tengo una pregunta, que me recomiendas para el desarrollo web.
ASP.NET, AJAX o JAVA.
y para base de datos PHP o MySQL.

Cúal combinación de estos sería más fácil de aprender o manejar?

Gracias otra vez.
Me parece que tienes un poco de jaleo: ASP.NET, AJAX y JAVA no son cosas equivalentes, y donde dices "para base de datos PHP o MySQL", en todo caso será PHP y MySQL, porque PHP no es una base de datos, sino un lenguaje interpretado.

Yo te recomiendo que empieces a estudiar html y css. Después podrías seguir con javascript y ajax, y si directamente quieres hacer cosas tipo portal, con usuarios, post, etc., tras html y css empezaría con PHP y MySQL.

Mikel.

P.D.: lo del asterisco significa "todos los elementos", de manera que esas propiedades se aplican a todos los elementos que no digan lo contrario.
  #16 (permalink)  
Antiguo 03/06/2008, 09:33
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 16 años, 1 mes
Puntos: 142
Respuesta: iFrame en CSS

Cita:
Iniciado por plateado Ver Mensaje
Aunque te tengo una pregunta, que me recomiendas para el desarrollo web.
ASP.NET, AJAX o JAVA.
y para base de datos PHP o MySQL.
Creo que aquí estás un poco confundido. La pregunta sería mejor así:

Para desarrollo web: ASP.NET, PHP o JAVA.
Para base de datos: MySQL, SqlServer u Oracle.

Primero que nada, como dice Mikel, aprende bien a usar HTML y CSS. Después ya podrás meterle un poco de JavaScript (Dentro del cual se incluye el AJAX). Y después ya podrás programar webs con bases de datos con algunos de los que preguntaste.

Ahora, a tu pregunta, quizá el más popular sea PHP con MySQL, ya que ambos puedes usarles de forma gratuita. Claro, si prefieres algo más a la de Microsoft, está ASP.NET y SqlServer (Cosa que no a muchos le agrada, principalmente en el aspecto que hay que pagar XP'), o como alternativa, podrías utilizar JAVA para hacer los .jsp... Pero según se, ahí es más de programar como tal que estructurar como normalmente lo hacemos en los otros casos. Ya es cuestión que veas que es lo que más te agrada, y puedes combinar cualquier programación web con cualquier gestor de base de datos... Suerte!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #17 (permalink)  
Antiguo 12/09/2008, 01:17
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 16 años, 7 meses
Puntos: 48
Respuesta: iFrame en CSS

Casualmente, soy el webmaster de http://www.consejosaficionado.com y no, no utilizo iframes.

Como bien te han dicho son .php distintos.
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #18 (permalink)  
Antiguo 12/09/2008, 01:56
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 16 años, 7 meses
Puntos: 48
Respuesta: iFrame en CSS

Sabias palabras las de daPhyre y Mikmoro.

Empieza por lo básico. Una pagina html pura y dura con el típico "Hola mundo", luego metele algún estilo, luego añade elementos mas complejos (iframes, capas,...)

Vamos, que antes de meterte de lleno tienes que tener conocimientos básicos, luego ya darás el salto a paginas dinámicas, bbdd, ... etc.

Por cierto, una web dinámica no tiene porque ser peor que una estática. Además hay momentos en los que se adapta mejor cada uno.
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
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 16:26.