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.
Tema: CSS HTML Diseño web varias columnas diferencia entre usar pixeles y % CU01036D (Leído 1898 veces)
RSS -
WAP2