Código HTML:
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' );?> <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <?php if ( $my->id ) { initEditor(); } ?> <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/plantilla/css/template.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <title>titulo</title> <body> <div id="cuerpo"> <jdoc:include type="modules" name="cuerpo" style="xhtml"/> <div id="search"> <jdoc:include type="modules" name="buscar" style="xhtml"/> </div><!-- FIN!--> <div id="header"> <h1 class="logo">EQUIPOS<br /> DE MEDICIÓN Y CONTROL DE CALIDAD</h1> </div><!-- FIN--> <!-- FIN LOGO CABECERA Y BUSCADOR!--> <div id="contenedor_principal"> <jdoc:include type="component" /> <!-- Comienzo Contenedor fondo de cuadros --> <div id="cuadros"> </div> <!-- Fin Contenedor cuadros --> <!-- Comienzo contenidor1 --> <div align="center" id="laboratorio"> <jdoc:include type="modules" name="laboratorio" style="xhtml" /> </div><!-- Fin contenidor1 --> <!-- Comienzo contenidor2 --> <div id="ganaderia"> <jdoc:include type="modules" name="ganaderia" style="xhtml" /> </div><!-- Fin contenidor2 --> <!-- Comienzo contenidor3 --> <div id="industria"> <jdoc:include type="modules" name="industria" style="xhtml" /> </div><!-- Fin contenidor3 --> <!-- Comienzo contenidor4 --> <div id="agricultura"> <jdoc:include type="modules" name="agricultura" style="xhtml" /> </div><!-- Fin contenidor4 --> <!-- Comienzo contenidor5 --> <div id="invernaderos"> <jdoc:include type="modules" name="invernaderos" style="xhtml" /> </div><!-- Fin contenidor5 --> </div><!-- Fin contenidor_principal--> <!--inicio pie --> <div id="pie"> PIE..... </div><!-- Fin pie--> </div><!-- Fin cuerpo--> </body> </html>
Código:
body { font-size: 99%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; color: #000; width:99%; overflow:auto; background:url(../../miplantilla/images/background.jpg); } h1.logo a { width: 300px; display: block; background: url(../images/logo.png) no-repeat; height: 80px; position: relative; z-index: 100; left: 352px; margin-top:-19px; } ////////////////////////*/ #header{ width:99%; float:left; position:relative; text-align:center; } /*CUADROS VERDES*/ #cuadros{ position:absolute; top: 150px; float:left; z-index: 0; width: 607px; height: 453px; background: url(../images/cuadros.png) no-repeat; margin-left:120px; } #contenedor_principal{ height:380px; float:left; margin-left:20px; margin-right:20px; width:98%; } #laboratorio { clear:both; position: absolute; left: 129px; top: 179px; z-index: 4; width: 172px; height: 243px; } #ganaderia { position: absolute; left: 274px; top: 320px; z-index: 4; width: 227px; height: 184px; } #industria { position: absolute; left: 331px; top: 153px; z-index: 5; width: 251px; height: 201px; } #agricultura { position:absolute; left: 639px; top: 145px; z-index: 6; width:250px; height:202px; } #invernaderos { position:absolute; left: 505px; top: 307px; z-index:4; width:272px; height:180px; } #pie{ position:relative; width:99%; float:left; clear:both; }