Foros del Web » Creando para Internet » HTML »

pagina sin frames pero que hagan lo mismo

Estas en el tema de pagina sin frames pero que hagan lo mismo en el foro de HTML en Foros del Web. hola a todo, he leido en un manual que no esta bien el hacer una web con frames porque luego a la hora de posicionalo ...
  #1 (permalink)  
Antiguo 14/03/2011, 18:07
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 18 años, 7 meses
Puntos: 1
pagina sin frames pero que hagan lo mismo

hola a todo, he leido en un manual que no esta bien el hacer una web con frames porque luego a la hora de posicionalo es una movida.

Tengo entendido (corregirme si me equivoco) que para hacerlo sin frames usamos DIV!!!

entonces ahora tengo una duda.... acabo de empezar una web...
aqui os facilito el codigo.

index.php
<!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" xml:lang="sp" lang="sp">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>TONI MAS</title>
</head>

<body id="general">
<div id="container">
<div id="topbar">parte superior
<div id="marquesina">Listado de Inmuebles de Antonio Mas Mañez</div>
</div>
<div id="main">hola main<div id="menu-izq">menu izquierda</div>
<div class="spacer"></div>
</div>

<div id="footer">Página desarrollada por Rubén Ferrer Ortiz</div>
</div>
</body>
</html>


default.css

/* ------------------------------
Estructura de la página
------------------------------ */

#general{
margin:0;
margin-left:122px;
margin-right:122px;
/*width:auto;*/
background-color:#ffe0ab;
}

/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elementos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{

/*width:auto;*/
/*background-color:#ffe0ab; */
width:780px;
height:497px;
background-color:#ff0000;
border:0px;
display:block;
/*
border-top:0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
*/
}


p{
font:11px Verdana;
text-align:justify;
}

/***************Header**********************/
#topbar{
display:block;
height:auto;
width:780px;
font-size:1; /*for eliminate space between images*/
/*border-top:2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-left: 2px solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;*/
}

#marquesina{
display:block;
text-align:center;
width:780px;
height:24px;
background-color:#fe8f00;
font:arial;
font-weight:bold;
}
#main{
display:block;
text-align:center;
background-color:#00ff11;
width:780px;
height:498px;
}

/****Barra de navegación*****/

#menu-izq{
display:block;
background-color:#f9be78;
width:208px;
height:200px;
}
#menu-izq ul, #menu-izq ul li{padding:0; margin:0; list-style:none; float:left;}
#menu-izq a{color:#FFFFFF; font-weight:bold;}
#menu-izq a:hover{color:red;}
#menu-izq li a:link, #menu-izq li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}

/***************Contenido principal************/


/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas*/

div.spacer{clear:both; height:10px; display:block;}

/***************footer*********************/
#footer{
display:block;
height:40px;
width: 780px;
border-top:1px solid;
text-align:center;
background-color:#fe8f00;
}
/*
p.contacto{font-family:Arial; font-size:18px; font-style:negrita}
*/


Os invito a copiar el codigo y probarlo...

no queda mal, es una idea.... pero si os fijais en el main, tienes anidado el menu-izq pero no se queda a la misma altura de hecho en main si quitas el texto si que se igualan pero lo que quiero es que queden a la misma altura aunque escriba algo... para hacer esto que tendria que hacer??
hacer que el main no ocupe el espacio de menu-izq??
es decir pornerl pegado a la derecha y recortarle el width??

si os fijais los margenes que se quedan en los lados de 122px es algo que se ven un muchas web, yo lo he hecho asi, no se si habra alguna forma mejor. Si la sabeis compartirla gracias...

Acepto cualquier comentario de como hacer esto de manera mas eficaz y solventar posibles errores futuros.


gracias
  #2 (permalink)  
Antiguo 14/03/2011, 18:40
 
Fecha de Ingreso: marzo-2011
Ubicación: Veracruz
Mensajes: 92
Antigüedad: 13 años, 9 meses
Puntos: 3
Respuesta: pagina sin frames pero que hagan lo mismo

Lo que pasa es que estas metiendo texto y divs revueltos en un div contenedor. Por ejemplo:

<div id="main">hola main<div id="menu-izq">menu izquierda</div>

puedes hacerlo de esta manera

<div id="main"><div id="texto">hola main</div><div id="menu-izq">menu izquierda</div></dv>

y para que te queden en linea puedes hacerlo asi:

#main div{
display:inline-block;
}

Con lo anterior le dices que los divs que esten dentro de main los ponga en linea.

Espero haberme explicado. Saludos.
  #3 (permalink)  
Antiguo 15/03/2011, 06:46
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 18 años, 7 meses
Puntos: 1
Respuesta: pagina sin frames pero que hagan lo mismo

si bien, pero al poner

#main div{
display:inline-block;
}

me desaparece el color del

#menu-izq{
display:block;
background-color:#f9be78;
width:208px;
height:200px;
}

lo deja centrado en el main... y desaparece el color del background.
  #4 (permalink)  
Antiguo 15/03/2011, 09:43
 
Fecha de Ingreso: marzo-2011
Ubicación: Veracruz
Mensajes: 92
Antigüedad: 13 años, 9 meses
Puntos: 3
Respuesta: pagina sin frames pero que hagan lo mismo

Tratando de recomponer tu codigo me queda algo como lo que sigue, puedes probar:

Código PHP:
<!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" xml:lang="sp" lang="sp">

<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
link href="css/default.css" rel="stylesheet" type="text/css" />
<
title>TONI MAS</title>
</
head>

<
body id="general">
<
div id="container">
<
div id="topbar">parte superior</div>
<
div id="marquesina">Listado de Inmuebles de Antonio Mas Mañez</div>

<
div id="main">
<
div>hola main</div><div id="menu-izq">menu izquierda</div>
</
div>

<
div id="footer">Página desarrollada por Rubén Ferrer Ortiz</div>
</
div>
</
body>
</
html
Y vuelve a poner

#main div{
display:inline-block;
}

o

#main div{
display:inline;
}

suerte
  #5 (permalink)  
Antiguo 15/03/2011, 12:12
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 18 años, 7 meses
Puntos: 1
Respuesta: pagina sin frames pero que hagan lo mismo

no me lo deja como quiero...
igual es que me he explicado mal.

Yo necesito tener una parte dentro de la web... que es la que me muestra el contenido. Que seria el mi etiqueta main. ademas de este main necesito que a su izquierda tengas un menu, llamado menu-izq que es el navegador, dependiendo de donde pinches en el menu-izq que te cargara una cosa u otra en el main.

Necesito que haga esto ademas de que esteticamente... menu.-izq y main este a la misma altura es decir, despues de la marquesina si yo le doy de color de fondo a menu-izq que sea verde y a main que sea rojo, primero que se vean los dos colores y segundo que uno no este dentro de otro (si pudiera copiar una foto lo entenderias mejor)

no me vale que el main se vea rojo y 5 pixels mas abajo aparezca el verde del menu-izq, tiene que estar a la misma altura.

Gracias.
  #6 (permalink)  
Antiguo 15/03/2011, 12:49
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 6 meses
Puntos: 63
Respuesta: pagina sin frames pero que hagan lo mismo

Primero voy a ocuparme del diseño. creo que lo que quieres es que al escribir en el div derecho no afecte el menu-izq, pues bien dentro del html debrias tenerlo estructurado de la siguiente manera

Código PHP:
<div id="main">
<
div id="menu-izq">menu izquierda</div><div>hola main</div>
</
div
en vez de:

Código PHP:
<div id="main">hola main<div id="menu-izq">menu izquierda</div
de esta manera sin importar lo que escribas en el div derecho, no se vera afectado el menu izquierdo. Para alinear el menu-izq al div main, no hay nada mejor que un float: left, de esta manera:

Código PHP:
#menu-izq{
display:block;
background-color:#f9be78;
width:208px;
height:200px;
floatleft;

Por ultimo, creo que la mejor forma de reemplazar un iframe o frame (segun sea el caso) es por medio de AJAX.
  #7 (permalink)  
Antiguo 15/03/2011, 19:48
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 18 años, 7 meses
Puntos: 1
Respuesta: pagina sin frames pero que hagan lo mismo

... lo acabo de probar... pero por ejemplo a simple vista no me ha hecho nada... el color que tiene menu-izq no aparece, el del main queda por encima.

si esto ya va mal....
  #8 (permalink)  
Antiguo 16/03/2011, 07:40
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 6 meses
Puntos: 63
Respuesta: pagina sin frames pero que hagan lo mismo

Me parece realmente extraño, ya que a mi el diseño se me ve asi:



prueba que estas modificando correctamente la hoja de estilos y que no estas cayendo en faltas como el dejar etiquetas abiertas.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #9 (permalink)  
Antiguo 16/03/2011, 10:27
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 18 años, 7 meses
Puntos: 1
Respuesta: pagina sin frames pero que hagan lo mismo

como puedo ponerte una foto? asi ves como me queda a mi...


de todos modos una cosa, tu en la etiqueta main.... el color que tiene main viene de la etiqueta container verdad?

en main no tienes nada aparte del inline....
  #10 (permalink)  
Antiguo 16/03/2011, 10:30
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 18 años, 7 meses
Puntos: 1
Respuesta: pagina sin frames pero que hagan lo mismo

default.css

/* ------------------------------
Estructura de la página
------------------------------ */

#general{
margin:0;
margin-left:122px;
margin-right:122px;
/*width:auto;*/
background-color:#ff3333;
}

/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elementos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{

/*width:auto;*/
/*background-color:#ffe0ab; */
width:780px;
height:497px;
background-color:#556644;
border:0px;
display:block;
/*
border-top:0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
*/
}


p{
font:11px Verdana;
text-align:justify;
}

/***************Header**********************/
#topbar{
display:block;
height:auto;
width:780px;
font-size:1; /*for eliminate space between images*/
/*border-top:2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-left: 2px solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;*/
}

#marquesina{
display:block;
text-align:center;
width:780px;
height:24px;
background-color:#fe8f00;
font:arial;
font-weight:bold;
}
#main {
display:inline;
text-align:center;
background-color:#444551;
width:780px;
height:498px;
}

/****Barra de navegación*****/

#menu-izq{
display:block;
background-color:#f9be78;
width:208px;
height:200px;
float: left;
}
#menu-izq ul, #menu-izq ul li{padding:0; margin:0; list-style:none; float:left;}
#menu-izq a{color:#FFFFFF; font-weight:bold;}
#menu-izq a:hover{color:red;}
#menu-izq li a:link, #menu-izq li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}

/***************Contenido principal************/


/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas*/

div.spacer{clear:both; height:10px; display:block;}

/***************footer*********************/
#footer{
display:block;
height:40px;
width: 780px;
border-top:1px solid;
text-align:center;
background-color:#fe8f00;
}

#texto{
font:10px Verdana;
text-align:justify;
}

/*
p.contacto{font-family:Arial; font-size:18px; font-style:negrita}
*/






index.php


<!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" xml:lang="sp" lang="sp">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>TONI MAS</title>
</head>

<body id="general">
<div id="container">
<div id="topbar">parte superior</div>
<div id="marquesina">Listado de Inmuebles de Antonio Mas Mañez</div>

<div id="main">
<div id="menu-izq">menu izquierdaaaaaaaaaaaaa viva la izquierda lalalalallalalalalaal viva viva</div><div>hola main</div>
</div>
<!-- <div class="spacer"></div> -->


<div id="footer">Página desarrollada por Rubén Ferrer Ortiz</div>
</div>
</body>
</html>
  #11 (permalink)  
Antiguo 16/03/2011, 11:43
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 6 meses
Puntos: 63
Respuesta: pagina sin frames pero que hagan lo mismo

de hecho el main esta en block, tal como se encuentra el código original que publicaste.

codigo html, tal como lo tienes:

Código PHP:
<!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" xml:lang="sp" lang="sp">

<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
link href="default.css" rel="stylesheet" type="text/css" />
<
title>TONI MAS</title>
</
head>

<
body id="general">
<
div id="container">
<
div id="topbar">parte superior</div>
<
div id="marquesina">Listado de Inmuebles de Antonio Mas Mañez</div>

<
div id="main">
<
div id="menu-izq">menu izquierdaaaaaaaaaaaaa viva la izquierda lalalalallalalalalaal viva viva</div><div>hola main</div>
</
div>
<!--<
div class="spacer"></div>-->


<
div id="footer">Página desarrollada por Rubén Ferrer Ortiz</div>
</
div>
</
body>
</
html
Codigo CSS:

Código PHP:
/* ------------------------------
Estructura de la página
------------------------------ */

#general{
margin:0;
margin-left:122px;
margin-right:122px
/*width:auto;*/
background-color:#ff3333; 
}

/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elementos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{

/*width:auto;*/
/*background-color:#ffe0ab; */
width:780px;
height:497px;
background-color:#556644;
border:0px;
display:block;
/*
border-top:0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
*/
}


p{
font:11px Verdana;
text-align:justify;
}

/***************Header**********************/
#topbar{
display:block;
height:auto;
width:780px;
font-size:1/*for eliminate space between images*/
/*border-top:2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-left: 2px solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;*/
}

#marquesina{
display:block;
text-align:center;
width:780px;
height:24px;
background-color:#fe8f00;
font:arial;
font-weight:bold;
}
#main { 
display:block;
text-align:center;
background-color:#444551;
width:780px;
height:498px;
}

/****Barra de navegación*****/

#menu-izq{
display:block;
background-color:#f9be78;
width:208px;
height:200px;
floatleft;

#menu-izq ul, #menu-izq ul li{padding:0; margin:0; list-style:none; float:left;}
#menu-izq a{color:#FFFFFF; font-weight:bold;}
#menu-izq a:hover{color:red;}
#menu-izq li a:link, #menu-izq li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}

/***************Contenido principal************/


/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas*/

div.spacer{clear:bothheight:10pxdisplay:block;}

/***************footer*********************/
#footer{ 
display:block;
height:40px
width780px;
border-top:1px solid;
text-align:center;
background-color:#fe8f00;
}

#texto{
font:10px Verdana;
text-align:justify;
}

/*
p.contacto{font-family:Arial; font-size:18px; font-style:negrita}
*/ 
Resultado:


Espero haberte sido de ayuda, por cierto revisando el codigo un poco me he dado cuenta que manejas todo por medio de identificadores, el id general por ejemplo lo podrias manejar utilizando directamente el estilo sobre la etiqueta body, de esta manera el codigo se volveria más legible.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #12 (permalink)  
Antiguo 16/03/2011, 11:47
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 6 meses
Puntos: 63
Respuesta: pagina sin frames pero que hagan lo mismo

por poco se me olvidaba, para subir una imagen debes hacer uso de un servidor externo para subir la imagen y enlazarla por medio de la etiqueta [IMG][/IMG]. Soy nuevo asi que no he revisado si existe un faq para manejar el foro .
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #13 (permalink)  
Antiguo 16/03/2011, 12:11
Avatar de Omura
Colaborador
 
Fecha de Ingreso: julio-2006
Ubicación: Peru
Mensajes: 3.491
Antigüedad: 18 años, 5 meses
Puntos: 185
Respuesta: pagina sin frames pero que hagan lo mismo

para subir las imágenes puedes usar imageshack.us o alguno similar y como te dijeron poner la dirección usando [img]dirección imagen[/img], por ejemplo

[img]http ://i56.tinypic.com/sxp4ip.png[/img] (sin dejar espacios en blanco)
__________________
Mi error era de código... pero de código genético.
  #14 (permalink)  
Antiguo 16/03/2011, 13:06
Avatar de pampa_  
Fecha de Ingreso: mayo-2006
Mensajes: 334
Antigüedad: 18 años, 7 meses
Puntos: 1
Respuesta: pagina sin frames pero que hagan lo mismo

me faltaba un block, ya esta...

Muchas gracias!!! tienes que haber acabado de mi hasta los hue....vos!! jejeje


Gracias!!!

Etiquetas: frames
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 17:27.