Autor Tema: CSS no funciona no aplica los estilos definidos guión extraño problema CU01011D (Leído 2828 veces)

hymsoft · « **en:** 10 de Agosto 2016, 20:00 »

Buenas buenas!!!

Estoy con un problema en la entrega numero CU01011D del curso básico de desarrollo web con CSS. Cundo modifico la hoja de estilo para que quede como dice el curso o sea asi...

Código: [Seleccionar]

/* Curso CSS estilos aprenderaprogramar.com*/
#menu1 {
  color:red; 
  background-color: DarkGray; 
  text-decoration:underline; 
} 

#menu1 a {
  color:green; 
  text-decoration:none; 
}

no me respeta la parte de menu1 a con respecto al text-decoration, o sea, si en menu1 pongo none, en todo se pone none, si pongo underline, en todo se pone underline, incluso probando, me aplico 2 estilos superpuestos uno arriba de otro con este codigo

Código: [Seleccionar]

/* Curso CSS estilos aprenderaprogramar.com*/
#menu1 {
  color:red; 
  background-color: DarkGray; 
  text-decoration:underline; 
} 

#menu1 a {
  color:green; 
  text-decoration:line-through; 
}

me quedo como muestro en la siguiente imagen

dejo el codigo principal tambien por las dudas...

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!—Código base para el curso -->
<html>
  <head>
    <title>Portal web - aprenderaprogramar.com</title>
    <meta charset="utf-8">
    <meta name="description" content="Portal web aprenderaprogramar.com"> <meta name="keywords" content="aprender, programar, cursos, libros">
    <link rel="stylesheet" type="text/css" href="estilos.css"
  </head>
  
  <!-- Contenido de la página web -->
  <body>
    
    <!-- Cabecera de la página web -->
    <div>
      <h1>Portal web aprenderaprogramar.com</h1>
      <h2>Didáctica y divulgación de la programación</h2>
    </div>
    <!-- Fin de la cabecera de la página web -->
    <br />
    
    <!-- Contenedor para la parte central -->
    <div>
      
      <!-- menu -->
      <div id="menu1">
        <div>Menú</div>
        <hr/>
        <ul>
          <li> <a href="#">Inicio</a></li>
          <li> <a href="libros.html">Libros de programación</a> </li>
          <li> <a href="cursos.html">Cursos de programación</a> </li>
          <li> <a href="humor.html">Humor informático</a> </li>
        </ul>
      </div>
      <!-- fin menu -->
      
      <!-- cuerpo -->
      <div>
        
        <!-- Texto con imágenes -->
        <div>
          <p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
          <p>Hay que tener claro que <a href="https://www.aprenderaprogramar.com">aprender programación</a> no es tarea de un día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.</p>
          <p>Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras alternativas como Crimson Editor.</p>
          <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas- informaticas&Itemid=179"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"></a>
          <img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
        </div>
        <!-- Fin del texto con imágenes -->
        <br/>
        
        <!-- Formulario de contacto -->
        <form method="get" action="accion.html">
          Si quieres contactar con nosotros envíanos este formulario relleno: <br /><br /> 
          Nombre: <input type="text" name="nombre" /><br />
          Apellidos: <input type="text" name="apellidos" /><br />
          Dirección: <input type="text" name="direccion" /><br />
          Correo electrónico: <input type="text" name="correo" /><br />
          Mensaje: <textarea name="mensaje" cols=30 rows=2></textarea><br /><br /> 
          <input type="submit" value="Enviar"><input type="reset" value="Cancelar">
        </form>
        <!-- Fin del formulario de contacto -->
      </div>
      <!-- fin cuerpo -->
    </div>
    <!-- fin contenedor para la parte central -->
    <br /> <br /> <br />
    
    <!-- Pie de página o footer -->
    <div>
      <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com">Copyright 2006-2038 aprenderaprogramar.com
    </div>
    <!-- Fin del pie de página o footer -->
  </body>
  <!-- Fin del contenido de la página web -->
</html>

Desde ya gracias como siempre!!

Alex Rodríguez · « **Respuesta #1 en:** 15 de Agosto 2016, 21:10 »

Hola, tras copiar el código principal que has puesto he encontrado un problema.

Pone <!—Código base para el curso -->

pero el guión después del interrogante es un carácter extraño, no es el guión normal.

Debe quedar con dos guiones normales: 

También veo que falta el cierre en <link rel="stylesheet" type="text/css" href="estilos.css"

Otro problema está en que para hacer lo que propone el curso te sobra un fragmento de código:

#menu1 {
color:red;
background-color: DarkGray;
text-decoration:underline;
}

#menu1 a {
color:green;
text-decoration:none;
}

Te sobra el text-decoration:underline; Si aplicas ese estilo a los elementos de menu1, no solo te lo aplica a los elementos a sino también a otros elementos como los elementos li, y esos estilos no los anulas al establecer none para los elementos a.

Conclusión: los estilos han de ser

Código: [Seleccionar]

#menu1 {
  color:red;
  background-color:DarkGray;
}

#menu1 a {
  color:green;
  text-decoration:none;
}

y no con la línea añadida que has incluido.

Saludos.

hymsoft · « **Respuesta #2 en:** 16 de Agosto 2016, 03:18 »

Gracias Alex!!!! después de modificar todo eso, funciono de maravillas. Todo lo que sobra, es porque en realidad no era el ejercicio, sino la practica de la entrega en si. Esos caracteres extraños me lo hace el mac, siempre tengo que corregirlos pero se ve que con el cansancio no me di cuenta de eso.

Saludos!!!!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: