escalar contenedor a resolucion y centrar capas

belap · #1 (**permalink**) 24/09/2012, 08:40

Buenas a todos, tengo un problemilla con una web que estoy haciendo, el caso es que necesito que el contenedor se ajuste a la resolución escalando la imagen (no de fondo) que hay en el o dejando margenes a los 4 lados si es demasiado grande la pantalla, pero no se como hacerlo. Os dejo el codigo por si alguien puede ayudarme.
Tambien tengo problemas con los div "frasecorta" y "fraselarga" quiero que esten siempre centrados pero ahora se me pegan a la izquierda, quiero que esten como la cabecera.

Gracias de antemano.

Código HTML:

Ver original<body>
    <div id="contenedor">
        <div id="cabecera">
            <ul>
                <li class="inicio"><a href="index.html" title="Inicio">Inicio</a></li>
                <li class="menu"><a href="contacto.html" title="Contacto">Contacto</a></li>                
                <li class="menu"><a href="galeria/galeria.html" title="Galería">Galeria</a></li>
                <li class="menu"><a href="eventos.html" title="Eventos">Eventos</a></li>
            </ul>
        </div>
        <div id="centro">
            
                    <a href="#"><img src="images/imagen.jpg"  border="0" style="box-shadow: 2px 2px 5px black"/></a>
                
            </div>
        </div>
        <div id="frasecorta">
            <p>FRASE CORTA</p>
        </div>
    </div>
    <div id="fraselarga">
        <p>Esta es la frase larga</p>
    </div>
    <div id="pie">
        <p>Pie de página</p>
    </div>
</body>

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
#contenedor{
    position:relative;
    height:100%;
}
 
#cabecera{
    border:#000;
    border-width:2px;
    border-style:solid;
    
    min-width:980px;
    max-width:1200px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
}
 
.inicio{
    text-decoration:none;
    list-style:none;
    font-family:"Trebuchet MS", Geneva, sans-serif;
    float:left;
    font-size:67px;
    font-weight:bold;
}
 
.inicio a{
    text-decoration:none;
    color:#000;
}
 
.inicio a:hover{
    text-decoration:none;
    color:#000;
}
 
.menu{
    text-decoration:none;
    list-style:none;
    font-family:maiandra_gdregular, Geneva, sans-serif;
    font-size:13px;
    font-weight:bold;
    float:right;
    margin-left:10px;
}
 
.menu a{
    text-decoration:none;
    color:#999;
}
 
.menu a:hover{
    text-decoration:none;
    color:#000;
}
 
#centro{
    border:#000;
    border-width:2px;
    border-style:solid;
    min-width:980px;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
 
#frasecorta{
    border:#000;
    border-width:2px;
    border-style:solid;
    
    min-width:980px;
    max-width:1200px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
    
    font-family:maiandra_gdregular, Geneva, sans-serif;
    font-size:30px;
    font-weight:bold;
    text-align:center;
    position:absolute;
    bottom:0px;
}
 
#fraselarga{
    border:#000;
    border-width:2px;
    border-style:solid;
    
    min-width:980px;
    max-width:1200px;
    height:100px;
    left:auto;
    right:auto;
    
    text-align:justify;
    font-family:maiandra_gdregular, Geneva, sans-serif;
    font-size:17px;
    color:#808080;
    font-weight:normal;
    position:absolute;
    bottom:-102px;
}
 
#pie{
    width:99%;
    background-color:#000;
    text-align:center;
    position:absolute;
    bottom:-147px;
}
 
#pie, #pie a, #pie a:hover{
    font-family:maiandra_gdregular, Verdana, sans-serif;
    font-size:17px;
    color:#FFF;
    font-weight:normal;
    text-align:center;
    text-decoration:none;
}

belap · #2 (**permalink**) 24/09/2012, 09:11

Tambien me ocurre, que la capa "frasecorta" "fraselarga" y "pie", se solapan con la capa "centro" si hago muy pequeño el navegador, necesito que llegado a una altura determinada no se haga mas pequeño, sino que salgan los scroll para que no se solapen las capas, no se si me he explicado... :S