Tema: CSS para hacer esta cabecera
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/03/2014, 18:59
yolman230
 
Fecha de Ingreso: marzo-2014
Ubicación: Bucaramanga
Mensajes: 6
Antigüedad: 10 años, 2 meses
Puntos: 0
CSS para hacer esta cabecera
Buenas noches seria amaable de ayudarme con este cabecera haciendola en css ya que no se como hacerlo



esto es lo que llevo del codigo

Html

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lan="es">  
  3. <head>
  4.     <title>Centro Caee</title>
  5.     <meta content="utf-8">
  6.     <meta name="description" content="">
  7.     <meta name="viewport" content="width=device-width,initial-scale=1" />
  8.     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  9.     <link rel="stylesheet"  href="estilo.css">
  10.     <!--[IF LT IE 9]>
  11.     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  12.     <![endif]-->
  13. </head>
  14. <body>
  15.     <header>
  16.         <h1>            
  17.             <a href="index.html"></a>
  18.             <img class="fade" alt="Centro De Altos Estudios Empresariales | Crear Futuro" src="" >
  19.         </h1>
  20.         <nav>
  21.             <ul>
  22.                 <li><a href="#">INICIO</a></li>
  23.                 <li><a href="#">EMPRESA</a></li>
  24.                 <li><a href="#">UNIDADES DE NEGOCIOS</a></li>
  25.                 <li><a href="#">GALERIA</a></li>
  26.                 <li><a href="#">BLOG</a></li>
  27.                 <li><a href="#">AULA VIRTUAL</a></li>
  28.                 <li><a href="#">CONTACTO</a></li>
  29.             </ul>
  30.         </nav>
  31.     </header>
  32.     <section id="contenido">
  33.         <section id="principal">
  34.             
  35.         </section>
  36.         <aside>
  37.             
  38.         </aside>
  39.     </section>
  40.     <footer>
  41.         
  42.     </footer>   
  43.         
  44. </body>
  45. </html>

y el css

Código CSS: 
Ver original
  1. /* reseteo universal */
  2.  
  3. *
  4. {
  5.     border: 0;
  6.     margin: 0;
  7.     padding: 0;
  8. }
  9.  
  10. article,figcaption,figure,footer,header,hgroup,nav,section {
  11.     display: block;
  12. }
  13.  
  14. /*termina reseteo universal*/
  15.  
  16. /* estilos del sitio */
  17.  
  18. /* importamos las fuentes a utilizar */
  19. @font-face {
  20.     font-family: 'cd-iconsregular';
  21.     src: url('../fonts/cd-iconspc-webfont.eot');
  22.     src: url('../fonts/cd-iconspc-webfont.eot?#iefix') format('embedded-opentype'),
  23.          url('../fonts/cd-iconspc-webfont.woff') format('woff'),
  24.          url('../fonts/cd-iconspc-webfont.ttf') format('truetype'),
  25.          url('../fonts/cd-iconspc-webfont.svg#cd-iconsregular') format('svg');
  26.     font-weight: normal;
  27.     font-style: normal;
  28. }
  29.  
  30. @font-face {
  31.     font-family: 'lato_blackregular';
  32.     src: url('../fonts/lato-black-webfont.eot');
  33.     src: url('../fonts/lato-black-webfont.eot?#iefix') format('embedded-opentype'),
  34.          url('../fonts/lato-black-webfont.woff') format('woff'),
  35.          url('../fonts/lato-black-webfont.ttf') format('truetype'),
  36.          url('../fonts/lato-black-webfont.svg#lato_blackregular') format('svg');
  37.     font-weight: normal;
  38.     font-style: normal;
  39. }
  40.  
  41. @font-face {
  42.     font-family: 'lato_blackitalic';
  43.     src: url('../fonts/lato-blackitalic-webfont.eot');
  44.     src: url('../fonts/lato-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
  45.          url('../fonts/lato-blackitalic-webfont.woff') format('woff'),
  46.          url('../fonts/lato-blackitalic-webfont.ttf') format('truetype'),
  47.          url('../fonts/lato-blackitalic-webfont.svg#lato_blackitalic') format('svg');
  48.     font-weight: normal;
  49.     font-style: normal;
  50. }
  51. @font-face {
  52.     font-family: 'latobold';
  53.     src: url('../fonts/lato-bold-webfont.eot');
  54.     src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
  55.          url('../fonts/lato-bold-webfont.woff') format('woff'),
  56.          url('../fonts/lato-bold-webfont.ttf') format('truetype'),
  57.          url('../fonts/lato-bold-webfont.svg#latobold') format('svg');
  58.     font-weight: normal;
  59.     font-style: normal;
  60. }
  61.  
  62. @font-face {
  63.     font-family: 'latobold_italic';
  64.     src: url('../fonts/lato-bolditalic-webfont.eot');
  65.     src: url('../fonts/lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
  66.          url('../fonts/lato-bolditalic-webfont.woff') format('woff'),
  67.          url('../fonts/lato-bolditalic-webfont.ttf') format('truetype'),
  68.          url('../fonts/lato-bolditalic-webfont.svg#latobold_italic') format('svg');
  69.     font-weight: normal;
  70.     font-style: normal;
  71. }
  72.  
  73. @font-face {
  74.     font-family: 'latoitalic';
  75.     src: url('../fonts/lato-italic-webfont.eot');
  76.     src: url('../fonts/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
  77.          url('../fonts/lato-italic-webfont.woff') format('woff'),
  78.          url('../fonts/lato-italic-webfont.ttf') format('truetype'),
  79.          url('../fonts/lato-italic-webfont.svg#latoitalic') format('svg');
  80.     font-weight: normal;
  81.     font-style: normal;
  82. }
  83.  
  84. @font-face {
  85.     font-family: 'lato_lightregular';
  86.     src: url('../fonts/lato-light-webfont.eot');
  87.     src: url('../fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
  88.          url('../fonts/lato-light-webfont.woff') format('woff'),
  89.          url('../fonts/lato-light-webfont.ttf') format('truetype'),
  90.          url('../fonts/lato-light-webfont.svg#lato_lightregular') format('svg');
  91.     font-weight: normal;
  92.     font-style: normal;
  93. }
  94.  
  95. @font-face {
  96.     font-family: 'lato_lightitalic';
  97.     src: url('../fonts/lato-lightitalic-webfont.eot');
  98.     src: url('../fonts/lato-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
  99.          url('../fonts/lato-lightitalic-webfont.woff') format('woff'),
  100.          url('../fonts/lato-lightitalic-webfont.ttf') format('truetype'),
  101.          url('../fonts/lato-lightitalic-webfont.svg#lato_lightitalic') format('svg');
  102.     font-weight: normal;
  103.     font-style: normal;
  104. }
  105.  
  106. @font-face {
  107.     font-family: 'latoregular';
  108.     src: url('../fonts/lato-regular-webfont.eot');
  109.     src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
  110.          url('../fonts/lato-regular-webfont.woff') format('woff'),
  111.          url('../fonts/lato-regular-webfont.ttf') format('truetype'),
  112.          url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');
  113.     font-weight: normal;
  114.     font-style: normal;
  115. }
  116.  
  117. /* terminamos la importacion de fuentes  #5680a2 */
  118.  
  119. body{
  120.     background: #5680a2 url();
  121.     color: #fff;
  122.     font-family: "latobold";
  123.     font-size: 16px;
  124. }
  125.  
  126. a{
  127.     color: #57abb8;
  128.     font-weight: bold;
  129.     text-decoration: none;
  130. }
  131.  
  132. a:hover{
  133.     color: #f60;
  134. }
  135. figcaption{
  136.     font-size: .85em;
  137.     padding: .25em;
  138.     text-align: center;
  139. }
  140.  
  141. img,video{
  142.     max-width: 100%;
  143. }
  144.  
  145. header{
  146.     margin: 0 auto;
  147.     max-width: 90%;
  148.     text-align: center;
  149. }
  150. header h1, nav{
  151.     display: inline-block;
  152.     max-width: 100%;
  153.     vertical-align: middle;
  154. }
  155.  
  156. /* empezamos la botonera */
  157. nav {
  158.     padding: 0;
  159.     
  160. }
  161. nav li {
  162.     display: inline;
  163. }
  164. /* aqui aplicamos los colores y la fuentes y tamaños */
  165. nav li a{
  166.     font-family: "latoregular";
  167.     font-size: 1em;
  168.     text-decoration: none;
  169.     float: left;
  170.     padding: .5em;
  171.     background-color: #5680a2;
  172.     color: #fff;
  173. }
  174. /* aqui aplicamos es efecto de mover en mause encima cambie de forma*/
  175. nav li  a:hover{
  176.     background-color: #256280;
  177.     border-radius: .5em;
  178.     margin-top: -.5em;
  179.     padding-bottom: .5em;
  180. }
  181. */
Última edición por pzin; 18/03/2014 a las 03:35 Razón: formato código