Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: como hacer que una web ocupe toda la ventana

  1. #1
    Recien Llegado! Habitual
    Fecha de Ingreso
    11 jun, 10
    Mensajes
    10
    Poder de Reputación
    7

    como hacer que una web ocupe toda la ventana

    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

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicación
    Estella-Spain
    Mensajes
    2,254
    Poder de Reputación
    21

    Re: como hacer que una web ocupe toda la ventana

    Cita Iniciado por casialicia
    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.html

    En 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 ejemplo
    Tambié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:107p x;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
    Agradecido de los que aprenden enseñando

  3. #3
    Recien Llegado! Habitual
    Fecha de Ingreso
    11 jun, 10
    Mensajes
    10
    Poder de Reputación
    7
    Muchas gracias Raulyure

    Aún soy muy nueva en esto
    y me pierdo un poco con la programación,
    pero esto que me has dicho funciona.

    Funciona para el texto,
    pero ¿qué tendría que hacer para que funcionara también con imágenes?
    En realidad quería aprovechar los códigos para aplicarselos a imágenes para que se me ajustaran al tamaño de la ventana,
    incluso cuando esta no está maximizada,
    es eso posible?

  4. #4
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    65
    hola

    las imagenes al expandirse o reducirse se deforman un poco


    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  5. #5
    Recien Llegado! Habitual
    Fecha de Ingreso
    11 jun, 10
    Mensajes
    10
    Poder de Reputación
    7
    Hola Yaneth

    Ya he comprobado
    que las imágenes al expandirse/comprimirse
    pueden variar sus proporciones.

    Yo estoy buscando una opción para que eso no sea así.
    Casi lo he conseguido,
    es mediante un script,
    pero ahora tengo que averiguar como meterlo en la web
    y ordenarlo
    (que afecte a una capa concreta....)

    Se aceptan ideas,
    porque lo único que se de programación
    es lo que me ha enseñado Jorgens con este curso
    y lo que voy trasteando por ahí

    (muchas gracias por abrir las puertas Jorgens!!!!!)
    (y gracias a todos los que haceis crecer con vuestras aportaciones)

Temas Similares

  1. Problema: como hacer que sea visible toda la pantalla
    Por kalimero en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 2
    Último Mensaje: 09/05/2010, 18:10
  2. quiero que mi fondo ocupe toda la pantalla
    Por volvoreta en el foro Foro General
    Respuestas: 10
    Último Mensaje: 14/06/2007, 16:54

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •