Foros del Web - Ver Mensaje Individual

set1992 · #1 (**permalink**) 08/01/2012, 06:50

Estoy haciendo una pagina web como proyecto para clase de final de trimestre y al crear los divs los he creado con % para que se ajusten dependiendo de la resolucion de la pantalla, pero tengo un problema y es que cuando haces la ventana demasiado pequeña desconfigura y mueve los bloques de sitio. Ahi alguna forma de hacerlo con % y que no se moviera?O tengo que hacerlo obligatoriamente con medidas para que no se descoloque? Os dejo el codigo del html y css y un par de imagenes para que veais a que me refiero.(Capturas hechas con chrome por si es necesario saber el navegador)

HTML

Código:

<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8"/>
<title>Titulo Proyecto</title>
<link href="body.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="aprendejava.xml" />
</head>


<body>


<div id="container">


    <div id="header">
        <img src="./imagenes/banner.png" alt="Banner" width="100%" height="20%">
        <ul class="menu">
             <li><a href="#">Noticias</a></li><!--Algun que otro ejemplo html y css y presentacion-->
            <li><a href="#">Capitulos</a></li><!--Introducir capitulos sobre java-->
            <li><a href="#">Descargas</a></li><!--tabla con diferentes descargas-->
            <li><a href="#">Contactanos</a></li><!--Formulario de envio de email-->
            <li><a href="#">Libre</a></li>
      </ul>
  </div>
<br><br>


  <div id="sidebar1">
         <ul class="nav">
              <li><a href="#">Capitulo 1</a></li>
              <li><a href="#">Capitulo 2</a></li>
              <li><a href="#">Capitulo 3</a></li>
              <li><a href="#">Capitulo 4</a></li>
         </ul>
  </div>
    
    <div id="content">
        http://www.3dtin.com/
        Contenido de content
      <video width="480" height="240" controls>
        <source src="tu_video.mp4" type="video/mp4" />
        <p>Tu navegador no soporta HTML5 ni Flash ¿En que era estas?</p>
        </video>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    
    <div id="footer">
    Esta pagina esta registrada a nombre de Sergio Tobal y cuenta con los siguientes certificados: 
    </div>
</div>




</body>
</html>

CSS

Código:

@charset "utf-8";#container {/*El # viene porque es un id y por lo tanto solo existira una copia del container*/
    width: 80%;/*Unicamente ocupara el 80% de toda la pagina*/
    max-width: 1260px;/*Por si acaso limito el maximo que puede alcanzar el bloque central*/
    min-width: 720px;/*Lo mismo pero por el minimo*/
    margin: 0 auto 0 auto;/*Con esto se definen los margenes de la web para que este centrado, en orden va top right bottom left*/
}
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; /*Letras que se van a usar, una detras de otra hasta encontrar alguna que tenga el usuario.*/
    background: url(imagenes/body-back.jpg) fixed center center;
}
#header {
    /*background: #6F7D94;*/
}
ul{
    margin: 0 auto;
    padding: 0;
}
ul.menu li{
    text-align: left;
    float: left;
    list-style: none;
    margin: 5px;
    border: 1px solid #CCC;
    display:block;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.4);
}
ul.menu a, ul.menu a:visited {
    display: block;
    padding: 3px 10px 3px 10px;
    text-decoration: none;
    border-radius: 10px;
}
ul.menu a:hover, ul.menu a:active, ul.menu a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
    background:rgba(0,51,255,0.4);
    color: #FFF;
}


#sidebar1 {
    float: left;
    width: 19%;
    background: #93A5C4;
    /*padding-bottom: 10px;*/
    margin-right:10px;
    border-radius: 10px;
}
ul.nav {
    list-style: none;/*Esto elimina el marcador de lista */
    border-top: 1px solid #666;/*Esto crea el borde superior de los vínculos*/
    margin-top: 10px;
    margin-bottom: 10px;/*Esto crea el espacio entre la navegación en el contenido situado debajo */
}
ul.nav li {
    border-bottom: 1px solid #666; /* esto crea la separación de los botones */
}
ul.nav a, ul.nav a:visited { /* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados */
    padding: 5px 5px 5px 15px;
    display: block; /* esto asigna propiedades de bloque al vínculo, lo que provoca que llene todo el LI que lo contiene. Esto provoca que toda el área reaccione a un clic de ratón. */
    text-decoration: none;
    background: #8090AB;
    color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
    background: #6F7D94;
    color: #FFF;
}
#content {
    float: right;
    padding: 10px 0;
    width: 80%;
    height:700px;
    float: left;
    background-color:rgba(51,153,153,0.4);
    border-radius: 10px;
}


#footer{
    width:100%;
    height:80px;
    background: #6F7D94;
    float:left;
    clear: both;
    margin-top:10px;
    border-radius: 5px 5px 10px 10px;
}

Con una ventana pequeña

A pantalla completa