M8 - Aplicacions web / Activitats UF5: HTML i CSS / Solució Vores
De wikiserver
Exercici 4: Vores
/* === IMPORTANT === No modifiquis aquests estils, 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 ----------------------------------------------------------*/ #contenedor { width: 90%; max-width: 900px; width: expression(document.body.clientWidth > 901? "900px": "auto"); margin: 0 auto; } #cabecera, #menu, #lateral, #contenido, #contenido #principal, #contenido #secundario, #pie { border: 2px solid #777; } #cabecera { clear: both; } #menu { clear: both; } #lateral { float: left; width: 20%; } #contenido { float: right; width: 78%; } #contenido #principal { float: left; width: 78%; } #contenido #secundario { float: right; width: 20%; } #pie { clear: both; } /*-- Capçalera --------------------------------------------------------*/ #cabecera #logo { float: left; } #cabecera #buscador { float: right; } /*-- Menú ------------------------------------------------------------*/ #menu ul#menu_principal li { display: inline; float: left; } /*-- Secció Principal -----------------------------------------------*/ #contenido #principal .articulo img { width: 100px; float: left; } /*-- Peu de pàgina ---------------------------------------------------*/ #pie .enlaces { float: left; } #pie .copyright { float: right; } /* === IMPORTANT === A partir d'aquí, es poden afegir tots els estils propis que siguin necessàris. ================= */ #cabecera, #menu, #lateral, #lateral #noticias, #lateral #publicidad, #contenido, #contenido #principal, #contenido #secundario, #pie { padding: .5em; border: none; } #lateral { padding: 0; } #cabecera { padding: 1em; } #menu { margin-bottom: .5em; border-bottom: 1px solid #004C99; } #contenido { width: 77%; padding: 0; } #contenido #principal { width: 73%; } #contenido #secundario { border: 1px solid #C60; } #pie { padding: .5em 0; margin-top: 1em; border-top: 1px solid #C5C5C5; border-bottom: 1px solid #C5C5C5; } #contenido #principal .articulo { margin-bottom: 1em; } #contenido #principal .articulo img { margin: .5em; } #lateral #noticias { border: 1px solid #C5C5C5; } #lateral #publicidad { margin-top: 1em; border: 1px dashed #C60; }