Autor Tema: CSS HTML Diseño web varias columnas diferencia entre usar pixeles y % CU01036D  (Leído 1264 veces)

Jack_F

  • Visitante
Hola amigos. Ejercicio CU01036D del curso de iniciación a la programación web con CSS.

Primero que nada voy a explicar mi problema. Cuando creo el ejercicio en otro ordenador sale todo perfecto, y cuando pruebo el ejercicio en mi otro ordenador se rompe o se achica la anchura que especifique primero.

Bueno aquí dejo el ejercicio ahora se me ve muy bien.

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
            <title>Resolucion del ejercicio nº 36 del curso básico de CSS</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="estilos.css">
    </head>
    <body>
            <div id="titulo">
               <h1>Resolución del ejercicio CU01036D</h1>
            </div>
        <div id="contenedor">
           <div class="caja1">
                  <p>Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)</p>
           </div>
           <div class="caja2">
                      <p><a href="#">Menú</a></p>
                      <p><a href="#">Cursos</a></p>
                      <p><a href="#">Humor</a></p>
                      <p><a href="#">Divulgación</a></p>
           </div>
           <div class="caja3">
                  <p>Conoce las últimas novedades del lenguaje JavaScript. (color de fondo: #ADD8E6)</p>
           </div>
            <div class="caja4">
                  <p>Espacio reservado para publicidad</p>
           </div>
           <div class="caja5">
                  <p>Artículo sobre Gimp, un programa de software libre para el diseño gráfico. (color de fondo:#90EE90)</p>
           </div>
           <div class="caja6">
                 <p><a href="#">Contacta con nosotros (color de fondo: #DDA0DD</a></p>
           </div>
           <div class="caja7">
                 <p>Aviso Legal</p>
           </div>
           <div class="limpiador"></div>
        </div>
    </body>
</html>

Código CSS
Código: [Seleccionar]
*{
font-family: arial;
}
.limpiador{
clear: both; padding: 0; border-style: none;
}
#contenedor{
width: 100%;
}
div{
border: solid 1px;
     text-align: center;
}
p{
text-align: center;
}
p a{
text-decoration: none;
  color: green;
}
#titulo{
border-style: none;
  margin: 10px;
}
#titulo h1{
color: red;
  text-decoration: underline;
}
.caja1{
background-color: #DEB887;
}
.caja2{
width: 25%;
  height: 200px;
    float: left;
      background-color: #DA9E9E;
}
.caja3{
width: 50%;
  height: 90px;
    float: left;
      background-color: #ADD8E6;
        padding-right: 21px;
}
.caja4{
width: 369px;
  height: 200px;
    float: right;
      background-color: #DA9E9E;
}
.caja5{
width: 50%;
  height: 108px;
    float: left;
      background-color: #90EE90;
         padding-right: 21px;
}
.caja6{
width: 800px;
  height: 100px;
    float: left;
      background-color: #DDA0DD;
}
.caja7{
width: 780px;
  height: 100px;
    float: right;
      background-color: #DDA0DD;
}

Sera porque tengo el navegador desatualizado, aunque me quedo con esta explicación.
Citar
En resumen, hay que tener siempre presente que los valores width y height son los relativos al contenido de un elemento excluido el padding, borde y margen. El ancho apreciable en pantalla de un elemento puede ser superior al establecido con width debido al padding y al borde. El ancho total asociado a un elemento puede ser superior al establecido con width debido al padding, al borde y al margin.

Gracias. :D
« Última modificación: 14 de Mayo 2017, 19:51 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS. Diseño web una o varias columnas(CU01036D)
« Respuesta #1 en: 20 de Marzo 2017, 20:18 »
Hola Jorgito.

Al usar medidas con pixeles en algunos de los anchos lo que te pasa es que en las pantallas que tengan menos medida de anchura que la anchura que tu has creado se ve todo descolocado, podrías probar hacerlo todo con porcentajes.

Saludos. ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".