Foros del Web » Creando para Internet » CSS »

como pongo mi pagian a un layout fijo

Estas en el tema de como pongo mi pagian a un layout fijo en el foro de CSS en Foros del Web. Hola amigos del foro, mi consulta es la siquiente , tengo una pagina hecha en php, combinacion de html , java script, y flash . ...
  #1 (permalink)  
Antiguo 03/11/2005, 08:49
Avatar de chinoloco  
Fecha de Ingreso: julio-2003
Mensajes: 83
Antigüedad: 20 años, 8 meses
Puntos: 1
como pongo mi pagian a un layout fijo

Hola amigos del foro, mi consulta es la siquiente , tengo una pagina hecha en php, combinacion de html , java script, y flash . bueno todo anda muy bien con un resolucion de 800x600 , pero cuando la cambio a 1024x768 como q se achica todo y sale de su proporcion, he visto paginas q si le cambias la resolucion se mantienen en el centro y su estructura no varia , me dijeron q eso lo hacian con un layout fijo buscando en este mismo foro encontre esto
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">
<
head>
<
title>3 col layout with equalising columns and footer</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
style type="text/css">
/* commented backslash hack v2 \*/ 
htmlbody{height:100%;} 
/* end hack */ 
body {
padding:0;
margin:0;
color#000000;
}
#outer{
min-height:100%;
margin-left:130px;
margin-right:130px;
background:#F8E7EC;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color#000000;
}
 
html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color#000000;
}
#left {
position:relative;/*ie needs this to show float */
width:130px
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
z-index:100;
left:-1px;
}
html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}
#right {
position:relative;/*ie needs this to show float */
width:130px;
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
left:1px
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color#FF8080;
color#000000;
text-align:center;
position:relative;
}
html #footer {/*only ie gets this style*/
height:52px;/* for ie5 */
height:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
div,{margin-top:0}/*clear top margin for mozilla*/
html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
#centrecontent {position:relative;z-index:1}
/* css stuff below is just for presentation and not needed for the demo */
#left span {
display:none

#left a:hover {
color#666666;
background#FFFFCC;
text-decorationnone;
}
#left a:hover span {
display:block;
position:absolute;
left:130px;
width:150px;
z-index:20;
background:#fff;
}
@
media all and (min-width0px){
#left a:hover span {
top:150px;
}
}
#footer span {
display:none

#footer a:hover {
color#666666;
background#FFFFCC;
text-decorationnone;
}
#footer a:hover span {
display:block;
position:absolute;
top:-95px;
width:150px;
z-index:20;
background:#fff;
left:50%;
}
html body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/
</style>
</
head>
<
body>
<
div id="minHeight"></div>
<
div id="outer"
<!-- <
div id="clearheader"></div> -->
 
<
div id="left"
Izquierda
</div>
<
div id="right"
Derecha
</div>
<
div id="centrecontent"
    <!--
centre content goes here -->
Centro
</div>
<
div id="clearfooter"></div> <!-- to clear footer -->
</
div><!-- end outer div -->
<!--<
div id="footer">Footer - | <a href="3colfixedtest_1.htm">Left column longest</a
| <
a href="3colfixedtest_2.htm">Centre column longest</a> | <a href="3colfixedtest_3.htm">Right 
column longest
</a> | <a href="3colfixedtest_pob.htm">Example Page<span><img src="images/screenexample.gif" alt="example page using the above techniques" width="150" height="85" /></span></a
| - 
Footer 
<p></p>
</
div>-->
<!--<
div id="header">Header right column longest footer at bottom of document.</div>-->
</
body>
</
html>
-------------------------------------------------------------------------------- 
pero no he podido adaptarlo a mi pagina , ya q utilizon iframes , quisier saber como puedo hacer :
mi codigo es el siguiente:
Código PHP:
<head>
<title>INMOBILIARIA HORIZONTE</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="estilotabla.js"></script>

<script language="javascript">
//FECHA ACTUAL EN FORMATO TEXTO
//Autor: Iván Nieto Pérez
//Este script y otros muchos pueden
//descarse on-line de forma gratuita
//en El Código: www.elcodigo.net
function MostrarFecha()
   {
   var nombres_dias = new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado")
   var nombres_meses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre")

   var fecha_actual = new Date()

   dia_mes = fecha_actual.getDate()        //dia del mes
   dia_semana = fecha_actual.getDay()        //dia de la semana
   mes = fecha_actual.getMonth() + 1
   anio = fecha_actual.getYear()

   if (anio < 100)                    //pasa el año a 4 digitos
      anio = '19' + anio
   else if ( ( anio > 100 ) && ( anio < 999 ) ) {    //efecto 2000
      var cadena_anio = new String(anio)
      anio = '20' + cadena_anio.substring(1,3)
   }

   //escribe en pagina
   document.write(nombres_dias[dia_semana] + " " + dia_mes + " de " + nombres_meses[mes - 1] + " de " + anio)
   }

</script>


</head>
<body background="imagenes/amarillo.png">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" width="100%" height="78">
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0" background="imagenes/azul.JPG">
      <tr>
        <td background="imagenes/amarillo.png">
            <img name="logoprincipal" src="imagenes/logo_principal1.png" width="410" height="78" border="0" alt="">
        </td>
        <td background="imagenes/amarillo.png" width="45%"><IMG SRC="imagenes/HORIZONTES.png" width="215"></td>
      </tr>
      <td background="imagenes/amarillo.png"><b>Chiclayo,Peru</b><!-- Para que muestre la fecha -->
       <script language="JavaScript">
      MostrarFecha()
      </script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="imagenes/favoritos.gif">&nbsp;&nbsp;<a href="index.php"><img src="imagenes/inicio.gif"></a>&nbsp;&nbsp;<img src="imagenes/correo.gif"></td>
     
      <td background="imagenes/amarillo.png" align="right"><? include("reproductor.php");?></td>
    
    </table>
    
    </td>
  </tr>
  <tr>
    <td width="100" height="100%" valign="top">
    
    <table width="100%"  border="0">
       <tr>
            <td valign="top">
        <? require_once('menu_buscar.php');?>
            <? require_once("menuprincipal.php"); ?>
            <? require_once('recomendar.php');?>


        </td>
       </tr>
    </table>

    </td>
    <td width="100%" height="100%">
    
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
        <td>
            <iframe name="centro" height="100%" width="100%" src="inicio.php"></iframe>
        </td>
     </tr>

    </table>

    </td>
  </tr>
</table>

</body>
  #2 (permalink)  
Antiguo 03/11/2005, 09:43
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 2 meses
Puntos: 9
Bueno tienes varias formas de hacerlo... Con una capa fija, o también especificando el ancho de la tabla. En vez de 100% le pones una cantidad fija y no te cambiara de tamaño sea la resolucion que sea.

Otra cosa es que quieras esa tabla centrada en la pagina o pegada al margen izquierdo... bueno o al derecho si quieres
Para esto ultimo, metes todo tu codigo dentro de otra table con width=100% y align=a lo que tu quieras

Suarte chinoloco.
__________________
..:: moNTeZIon ::..
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 08:47.