Foros del Web » Creando para Internet » CSS »

CSS para hacer esta cabecera

 Estas en el tema de CSS para hacer esta cabecera en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/03/2014, 18:59
 
Fecha de Ingreso: marzo-2014
Ubicación: Bucaramanga
Mensajes: 6
Antigüedad: 10 años, 1 mes
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
  #2 (permalink)  
Antiguo 18/03/2014, 03:40
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: css para hacer esta cabecera
Bienvenido al foro.

¿Y qué parte de da problemas? ¿Qué es lo que no sabes hacer exactamente?
  #3 (permalink)  
Antiguo 18/03/2014, 04:51
 
Fecha de Ingreso: marzo-2014
Ubicación: Bucaramanga
Mensajes: 6
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: CSS para hacer esta cabecera
Buenos días lo que me da problema es como ahogó la botonera y que la imagen me quede así como esta ahy. Mira lo que llevó para que te descuenta del error que ya no se cómo más hacer.

Quedo atento a cualquier ayuda

Etiquetas: html5
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:30.