Entrar

cargar un div

bitxoraro · · Solicitar retirada
kiza este preguntando una tonteria mu grande, pero... lo voy hacer.

Tengo tres divs, titulo,botonera y main, todos horizontales.

cuando hago click en un boton, y kiero ke me cargue en el main un nuevo div, ¿como lo hago?

Estoy acostumbrado a utilizar los marcos y no pillo bien este paso. grazias!
Usuario 1064 · · Solicitar retirada
Puedes usar los iframes que son parecidos a los frames.

Los frames es una página web que contiene otras páginas web dividiéndola en ventanas.

Un iframe es una página web incrustada en otra sin hacer divisiones.

Para no repetir, mira este post

http://www.comocreartuweb.com/phpBB2/ftopic4245.html
bitxoraro · · Solicitar retirada
Bueno, mire la direccion ke me recomendaste... pero no se si es realmente lo ke necesito, pues hay una imagen de fondo y es un lio de tres pares.

Yo creo ke lo perfecto seria simplemente poder cargar una tabla donde meto el contenido de cada boton, al dar al boton se carga la tabla de determinadas dimensiones...

Me parece ke se trata de algo de javascript, ke te muestra los divs segun lo indikes.

subo una imagen de la web en construccionpara ke se entienda mejor la idea. gracias

[contenido no disponible]
Usuario 1064 · · Solicitar retirada
Sin marcos, almenos yo, no conozco otra forma.

Creo que el iframe se puede hacer de fondo transparente pero ahora mismo no me acuerdo que atributo era, será cuestión de buscarlo.

Un saludo.
Usuario 1064 · · Solicitar retirada
Pues aquí lo tienes

<iframe style="background-color: transparent;>
bitxoraro · · Solicitar retirada
bueno, mi web se ve bien el explorer, pero en firefox nada ke ver... no se ke hacer para ke se vea bien.

No entiendo la utilidad de los divs, si algo tan simple como darle a un boton y ke se cargue en el main una nueva pantallas, es tan complicado de hacer...

No me keda mu claro como es el codigo de los iframes, yo kiero abrir uno en una determinada posicion, kiza si le pongo el fondo yo mismo no me de problemas.

Necesito abrir un iframe en el centro de la web con un tamaño de 800x505, donde coloco el codigo? dentro del #main? tengo ke poner algo en la hoja de estilos?

Gracias
Usuario 1064 · · Solicitar retirada
No entiendo la utilidad de los divs, si algo tan simple como darle a un boton y ke se cargue en el main una nueva pantallas, es tan complicado de hacer...

Es que esto que pides tampoco se puede hacer con las tablas, solo se puede hacer con frames. La utilidad de los divs respecto a las tablas, por lo que he leído es porque son más accesibles tanto para los buscadores como para los discapacitados.

Necesito abrir un iframe en el centro de la web con un tamaño de 800x505, donde coloco el codigo? dentro del #main? tengo ke poner algo en la hoja de estilos?

El iframe tiene que ir dentro del div donde quieres que se muestre.
Si el iframe quieres que mida 800x505, se lo debes de poner:

<iframe widht="800px" height="505px">

Recuerda que el iframe no puede ser más grande que el div, ya que te hará cosas raras.

En la hoja de estilos no tienes por que ponerle nada, se lo pones todo en la etiqueta <iframe>
bueno, mi web se ve bien el explorer, pero en firefox nada ke ver... no se ke hacer para ke se vea bien.

Pon la dirección de tu web.
bitxoraro · · Solicitar retirada
voy a trastear a ver si soluciono algo, no tengo subida la web a internete :S

Me da rabia, porke con dos marcos esto kedaba mas ke solucionado...

Gracias por todo, ahora te digo como va la cosa.
bitxoraro · · Solicitar retirada
Este es el codigo de mi web, no se si esto ayudara
<DOCTYPE>
<html>
<head>
<meta>
<title>eurotourmanager</title>
<link>
<style>

td img {display: block;}
body {
background-color: #006699;
}
</style>
<script>
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;
for(i=0;!x&&d.layers&&i<d> 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document) == null) nbArr = document = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document;
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; }
document = nbArr = new Array();
for (i=2; i <args>
</script>
</head>

<body>
<div>


<div>

<div>
<img></div>
<div>
<table>
<fwtable>
<tr>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
</tr>
<tr>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><a><img></a></td>
<td><img></td>
<td><img></td>
</tr>
<tr>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
<td><img></td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td><div>ULTIMA ACTUALIZACION </div></td>
</tr>
<tr>
<td>Novedades en las secciones de descargas </td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam felis arcu, suscipit at, imperdiet in, venenatis id, odio. Ut sollicitudin, lacus in posuere interdum, neque lectus sodales eros, vel placerat leo tellus in tortor. In malesuada. Cras eget mi in erat semper adipiscing. Donec vel pede. Donec placerat, dolor nec pellentesque tincidunt, magna est tempus ligula, nec posuere elit felis eget nisl. In egestas fermentum magna. In pede nibh, tincidunt id, posuere et, egestas id, velit. Pellentesque arcu. Pellentesque fermentum interdum ipsum. Nunc in turpis. Maecenas euismod.

Sed eget elit non arcu cursus mattis. Suspendisse consectetuer, velit ut congue porta, justo enim posuere elit, sollicitudin rhoncus elit neque ut eros. Morbi convallis varius ipsum. Vivamus volutpat, dui quis tincidunt euismod, nisi ante fermentum lectus, sit amet sollicitudin purus libero ac est. Aliquam nec elit eget nulla semper placerat. Nam tincidunt, arcu in viverra gravida, velit diam aliquam nulla, a euismod eros ipsum ac urna. Morbi sed lorem at justo tincidunt tempus. Mauris vestibulum nunc condimentum velit. Nullam sit amet urna in dui dignissim vulputate. Pellentesque convallis metus ut mauris. Nulla facilisi. Suspendisse scelerisque rutrum dolor. Donec vitae velit. Phasellus aliquet ornare justo. Nullam congue lobortis arcu. Ut vitae ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Vivamus placerat condimentum nunc. Aliquam erat volutpat. Duis elementum odio sed elit. Cras rutrum. Suspendisse augue velit, scelerisque convallis, pulvinar fermentum, vulputate ut, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus non quam ut magna tristique laoreet. Donec suscipit. Fusce tempor. Morbi rhoncus libero nec orci. Cras convallis, quam id hendrerit ultrices, metus felis porttitor mauris, et posuere nibh ipsum quis magna. Cras tincidunt varius mauris. Aliquam dapibus. Quisque in lectus id sem pellentesque consequat. Phasellus in sem ut sem viverra blandit. Maecenas ultricies massa quis elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In aliquam hendrerit massa. Nullam luctus, urna vitae venenatis porta, nibh libero viverra metus, id molestie dui nunc quis tortor. Proin nisl.

Pellentesque eleifend egestas dolor. Vivamus leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar nunc sollicitudin nisl. Curabitur placerat sapien sed ante placerat fermentum. Proin ligula neque, bibendum ac, posuere id, malesuada eget, nunc. Praesent ornare. Donec in tellus. Ut at lectus. Integer sagittis, velit sed varius suscipit, mi lectus sagittis sem, id vehicula libero est vitae ligula. Curabitur lobortis leo sit amet enim tempus porta. Pellentesque ac dolor a quam rutrum laoreet. Duis vitae metus sit amet lectus dignissim pretium. Nullam id felis nec orci convallis feugiat. Integer gravida nisl non neque. Sed consequat interdum est. Sed rhoncus mi.

Vivamus est lacus, pellentesque eu, ultrices sit amet, sodales vitae, eros. Sed viverra. Phasellus turpis pede, placerat id, lobortis sodales, elementum sit amet, nibh. Nullam a velit mattis tortor fermentum semper. Nulla tincidunt. Nunc lacus sem, consequat at, dictum mollis, suscipit id, turpis. Donec dictum mattis metus. In mollis, purus molestie consequat tempor, urna ipsum rutrum massa, nec eleifend elit dui eu tortor. Etiam tempus metus at nunc. Sed vel ipsum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam felis arcu, suscipit at, imperdiet in, venenatis id, odio. Ut sollicitudin, lacus in posuere interdum, neque lectus sodales eros, vel placerat leo tellus in tortor. In malesuada. Cras eget mi in erat semper adipiscing. Donec vel pede. Donec placerat, dolor nec pellentesque tincidunt, magna est tempus ligula, nec posuere elit felis eget nisl. In egestas fermentum magna. In pede nibh, tincidunt id, posuere et, egestas id, velit. Pellentesque arcu. Pellentesque fermentum interdum ipsum. Nunc in turpis. Maecenas euismod.

Sed eget elit non arcu cursus mattis. Suspendisse consectetuer, velit ut congue porta, justo enim posuere elit, sollicitudin rhoncus elit neque ut eros. Morbi convallis varius ipsum. Vivamus volutpat, dui quis tincidunt euismod, nisi ante fermentum lectus, sit amet sollicitudin purus libero ac est. Aliquam nec elit eget nulla semper placerat. Nam tincidunt, arcu in viverra gravida, velit diam aliquam nulla, a euismod eros ipsum ac urna. Morbi sed lorem at justo tincidunt tempus. Mauris vestibulum nunc condimentum velit. Nullam sit amet urna in dui dignissim vulputate. Pellentesque convallis metus ut mauris. Nulla facilisi. Suspendisse scelerisque rutrum dolor. Donec vitae velit. Phasellus aliquet ornare justo. Nullam congue lobortis arcu. Ut vitae ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Vivamus placerat condimentum nunc. Aliquam erat volutpat. Duis elementum odio sed elit. Cras rutrum. Suspendisse augue velit, scelerisque convallis, pulvinar fermentum, vulputate ut, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus non quam ut magna tristique laoreet. Donec suscipit. Fusce tempor. Morbi rhoncus libero nec orci. Cras convallis, quam id hendrerit ultrices, metus felis porttitor mauris, et posuere nibh ipsum quis magna. Cras tincidunt varius mauris. Aliquam dapibus. Quisque in lectus id sem pellentesque consequat. Phasellus in sem ut sem viverra blandit. Maecenas ultricies massa quis elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In aliquam hendrerit massa. Nullam luctus, urna vitae venenatis porta, nibh libero viverra metus, id molestie dui nunc quis tortor. Proin nisl.

Pellentesque eleifend egestas dolor. Vivamus leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar nunc sollicitudin nisl. Curabitur placerat sapien sed ante placerat fermentum. Proin ligula neque, bibendum ac, posuere id, malesuada eget, nunc. Praesent ornare. Donec in tellus. Ut at lectus. Integer sagittis, velit sed varius suscipit, mi lectus sagittis sem, id vehicula libero est vitae ligula. Curabitur lobortis leo sit amet enim tempus porta. Pellentesque ac dolor a quam rutrum laoreet. Duis vitae metus sit amet lectus dignissim pretium. Nullam id felis nec orci convallis feugiat. Integer gravida nisl non neque. Sed consequat interdum est. Sed rhoncus mi.

Vivamus est lacus, pellentesque eu, ultrices sit amet, sodales vitae, eros. Sed viverra. Phasellus turpis pede, placerat id, lobortis sodales, elementum sit amet, nibh. Nullam a velit mattis tortor fermentum semper. Nulla tincidunt. Nunc lacus sem, consequat at, dictum mollis, suscipit id, turpis. Donec dictum mattis metus. In mollis, purus molestie consequat tempor, urna ipsum rutrum massa, nec eleifend elit dui eu tortor. Etiam tempus metus at nunc. Sed vel ipsum.</td>
</tr>
</table>
</div>
</div>
<div>


| <a>Contactar Webmasters </a>| <a>Colaboraciones</a> | <a>Sugerencias</a> | </p>
</div>
</div>
</body>

</html>
bitxoraro · · Solicitar retirada
Yo creo ke lo ke pregunto debe ser mu simple... al presionar un boton se carga un contenido dentro del #main

Si esto no es sencillo,¿como se hacen las webs con divs?

Es una cosa esencial el poder navegar dentro de una web, y si solo se puede hacer con frames, pues vaya gracia, ¿no?

saludos
Usuario 1064 · · Solicitar retirada
Si usas tablas, para que quieres divs?

Yo soy de los que piensan que se usa una cosa o se usa otra, pero las 2 son tontería. El dreamweaver te suele crear divs de más, vigila esto.

¿Has activado la casilla de "deshabilitar html en este mensaje" que hay abajo antes de darle al botón enviar?

en la celda (td) donde pone:

Lorem ipsum dolor sit a

es donde debes de poner el iframe. Borra todo ese texto y ponlo ahi.

<td><iframe src="noticias.html"  name="titulin" + atributos bla bla bla></iframe><td>

Luego creas una página html con el contenido que quieres que tenga ese iframe. por ejemplo: noticias.html. Fíjate arriba y verás q en el iframe llamas a esta página.

Luego en los vínculos tienes que ponerle el targen con el identificador del iframe, en este caso es "titulin".

<a href=ruta.html TARGET="titulin">


de esta forma los vínculos te los abrirá en el iframe.
bitxoraro · · Solicitar retirada
Me voy a volver loco... lo unico ke se me ocurre es hacerlo como siempre y dejarme de complicaciones, con marcos y todos contentos.

Lo intento pero esto me supera, el iframe no consigo enlazarlo, se me va directo al html.

Yo creo ke lo mas sencillo es hacerlo en marcos.

Por hoy voy a desistir. Garcias
bitxoraro · · Solicitar retirada
No se si es una solucion gualtrapa o se hace asi...

hago la web como la tenia, y la guardo como index, y luego segun le cambie el contenido del #main le voy poniendo el nombre de las descargas y la cargo entera cuando pulse los botones, ¿esta mu mal eso?

Gracias
Usuario 1064 · · Solicitar retirada
Yo en mi web cada vez que pulso un vínculo, cargo una página nueva. Es que no sé por que le ves tantos problemas a eso, si las webs funcionan así.
bitxoraro · · Solicitar retirada
pues me puse asi y tampoco me va...

Hice una botonera con el fireworks, y pongo el vinculo a la web entera con el trozo ke necesito cambiar modificado, pero en destino no se mu bien ke poner, de todas formas me hace el navegador poko caso, y las imagenes no se cargan :s

Ke desesperacion....
bitxoraro · · Solicitar retirada
Ya va, me fallaba una tonteria en los enlaces... y una /de mas en las imagenes.

De todas formas ya mi unico problema es ke tengo un pie, donde se puede contactar y estas cosas, y en el firefox se me ve movido hacia abajo, pero en el explorer bien... a ver si me podeis decir ke suele ser lo ke descuadra los textos.

Gracias por todo
bitxoraro · · Solicitar retirada
Este es el codigo de la hoja de estilos referido al pie ke me falla, son 20 pix de alto y kiero ke el texto kede 2 por arriba y 2 por abajo para ke kede centrado... se ve bien en el explorer pero mal en firefox. Gracias!
#pie {
	height: 20px;
	width: 800px;
	float: left;
	clear: both;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #666666;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	margin-top: 12px;
}
.pie {
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-align: center;
	color: #CCCCCC;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
Usuario 1064 · · Solicitar retirada
Tu hoja de estilos está bien, por eso he flipado un poco, pero a veces la cosa más simple es la que da la tabarra jajajaa.

Quítale el párrafo al div pie.

<div>
| <a>Contactar Webmasters </a>| <a>>Colaboraciones</a> | 

<a>Sugerencias</a> | 

</div>

También puedes simplificar código en la hoja de estilos y en lugar de poner esto:

#pie {
   height: 20px;
   width: 800px;
   float: left;
   clear: both;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   background-color: #666666;
   border-top-width: 2px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 2px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #999999;
   border-right-color: #999999;
   border-bottom-color: #CCCCCC;
   border-left-color: #CCCCCC;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   margin-top: 12px;
}

Puedes poner esto:
#pie {
   height: 20px;
   width: 800px;
   float: left;
   clear: both;
   margin:12px 0 0 0;
   background-color: #666666;
   border:#999999 2px solid;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   text-align: center;
   font-weight: bold;}

La clase .pie si no la utilizas bórrala.
Usuario 1064 · · Solicitar retirada
Tu hoja de estilos está bien, por eso he flipado un poco, pero a veces la cosa más simple es la que da la tabarra jajajaa.

Quítale el párrafo al div pie.

<div>
| <a>Contactar Webmasters </a>| <a>>Colaboraciones</a> | 

<a>Sugerencias</a> | 

</div>

También puedes simplificar código en la hoja de estilos y en lugar de poner esto:

#pie {
   height: 20px;
   width: 800px;
   float: left;
   clear: both;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   background-color: #666666;
   border-top-width: 2px;
   border-right-width: 2px;
   border-bottom-width: 2px;
   border-left-width: 2px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #999999;
   border-right-color: #999999;
   border-bottom-color: #CCCCCC;
   border-left-color: #CCCCCC;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   margin-top: 12px;
}

Puedes poner esto:
#pie {
   height: 20px;
   width: 800px;
   float: left;
   clear: both;
   margin:12px 0 0 0;
   background-color: #666666;
   border:#999999 2px solid;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   text-align: center;
   font-weight: bold;}

La clase .pie si no la utilizas bórrala.
bitxoraro · · Solicitar retirada
Oeoeoeoeeeee, mutxas grazias, era lo del parrafo!

.pie lo tengo para modificar los efectos del texto al pasar por encima, pero como no me cuadraba no lo habia modificado ni na.

A ver si me entero yo bien, tengo ke cargar todo el html cada vez ke le de a un boton? en teoria ocupara mas ke con marcos, pues con estos el titulo y la botonera no se tienen ke cargar cada vez...lo veo un poco una solucion sencilla para salir de un apuro, pero es eficaz eso si.

al final le pillo el trankillo a esto de las css

GRAZIAS!