Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Jack_F en 12 de Marzo 2017, 06:48
-
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
<!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
*{
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.
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
-
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