Autor Tema: Menú horizontal CSS o vertical qué significa nav-menu ul color de links CU01049D  (Leído 2231 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Respuesta al ejercicio CU01049D del curso básico de desarrollo web con CSS usando Notepad++ como editor

#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0;}:
Define familia tipografica, elimina simbolo y coloca margenes en 0 (internos como externos),en cada etiqueta en la lista "ul".

#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}
Define a cada "li" como flotante posicionandose a la izquierda, margin top y bottom 0 e izquierda y derecha 0.15em (espacio vertical entre cada "li")
borde de 5px; estilo groove y color del mismo.

#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}
Define color de fondo de cada link, la altura del mismo y la altura de linea, posiciona cada link flotante hacia la derecha, ancho de 9em;
cada link sera de tipo block; con borde 0.1em, sólido y color #dcdce9, color de texto, sin decoración y alineado al centro.

#nav-menu li a:hover {background-color: #FF6347;}
Define el color al pasar el mouse por la etiqueta
« Última modificación: 17 de Junio 2017, 18:33 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Menú horizontal CSS o vertical - Ejercicio final: (CU01049D)
« Respuesta #1 en: 04 de Abril 2017, 22:18 »
Buenas alefaletti.

Te faltaría la descripción sobre la parte html. También tendrías que explicar correctamente los selectores css, por ejemplo:

#nav-menu ul {..}, Hace referencia a las listas no ordenadas que estén dentro de un elemento que tenga como id, nav-menu.

Faltarían los demás.

Saludos.  ;D

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Ejercicio final - Menu horizontal y vertical (Entrega CU01049D)
« Respuesta #2 en: 13 de Abril 2017, 01:23 »
Descripcion CSS:

Código: [Seleccionar]

<html>
<head><title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
    <style type="text/css">
       
/*Curso CSS aprenderaprogramar.com*/
        #nav-menu ul {font-family: sans-serif; list-style: none; padding:0;margin:0;}
        /* Define la familia tipografica de la lista ul, elimina los símbolos de viñeta y ubica la lista con margenes externos e internos en 0px*/
        #nav-menu li {float: left;margin: 0.0.15em; border: 5px groove #FFAA33 ;}
        /* Cada etiqueda li se situara de manera horizontal (una a lado de la otra), define margen externo (laterales, arriba y abajo) , el estilo, grosor y color del borde. de las etiquetas*/
        #nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
        width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}
        /*Define el color de cada link, su altura, y el espacio entre lineas (lo cual se podria mencionar como el margen top a partir del cual se posiciona el texto interno), situa los links de manera horizontal, define largo, hace que el elemento se muestre como caja block, deine borde, estilo y color del mismo, quita la decoracion (el subrayado de todo link) y situa el texto en el centro de la caja*/
        #nav-menu li a:hover {background-color: #FF6347; }
        /*al pasar el mouse por el link modifica el color original*/
    </style>
</head>

Descripcion HTML

Código: [Seleccionar]
<body>

<div id="nav-menu">
    <ul id="navlist"><li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
        <li><a href="http://aprenderaprogramar.com">Cursos</a></li>
        <li><a href="http://aprenderaprogramar.com">Libros</a></li>
        <li><a href="http://aprenderaprogramar.com">Divulgación</a></li>
        <li><a href="http://aprenderaprogramar.com">Humor</a></li>
    </ul>

</div>

<!-- Define un div con id “nav-menu”, dentro del mismo se realiza una lista ul con id “navlist”, el primer li con id “active” y link hacia vuestra pagina. Lo mismo en los demas “li” pero  id.-->

</body>

</html>



pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Menú horizontal CSS o vertical - Ejercicio final: (CU01049D)
« Respuesta #3 en: 17 de Abril 2017, 00:45 »
Hola alefaletti.

Ya tenías abierto un tema con la  solución de este ejercicio, he movido tu última solución propuesta para que esté con el anterior y te pido que intentes no crear dos o más veces la misma solución.

Sobre la resolución al ejercicio te sigo diciendo lo mismo que te respondí la primera vez que publicaste una respuesta a este ejercicio.

Citar
Te faltaría la descripción sobre la parte html. También tendrías que explicar correctamente los selectores css, por ejemplo:

#nav-menu ul {..}, Hace referencia a las listas no ordenadas que estén dentro de un elemento que tenga como id, nav-menu.

Faltarían los demás.

Saludos. ;D
« Última modificación: 17 de Junio 2017, 18:32 por Alex Rodríguez »

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:Menú horizontal CSS o vertical - Ejercicio final: (CU01049D)
« Respuesta #4 en: 18 de Abril 2017, 02:16 »
Pedro muchas gracias! Va mi nuevo intento:

Código: [Seleccionar]

<html>
<head><title>Portal web - aprenderaprogramar.com</title>  /*Define el titulo de la pestaña*/
<meta charset="utf-8"> /* Etiqueta con la que nos aseguramos que el navegador conocerá la codificación de caracteres utilizada*/
<style type="text/css"> /*Define los estilos en el mismo HTML*/
       
/*Curso CSS aprenderaprogramar.com*/
#nav-menu ul {font-family: sans-serif; list-style: none; padding:0;margin:0;}
/* Define la familia tipografica de la lista no ordenada "ul" que se encuentre dentro de un id de nombre "nav-menu". Elimina los símbolos de viñeta y ubica la lista con margenes externos e internos en 0px*/

#nav-menu li {float: left;margin: 0.0.15em; border: 5px groove #FFAA33 ;}
/* Define que cada etiqueda "li" que este dentro de un id de nombre "nav-menu" se situara de manera horizontal (una a lado de la otra), con el valor del margen externo (laterales, arriba y abajo) , el estilo, grosor y color del borde*/

#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
        width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}
/*Define el color de cada link (dentro de un id con nombre "nav-menu"),  su altura, y el espacio entre lineas (lo cual se podria mencionar como el margen top a partir del cual se posiciona el texto interno), situa los links de manera horizontal, define largo, hace que el elemento se muestre como caja block, deine borde, estilo y color del mismo, quita la decoracion (el subrayado de todo link) y situa el texto en el centro de la caja*/

#nav-menu li a:hover {background-color: #FF6347; }
/*al pasar el mouse por el la etiqueta "li a" dentro de un id con nombre "nav-menu" modifica el color original pasando al #FF6347 */
    </style>
</head>


 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".