maquetar pagina con css un encabezado, menu orizontal, y el contenido divido en tres columnas (izquierda, centro y derecho) abajo una zona de contactos, luego abajo un submenu orizontal y por último el pie de pagina.
he creado una, pero la columna de la derecha a la hora de verlo en el I.E no se me ajusta. en Fire si se ajusta pero el menu sale sobre el encabezado. le envio el codigo para que me ayuden.
deantemano muchas gracias:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "direccion"> <head> <title>Prueba</title> <style> body { margin:0; padding:0; /* text-align:center; */ } #content { text-align:left; margin:auto; background-color:#ffffff; width:800px; height: auto; } #cabecera { width: 800px; height:100px; background-color:#fffff; } #navegador{ background : #F5F4C3 url(images/fondonav.gif); padding : 3px 10px 5px 10px; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; margin-top: 0px; } .columna-1 { float:left; padding:0px 15px 10px 0; width:200px; line-height:normal; border-right:solid #8c953b 1px; } .columna-2 { float:left; padding:0px 0 10px 15px; width:300px; line-height: normal; } .columna-3 { float:right; width:200px; height:110px; margin-top: 0px; } #pie { clear:both; width:800px; height:50px; background-color:#cccccc; } .Estilo1 {color: #FFFFFF} .titulo {font-size: 20px} .style4 {font-size: 12px} .style5 {font-size: 16px} .titulo-verde-12pt {font-size: 12px; font-weight: bold; } </style> <!--<style type="text/css"> #thicktabs{ margin: 0 auto; width: 800px; /* or whatever */ padding: 0; font: bold 13px Tahoma; } #thicktabs li{ display: inline; } #thicktabs li a{ float: left; color: black; padding: 8px 11px; /*padding of tabs*/ text-decoration: none; background: transparent url(plantillas/pinkbg.gif) top right no-repeat; border-top: 1px solid #d3bdbe; /*top border style*/ border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/ } #thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/ border-left: 1px solid #d3bdbe; /*left border style*/ } #thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/ border-right: 1px solid #d3bdbe; /*right border style*/ background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/ } #thicktabs li a:visited{ color: black; } #thicktabs li a:hover{ color: black; background-image: url(plantillas/pinkbgover.gif); /*background image swap on hover*/ } </style> <!--[if IE]> <style type="text/css"> p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/ padding-top: 1em; } </style> <![endif]--> </head> <body> <span class="Estilo1"></span> <div id="content"> <div id="cabecera"><img src="imagenes2/izalco.JPG" width="800px" height="179" border="0"></div> <!-- <ul id="thicktabs"> <li><a id="leftmostitem" href="dirección">Home</a></li> <li><a href="dirección">Institución</a></li> <li><a href="dirección">Proyectos</a></li> <li><a href="dirección">Areas de Trabajo </a></li> <li><a href="dirección">Foros</a></li> <li><a href="dirección">Gallery</a></li> </ul> <br style="clear: left" /> <p class="iepara">Paragraph that follows... </p> --> <div id="navegador"> <div class="swfcentro" align="middle"> <td width="800" height="120" valign="top" bgcolor="#FFFFFF"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="dirección" width="786" height="120"> <param name="movie" value="barramenu.swf"> <param name="quality" value="high"> <embed src="barramenu.swf" quality="high" pluginspage="dirección" type="application/x-shockwave-flash" width="786" height="120"></embed> </object></td> </div> </div> <!-- <div id="contiene"> <div id="Izquierda"><strong>Zona Exclusiva </strong></div> <div id="Central"><strong> Presentación de la Empresa </strong></div> <div align="Derecha"><strong> Noticias</strong></div> </div> --> <!-- <div id="contenido"></div> --> <div class="columna-1"> <h1 align="left" class="titulo-verde-12pt"> </h1> <h1 align="center"><span class="titulo-verde-12pt">Zona Exclusiva</span></h1> <p align="left">Login <input type="text" name="textfield"> </p> <p align="left">Password <input type="text" name="textfield2"> </p> <p align="left">¿Olvido su contraseña <p align="left"> <hr style="border:1px dashed #999999; width:360px" /> </p> <h1 align="center"><span class="titulo-verde-12pt">Licitaciones</span></h1> <p align="left"></p> </div> <div class="columna-2"> <h1 align="left" class="titulo-verde-12pt"> </h1> <h1 align="center"><span class="titulo-verde-12pt">Presentación de la Empresa</span></h1> <p align="left"></p> <p align="left"> <hr style="border:1px dashed #999999; width:360px" /> </p> <h1 align="center"><span class="titulo-verde-12pt">Empresas Asociadas</span></h1> <p align="left"></p> <p align="left"></p> </div> <div class="columna-3"> <div class="text-imagen"><h1 align="center" class="titulo-verde-12pt"> </h1> <h1 align="center" class="titulo-verde-12pt"><span class="style4">Noticias</span></h1> <h1 align="center" class="titulo-verde-12pt"> </h1> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <p align="center" class="titulo-verde-12pt"> </p> <h1 align="center"><span class="titulo-verde-12pt"><br /> </span><br /> <span class="link"> </span></h1> </div> </div> <div id="pie"> <p align="center">Agencia de Desarrollo Economico Local Sonsonate.</p> <p align="center">Sonsonate, El Salvador</p> <Adel sonsonate></div> </div> </body> </html>
