M8 - Aplicacions web / Activitats UF5: HTML i CSS / Solució Marges - Farciments

/* === IMPORTANT ===

  No modifiquis aquests estils, donat que són imprescindibles per a que la pàgina es vegi correctament.
  ================= */

/*-- Bàsic ----------------------------------------------------------*/ ul, ul li { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p, form { margin: 0; padding: 0; } .clear { clear: both; } img { border: none; }

/*-- Layout ----------------------------------------------------------*/

1. contenedor {

 width: 90%;
 max-width: 900px;
 width: expression(document.body.clientWidth > 901? "900px": "auto");
 margin: 0 auto;

}

1. cabecera, #menu, #lateral, #contenido, #contenido #principal, #contenido #secundario, #pie {

 border: 2px solid #777;

}

1. cabecera { clear: both; }
2. menu { clear: both; }
3. lateral { float: left; width: 20%; }
4. contenido { float: right; width: 78%; }
5. contenido #principal { float: left; width: 78%; }
6. contenido #secundario { float: right; width: 20%; }
7. pie { clear: both; }

/*-- Capçalera --------------------------------------------------------*/

1. cabecera #logo { float: left; }
2. cabecera #buscador { float: right; }

/*-- Menú ------------------------------------------------------------*/

1. menu ul#menu_principal li { display: inline; float: left; }

/*-- Secció Principal -----------------------------------------------*/

1. contenido #principal .articulo img { width: 100px; float: left; }

/*-- Peu de pàgina ---------------------------------------------------*/

1. pie .enlaces { float: left; }
2. pie .copyright { float: right; }

/* === IMPORTANT ===

  A partir d'aquí, es poden afegir tots els estils propis que seguin necessàris.
  ================= */

1. cabecera,
2. menu,
3. lateral,
4. lateral #noticias,
5. lateral #publicidad,
6. contenido,
7. contenido #principal,
8. contenido #secundario,
9. pie {

 padding: .5em;

}

1. lateral {

 padding: 0;

}

1. cabecera {

 padding: 1em;

}

1. menu {

 margin-bottom: .5em;

}

1. contenido {

 width: 77%;
 padding: 0;

}

1. contenido #principal {

 width: 73%;

}

1. pie {

 padding: .5em 0;
 margin-top: 1em;

}

1. contenido #principal .articulo {

 margin-bottom: 1em;

}

1. contenido #principal .articulo img {

 margin: .5em;

}

1. lateral #publicidad {

 margin-top: 1em;

}