casialicia escribió:en lección dos
en el apartado tamaño y resolución de web,
se explica que esto se puede hacer,
pero que preferimos darle un tamaño fijo....
y si ese no fuera el caso?
si quisieramos que se ajustara al tamaño de ventana?
muchas gracias
y gracias tb por el curso,
hace que parezca una tarea fácil esto de construir una web
un saludo
Hola:
Puede ir a este enlace para que tenga una idea de como existen diferentes formas de hacer lo que usted dice.
http://www.comocreartuweb.com/phpBB2/ftopic24940.htmlEn todo caso imaginemos que usted hace una página (un index.html) y le relaciona a esa página una hoja de estilo (estilo.css
Podría poner en la página index lo siguiente:
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Srict//EN ""
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>mi pagina</title>
<link rel="stylesheet" href="estilo.css"type="text/css"
media="all">
<head>
<body>
<div id="cabecera"><h1>cabecera</h1>
<h2>Escribir lo que sea</h2>
</div>
<div id="izquierda"><h1>izquierda</h1>
<h2>Escribir mas cosas</h2>
xxx xxx xxx xxx xxx </p></div>
<div id="centro"><h1>centro</h1>
<h2>Y seguir escribiendo mas cosas</h2>
ccc ccc ccc ccc ccc</p>
ffff ffff ffff ffff</p></div>
<div id="derecha"><h1>derecha</h1>
<h2>Un poco mas y terminamos</h2>
vvv vvv vvv vvv v</p></div>
<div id="pie">pie</div>
</body>
</html>
Y después crear una hoja de estilo llamada estilo.css
y poner en ella esto.
body{margin:10px}
div#cabecera, div#pie{background-color:#ccc;height:50px;clear:both;}
div#izquierda, div#derecha, div#centro{height:460px;}
div#izquierda{float:left;background-color:#fco;width:20%;}
div#derecha{float:right;background-color:#fco;width:40%;}
div#centro{float:right;background-color:#f93;width:40%;}
Esto sería lo que comunmente se llama un esquema líquido que se adapta a las pantallas.
... ....
Segundo ejemploTambién existe el esquema híbrido, que sería darle medidas en píxeles a la columna de la izquierda y a la derecha, y darles posiciones absolutas a esas capas y darle a la capa central el margin del ancho de la capa izquierda y el margin del ancho de la capa derecha por ejemplo
Si la capa izquierda y la derecha miden de ancho 275px y su position absolute la ponemos a por ejemplo:
En una hoja de estilo
div{padding:10px;border:1px solid #333;overflow:hidden}
div h1, div h2{font-size:1.5em;margin:5px}
div h2{font-weight:normal;}
div#cabecera{height:75px;}
div#izquierda, div#derecha{position:absolute;width:275px;top:107px;height:395px;border-top:none;}
div#izquierda{left:10px;background-color:#d5ebf9}
div#derecha{right:10px;background-color:#d5ebf9}
div#centro{margin-left:297px;margin-right:300px;border:0px;}
div#pie{border-top:none}
Y en la página
<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.0 Srict//EN ""
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>mi pagina</title>
<link rel="stylesheet" href="estilo.css"type="text/css"
media="all">
<head>
<body>
<div id="cabecera"><h1>cabecera</h1>
<h2>Escribir lo que sea</h2>
</div>
<div id="izquierda"><h1>izquierda</h1>
<h2>Escribir mas cosas</h2>
xxx xxx xxx xxx xxx </p></div>
<div id="centro"><h1>centro</h1>
<h2>Y seguir escribiendo mas cosas</h2>
ccc ccc ccc ccc ccc</p>
ffff ffff ffff ffff</p></div>
<div id="derecha"><h1>derecha</h1>
<h2>Un poco mas y terminamos</h2>
vvv vvv vvv vvv v</p></div>
<div id="pie">pie</div>
</body>
</html>
El truquillo está en utilizar de márgenes laterales (en la capa central) el ancho de las columnas izquierda y derecha para que la capa centyral no se ponga por encima de los laterales.
Bueno, le sugiero que para aprender un poco de los layouts (que son estos esquemas de paginas) , seguramente por internet hay páginas que lo explican mcho mejor que yo
Saludos
