josejose2 escribió:hola.. todas las ayudas son considerables asi que gracias por la tuya...
la pagina la estoy editando yo... fue hecha por una empresa hacea años y este, me encargaron a mi de su actualizacion...
resulta que la edite toda para una resolucion de 1024.. y cuando la veo en 800x600 me encuentro con toda la despaginacion de las columnas flotantes.......
y ya he tocado y retocado los % pero no siempre se ven correctos........
no se si existira algun script que automatizen la vista de 1024 a 800x600 o alguna otra tecnica..
estoy superado ante esta situacion la verdad
Hola:
Se supone que hay páginas que se ven en cualquier monitor sin necesidad de estar al tanto de la resolución del monitor.
Lógicamente, teniéndo un límite en algunas capas.
Por ejemplo, utilizar solo capas flotantes o solo con tantos por ciento, requiere un poco de más información, porque por ejemplo, ¿que haremos cuando pongamos una imagen que tiene una anchura fija?. ¿A dónnde nos mandará la capa, o lo que haya en ella, si queremos verla en un monitor de 15?.
Puede que hayan mejores soluciones etc. etc. etc.
pero debo confesar que estoy totalmente de acuerdo con Yaneth en lo que concierne a hacer el curso, para ir tomándo conocimiento de como funcionan las capas o los div.
Por ejemplo, si yo quisiera hacer una página que se viera a todo lo ancho tanto en un monitor con una resolución de 1400 como uno de 800 (tome en cuenta usted la gran diferencia)
lo que haría, sería utilizar un poco una mezcla,
Por ejemplo, una pagina con una cabecera que ocupe todo el ancho, un pie que ocupe todo el ancho, y con tres columnas o capas centrales, una izquierda, una derecha y una central
lo que haría sería hacer la capa izquierda con un ancho fijo, la capa derecha con un ancho fijo, y la capa central, a esa le daría un ancho auto, o sea que se acomode a cualquier resolución de monitor.
Lógicamente, lo que no voy a hacer, es una capa izquierda con ancho fijo y una capa derecha con ancho fijo que entre las dos me ocupen casi los 800px de resolución, ya que ¿dónde metería la capa que iría al medio?. ¿O cuánto me quedaría de espacio en ancho para la capa de en medio?.
Por ello hay que tener cuidado con algunos anchos y lo que ponga dentro, por mucho tanto por ciento que utilice
Como ejemplo, (solo como ejemplo) yo haría lo siguiente:
en la página, utilizaría el siguiente DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
luego crearía las capas necesarias y los códigos de la página me quedarían de esta manera
Pagina
...............................................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Pagina mia</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">
<h1>Cabecera</h1>
<h2>Texto de cabecera</h2>
</div>
<div id="columna-izquierda">
<h1>Columna izquierda</h1>
<h2>Texto de la columna izquierda</h2>
Para saber lo que voy a poner debo tener cuidado</p>
</div>
<div id="contenido">
<h1>Area de contenido</h1>
<h2>Texto de contenido</h2>
Este sera la parte del contenido</p>
Este sera la parte del contenido</p>
Este sera la parte del contenido</p>
Este sera la parte del contenido</p>
Este sera la parte del contenido</p>
Este sera la parte del contenido</p>
Este sera la parte del contenido</p>
Este sera la parte del contenido que pondré con el limite de una altura, ero que se acomode a el ancho de cualquier ordenador</p>
</div>
<div id="columna-derecha">
<h1>Columna derecha</h1>
<h2>Texto de la columna derecha</h2>
Esta sera la columna derecha</p>
</div>
<div id="pie">pie</div>
</body>
</html>
.........................................
Luego crearía una hoja de estilo, la relacionaría con la página y en esa hoja de estilo pondría las directivas para esa página de esta manera:
...............
estilo-general.css
..............
body {margin:10px;font-size:.8em;font-family:sans-serif;}
div{padding:10px;border:1px solid #333;overflow:hidden}
div h1, div h2{font-size:1.5em;margin:5px;}
div h2{dont-weight:normal;}
div#cabecera{height:75px}
div#columna-izquierda{position:absolute;width:250px;top:107px;height:395px;max-height:400px;border-top:none;left:10px;background-color:#d5ebf9;}
div#columna-derecha{position:absolute;width:250px;top:107px;height:395px;max-height:400px;border-top:none;right:10px;background-color:#d5ebf9;}
div#contenido{margin-left:273px;margin-right:275px;border:0px;/*min-height fast hack:
http://www.dustindiaz.com/min-height-fast-hack*/min-height:395px;he… !important;height:395px;}
div#pie{border-top:none}
........................................
Si usted prueba en su ordenador, lo más probable es que las cosas le resulten
Lo que he hecho a sido formatear las capas para que tengan un borde por defecto y un tamaño de titulos por defecto
Luego , he posicionado la columna izquierda y la columna derecha de manera absoluta a la izquierda y a la derecha, para ello he utilizado las propiedades left y right.
Por otro lado, la parte central la he situado de manera normal, el truco está en utilizar de márgenes laterales el ancho de las columnas tanto izquierda como la de la derecha para que la capa central no se sitúe por encima de los laterales.
Claro que la capa central o "contenido", tomará la altura del contenido que tenga dentro
Y para lograr que la capa central tenga el mismo alto que las columnas laterales, podía dejarlo sin definir, en modo "auto", claro que eso es si tuviee sufiviente contenido en esa capa para que la estire
Pero si no es el caso, he utilizado una propiedad que se llama min-height, y para eso tuve que utilizar un hack para que pudiera definir un valor para la propiedad min-height, y le incluyo un !important.
De este modo en navegadores que soportan la propiedad min-height, el alto será "auto", pero en navegadores que no lo soporten, el alto será "395px".
Ya sé que seguramente esto es un "lío patatero", sobre todo, cuando no se tiene mucho conocimiento de como funcionan los div, ni los tantos por ciento, ni las posiciones absolutas, o las relativas, ni los min-height, ni los hack, etc. etc. etc.
Pruebe estos códigos que le he dejado, pero insisto, Hága el curso, y verá que le será fuera de muy ameno, bastante constructivo,
Por eso mi sugerencia sería que tome el consejo de Yaneth y comience a hacer una web desde el principio
Saludos
