Tema: cajas
Ver Mensaje Individual
  #14 (permalink)  
Antiguo 11/02/2013, 15:29
faluar
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: cajas

Buenas tardes tio!!

Quería darte las gracias por toda la ayuda que me has prestado y aprovechar tb para comunicarte que ya lo he entendido y lo he enviado y parece ser que está todo bien. MUCHISIMAS GRACIAS!!!

Por otro lado, resulta que también tengo otro ejercicio pendiente, el cual lo he enviado, pero me corrige de nuevo otras cosas que no termino de entender y tal vez tú puedas ayudarme.

EL profesor me pone el siguiente enunciado:

Crea un documento XHTML con DOCTYPE transicional con estilos internos que presente una página como la que se muestra.


Estas son algunas de las consideraciones a tener en cuenta:

• Página centrada de 800 píxeles de ancho.

• Reinicializa todos los márgenes y rellenos como primera declaración de estilos.

• Cabecera y pie de página que ocupen todo el ancho y cuyas alturas se ajusten al contenido.

• Distancia entre elementos de 15 píxeles.

• Una columna a la derecha de 200 píxeles de ancho.

• El primer bloque de texto simulará texto saliéndose por ambos lados de la caja. Los bloques de texto tendrán un borde de 5 píxeles.





Yo le respondí con lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body
{
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: normal;
text-transform: lowercase;
color: #000000;
text-decoration: none;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 100%;
background-color: #DFDFDF;
}
div, dl, dt, dd, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
margin: 0px;
padding: 0px;
}
#Contenedor
{
padding: 0px;
height: auto;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FDFDFD;
}
#Cabecera
{
padding: 0px;
height: auto;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #666666;
}
#Cabecera #Titulo {
margin-top: 66px;
font-family: Verdana, Geneva, sans-serif;
font-size: 36px;
font-weight: bold;
font-variant: normal;
color: #FF0000;
text-transform: uppercase;
margin-left: 15px;
position: absolute;
}
#Cabecera #SubTitulo {
margin-top: 110px;
margin-left: 23px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
font-size: 12px;
position: absolute;
}
#Pie
{
padding: 0px;
height: auto;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #666666;
position: absolute;
left: 0%;
right: 0%;
bottom: 0px;
}
#Pie #Titulo {
margin-top: 66px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
text-transform: uppercase;
margin-left: 15px;
position: absolute;
}
#Izquierda
{
clear: left;
height: auto;
width: 535px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
background-color: #E5E5E5;
float: left;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 25px;
display: inline-block;
}
#Derecha
{
clear: both;
height: auto;
width: 170px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
background-color: #B6B6B6;
float: right;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 0px;
margin-left: 0px;
display: inline-block;
right: auto;
left: 0px;
}
#Texto_1
{
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 5px dashed #D6D6D6;
background-color: #F9F9F9;
height: auto;
width: 500px;
}
#Texto_1 p#P1 {
margin-left: -15px;
margin-top: 15px;
}
#Texto_2 p#P2 {
margin-top: 15px;
margin-left: 15px;
}
#Texto_2
{
padding: 0px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 5px dashed #D6D6D6;
background-color: #F9F9F9;
height: auto;
width: 500px;
}
</style>
</head>
<body>
<div id="Contenedor">
<div id="Cabecera"><h1 id="Titulo">cabecera</h1> <h2 id="SubTitulo">subtitulo de la cabecera</h2></div>
<div id="Derecha">Esto es la columna derecha</div>
<div id="Izquierda">
<div id="Texto_1"><p id="P1">esto es el bloque 1</p></div>
<div id="Texto_2"><p id="P2">esto es el bloque 2</p></div>
</div>
<div id="Pie"><h3 id="Titulo">esto es el pie de pagina</h3></div>
</div>
</body>
</html>

El caso es que ahora me da la corrección y me dice lo siguiente:

Mejor, pero además de tener en cuenta que lo que yo te digo es una guía y no es únicamente lo que has de hacer (si no te haría yo el ejercicio), has de tener en cuenta:

0.- Los nombres que yo te dí, como Cabecera o Izquierda, son para explicarte cómo se llaman... tú siempre llámalos en minúsculas.

1.- Mete "izquierda" y "derecha" dentro de un div llamado "Cuerpo" (en minúsculas)

2.- Haz flotar la cabecera, el cuerpo y el pie hacia la izquierda posicionándolos relativamente y dales un tamaño del 100%


Vamos a ver, con todo esto, la verdad que no veo donde me equivoco, necesito tu ayuda por favor.