Autor Tema: Pseudoclases CSS link, visited, focus, hover y active display ejercicio CU01047D  (Leído 1952 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Ejercicio CU01047D del tutorial básico de desarrollo web con CSS y editor Notepad++.

HTML:

Código: [Seleccionar]


<!DOCTYPE html>
<!-- Código base para el curso CSS -->
<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="CSS-Pseudoclases(47)-pseudoclases-final.css">
</head>

<body>

<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<br/>

<div>
<div>
<div>Menú</div>
<hr/>

<ul>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Inicio </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Libros de Computación </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Cursos de Computación </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Humor informatico </span> </a> </li>
</ul>
</div>

<div>

<div>
<p id="textoinline">Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
<p id="textoinline">Hay que tener claro que <a href="https://www.aprenderaprogramar.com">aprender programación</a> <div id="celeste"> </div> no es tarea de un día ni de una semana:
aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días
podemos estar haciendo nuestros primeros programas.</p>
<p id="textoinline">Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a> <div id="celeste"> </div> entre los varios disponibles.
Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son vá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 útil editor de texto">
</a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>

<br/>

<form method="get" action="accion.html">
Si quieres contactar con nosotros envíanos este formulario relleno: <br /><br />
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Dirección: <input type="text" name="direccion" /><br />
Correo electró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>

</div>

</div>

<br/> <br/> <br/>

<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>

</body>

</html>


CSS

Código: [Seleccionar]

a:visited {color:brown;}
#rosa {margin-bottom:-14px;
width:38px; height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
#rosa:hover{background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
li {list-style-type:none; text-decoration:none;}
li a {font-weight:bold; color:#B22222; position:relative; right:-46px; top:-15px;}
p a {color:blue; font-weight:bold; text-decoration:none;}
p a:hover{color:orange;}
#celeste {
display:inline-block;
position:relative;
top:10px;
width:38px;
height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
#celeste:hover {background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
p#textoinline {display:inline-block;}

« Última modificación: 17 de Junio 2017, 13:18 por Alex Rodríguez »

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:Ejercicio final Pseudoclases (CU01047D)
« Respuesta #1 en: 30 de Marzo 2017, 23:25 »
Hola alefaletti,
a mi el código no me funciona bien. Por lo menos las imagenes que deben aparecer no las veo.
te pediria que aunque fuera solamente para cuando subieras los ejercicios que pusieras el código CSS y HTML dentro del mismo archivo. Así es mucho más fácil poder ver los códigos.
Saludos.

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:Ejercicio final Pseudoclases (CU01047D)
« Respuesta #2 en: 01 de Abril 2017, 20:21 »
bermartinv, muchas gracias de nuevo por tu ayuda!

Mira, te paso el link del ejercicio, lo subi para ver como funciona.
Te adjunto el CSS debajo. Decime cualquier cosa por favor:

http://elsitiodeale.byethost7.com/CSS(47)Pseudoclases-EjFinal.html

CODIGO CSS:

Código: [Seleccionar]

a:link {color:red;}
a:visited {color:brown;}
#rosa {margin-bottom:-14px;
width:38px; height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
#rosa:hover{background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
li {list-style-type:none; text-decoration:none;}
li a {font-weight:bold; color:#B22222; position:relative; right:-46px; top:-15px;}
p a {color:blue; font-weight:bold; text-decoration:none;}
p a:hover{color:orange;}
#celeste {
display:inline-block;
position:relative;
top:10px;
width:38px;
height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
#celeste:hover {background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
p#textoinline {display:inline-block;}



bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:Ejercicio final Pseudoclases (CU01047D)
« Respuesta #3 en: 03 de Abril 2017, 10:00 »
Ahora si me funciona, después de bastante tiempo dandole vueltas, me puse a meter código CSS y me dí cuenta que mi editor al haber hecho copia-pega del css, no interpretaba la url de los background. Pero el ejercicio está correcto, perdona por haberte dicho que no estaba bien el ejercicio. De todas maneras pasa algo raro, no sé si son por las direcciones de los background-image, yo creo que crea algo de conflicto entre los navegadores y el servidor de las url.
Saludos.

 

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".