Foros del Web - Ver Mensaje Individual

Mikmoro · #7 (**permalink**) 16/02/2007, 05:20

A ver qué tal te va esto.

Código:

<!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>
  <title>EVMB | una tradici&oacute;n desde 1932</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <link href="estilos.css" rel="stylesheet"
 type="text/css" />
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="contenedorGral">
<div id="Cabecera">
<div id="CabezalIzq"><img
 style="width: 258px; height: 88px;" alt=""
 src="fondo-reloj.gif" /></div>
<div id="CabezalDer">
</div>
</div>
<div id="Cabezal">
<div id="CabezalImgs">
<div id="ImgAgenda" title="Imagen"></div>
</div>
<div id="ContenidoIzq">
<div id="MenuImg"><!--Inicio menu-->
<div class="menuPpal">
<ul id="suckertree1">
<!--portada--> <li><a href="#">portada</a>
    <ul>
      <li><a href="#">oficinas</a></li>
      <li><a href="#">historia destacada</a></li>
    </ul>
  </li>
<!--fin portada--> <li><a href="#">la
compa&ntilde;&iacute;a</a>
    <ul>
      <li><a href="#">en que creemos</a></li>
      <li><a href="#">historia de <span
 style="text-transform: uppercase;">evmb</span></a></li>
      <li><a href="#">la asociaci&oacute;n <span
 style="text-transform: uppercase;">dci</span></a></li>
      <li><a href="#">socio corporativo</a></li>
    </ul>
  </li>
  <li><a href="#">los servicios</a></li>
  <li><a href="#">el portafolio</a></li>
  <li><a href="#">novedades</a>
    <ul>
      <li><a href="#">jurisprudencia</a></li>
      <li><a href="#">disposiciones y resoluciones
del <span style="text-transform: uppercase;">inpi</span></a></li>
    </ul>
  </li>
  <li><a href="#">preguntas frecuentes</a></li>
  <li><a href="#">registros de marca</a></li>
  <li><a href="#">legislaci&oacute;n</a></li>
</ul>
</div>
<!--Fin menu-->
</div>
</div>
<div id="ContenidoDer">
<div id="CurvaContenidos">
<h1>----------- //// portadas / oficinas</h1>
</div>
<div id="TextosInternos">
<h2>Titulo secci&oacute;n</h2>
asddggdfg dfgdfgdfgdfgdfgdffgdfg dfgdf dfgdfgdfgdfgdfgdfg dfgdfg dfgdfg
dfgdfgd gdfgdf gd fgd fg<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
</div>
</div>
</div>
</div>
</body>
</html>

CSS

Código:

  html, body { margin: 0pt;
    padding: 0pt;
    color: rgb(102, 102, 102);
    background-color: rgb(255, 255, 255);
    font-family: "Arial",Trebuchet MS,Lucida Grande,Tahoma,Verdana,Helvetica,sans-serif;
    font-size: 12px;
    text-align: center;
    height: 100%;
    overflow: auto;
    }
  #contenedorGral { margin: auto;
    text-align: center;
    position: relative;
    width: 784px;
    background-image: url(file:///C:/Mikel/AAAPruebas/fondo_sombra.gif);
    background-repeat: repeat-y;
    overflow: auto;
    }
  #Cabecera { padding-bottom: 5px;
    width: 765px;
    background-color: rgb(251, 251, 251);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: auto;
    }
  #Cabezal { width: 765px;
    background-color: rgb(251, 251, 251);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 100%;
    }
  #CabezalIzq { padding-bottom: 1px;
    padding-top: 5px;
    width: 258px;
    float: left;
    background-color: rgb(53, 71, 107);
    position: relative;
    background-image: url(file:///C:/Mikel/AAAPruebas/fondo_menu2.gif);
    }
  #CabezalDer { width: 507px;
    background-color: rgb(69, 93, 141);
    position: relative;
    float: right;
    height: 94px;
    }
  #MenuImg { margin: 0px;
    width: 258px;
    height: 355px;
    background-image: url(fondo_menu1.gif);
    background-repeat: no-repeat;
    float: left;
    }
  #ContenidoIzq { text-align: right;
    width: 258px;
    background-image: url(fondo_menu.gif);
    float: left;
    height: 355px;
    }
  #ContenidoDer { background-image: url(fondo_contenidos.gif);
    float: left;
    width: 507px;
    position: relative;
    height: 70%;
    }
  #TextosInternos { padding-left: 80px;
    padding-top: 17px;
    text-align: left;
    float: left;
    position: relative;
    }
  h1 { margin: 0pt;
    font-family: "Arial","Verdana";
    font-weight: bold;
    font-style: italic;
    text-align: right;
    font-size: 12px;
    color: rgb(140, 140, 140);
    letter-spacing: 1px;
    text-transform: capitalize;
    padding-top: 10px;
    padding-right: 10px;
    }
  h2 { margin: 0pt;
    font-family: "Arial","Verdana";
    font-weight: bold;
    font-style: italic;
    text-align: left;
    font-size: 16px;
    color: rgb(61, 65, 100);
    text-transform: capitalize;
    }
  .menuPpal ul { border-bottom: 1px dotted rgb(145, 161, 197);
    padding: 0pt;
    background-color: rgb(92, 106, 141);
    margin-left: 0pt;
    margin-top: 5px;
    text-transform: capitalize;
    list-style-type: none;
    width: 135px;
    line-height: 18px;
    float: right;
    margin-right: 3px;
    }
  .menuPpal ul li { position: relative;
    }
  .menuPpal ul li ul { position: absolute;
    width: 170px;
    top: 0pt;
    visibility: hidden;
    }
  .menuPpal ul li a { border-bottom: 1px dotted rgb(145, 161, 197);
    padding: 1px 5px;
    background: rgb(57, 75, 115) none repeat scroll 0% 50%;
    display: block;
    overflow: auto;
    color: white;
    text-decoration: none;
    }
  .menuPpal ul li a:visited { color: white;
    }
  .menuPpal ul li a:hover { background-color: rgb(92, 106, 141);
    text-decoration: underline;
    }
  * html .menuPpal ul li { float: left;
    height: 1%;
    }
  * html .menuPpal ul li a { height: 1%;
    }
  #CurvaContenidos { margin: 0px;
    width: 507px;
    height: 31px;
    background-image: url(fondo_curva_contenidos.gif);
    background-repeat: no-repeat;
    }
  #CabezalImgs { margin-bottom: 0px;
    margin-top: 0px;
    }
  #ImgAgenda { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_agenda.jpg);
    background-repeat: no-repeat;
    clear: both;
    }
  #ImgAgenda1 { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_agenda-birome.jpg);
    background-repeat: no-repeat;
    }
  #ImgAnteojos { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_anteojos.jpg);
    background-repeat: no-repeat;
    }
  #ImgBirome { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_birome.jpg);
    background-repeat: no-repeat;
    }
  #ImgCables { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_cables.jpg);
    background-repeat: no-repeat;
    }
  #ImgEscaleras { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_escaleras.jpg);
    background-repeat: no-repeat;
    }
  #ImgLapicera { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_lapicera.jpg);
    background-repeat: no-repeat;
    }
  #ImgLapicera1 { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_lapicera1.jpg);
    background-repeat: no-repeat;
    }
  #ImgLapiz { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_lapiz.jpg);
    background-repeat: no-repeat;
    }
  #ImgLibro { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_libro.jpg);
    background-repeat: no-repeat;
    }
  #ImgLibroAbierto { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_libroabierto.jpg);
    background-repeat: no-repeat;
    }
  #ImgMujerCompu { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_mujercompu.jpg);
    background-repeat: no-repeat;
    }
  #ImgMujerCompu1 { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_mujercompu_costado.jpg);
    background-repeat: no-repeat;
    }
  #ImgSilla { margin: 0px;
    width: 765px;
    height: 135px;
    background-image: url(cabezal_sillaroja.jpg);
    background-repeat: no-repeat;
    }
  #tirar { margin: 0px;
    width: 258px;
    height: 88px;
    background-image: url(fondo-reloj.gif);
    background-repeat: no-repeat;
    }

Luego ya con la altura total ya verás cómo hacer según le vayas a poner un pie, o lo que sea.

Mikel.