Tema: Problemas con los colores y los estilos
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/04/2013, 21:46
Avatar de nanotime
nanotime
 
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 12 años, 6 meses
Puntos: 6
Pregunta Problemas con los colores y los estilos
Bueno, hace rato había publicado un post con problemas en los font face, ya pude resolverlo aunque actualizaron el generador de sitios estáticos y estoy teniendo un problemita relacionado, da igual, eso lo resuelvo yo.

Lo que me pasa ahora es algo que no entiendo. Yo declaré un color para todos los links y otro color para cuando estuvieran visitados (visited). La cuestión es que ese color se superpone a todos los demas colores, por ejemplo los H1 que contienen un link, todos toman el color de link y no el que les asigno yo en su respectivo estilo

No entiendo si soy yo poniendo mal el orden de los estilos o es que se trata de un comportamiento normal dentro de CSS que un estilo se superponga a otro de forma arbitraria, igual les dejo el código estático generado por el motor y mi css.

PD: la página se está construyendo desde 320px en adelante, así que no se preocupen si sale diminuto el layout

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <meta name="description" content="Todo lo que pasa por la cabeza de un geek malhumorado">
  6.     <meta name="author" content="nano">
  7.     <title>Nano dice</title>
  8.     <link href="assets/css/colorbox.css" rel="stylesheet" type="text/css">
  9.     <link href="../assets/css/base.css" rel="stylesheet" type="text/css">
  10.     <link href="../assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  11.     <!--[if lt IE 9]>
  12.           <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  13.     <![endif]-->
  14.     <link rel="alternate" type="application/rss+xml" title="RSS (es)" href="rss.xml"><link rel="icon" href="icon_128x128.png" sizes="128x128"><link rel="icon" href="favicon.ico" sizes="16x16">
  15. </head>
  16. <body>
  17.     <div id="container">
  18.         <div id="header">
  19.             <header>
  20.                 <h1 id="blog-title"><a href="." title="Nano dice">Nano dice</a></h1>
  21.             </header>
  22.         </div>
  23.         <div class="navbar">
  24.             <nav>
  25.                 <ul>
  26.                     <li><a href="archive.html">Archivos</a></li>
  27.                     <li><a href="categories/index.html">Tags</a></li>
  28.                 </ul>
  29.             </nav>
  30.         </div>
  31.         <div class="postbox">
  32.             <h1><a href="posts/hola-mundo.html">Hola mundo!!</a></h1>
  33.             <small>  
  34.                  Publicado: 2013-04-08 18:35
  35.             </small>
  36.             <hr>
  37.             <p>
  38.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  39.                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  40.                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  41.                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  42.                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  43.                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  44.             </p>  
  45.             <p><a href="posts/hola-mundo.html#disqus_thread" data-disqus-identifier="cache/posts/hola-mundo.html">Comments</a></p>
  46.         </div>
  47.     
  48.         <div>
  49.             <ul class="pager"></ul>
  50.         </div>
  51.  
  52.     
  53.        <script type="text/javascript">var disqus_shortname="nikolademo";(function(){var a=document.createElement("script");a.async=true;a.type="text/javascript";a.src="http://"+disqus_shortname+".disqus.com/count.js";(document.getElementsByTagName("HEAD")[0]||document.getElementsByTagName("BODY")[0]).appendChild(a)}());
  54.        </script>
  55.        <div id="sidebar">
  56.             <aside>
  57.                 <ul>
  58.                     <li><a href="https://twitter.com/_nanodice_"></a><i class="icon-twitter"></i></li>
  59.                     <li><a href="https://plus.google.com/110603600654048114623/posts"><i class="icon-google-plus"></i></a></li>
  60.                 </ul>
  61.             </aside>
  62.         </div>
  63.         <footer>
  64.             <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.es"><img alt="Licencia Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png"></a><br>Este obra está bajo una <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.es">Licencia Creative Commons Atribución-NoComercial 3.0 Unported</a>.
  65.         </footer>
  66.     </div>
  67. </body>
  68. </html>

Código CSS: 
Ver original
  1. @font-face {
  2.   font-family: 'Caviar Dreams';
  3.   src: url("../font/CaviarDreams-webfont.eot");
  4.   src: url("../font/CaviarDreams-webfont.eot?#iefix") format('embedded-opentype'), url("../font/CaviarDreams-webfont.woff") format('woff'), url("../font/CaviarDreams-webfont.ttf") format('truetype'), url("../font/CaviarDreams-webfont.svg#CaviarDreamsRegular") format('svg');
  5.   font-weight: normal;
  6.   font-style: normal;
  7. }
  8. viewport {
  9.   width: device-width;
  10. }
  11. html,
  12. body {
  13.   background: #fff;
  14.   font-size: 16px;
  15.   font-family: 'Caviar Dreams';
  16.   line-height: 1.5em;
  17.   margin: 0;
  18.   padding: 0;
  19. }
  20. hr {
  21.   border-top: 3px #937948;
  22.   border-bottom: 3px #937948;
  23.   border-left: 3px #937948;
  24.   border-right: 3px #937948;
  25.   color: #bea77b;
  26.   display: block;
  27.   height: 4px;
  28.   margin: 1em 0;
  29.   padding: 0;
  30.   width: 80%;
  31. }
  32. a {
  33.   text-decoration: none;
  34. }
  35. img {
  36.   border: 0;
  37.   margin: 0;
  38.   max-width: 100%;
  39.   padding: 0;
  40.   vertical-align: middle;
  41. }
  42. small {
  43.   color: #f4be57;
  44. }
  45. #container {
  46.   height: 100%;
  47.   margin: 0 auto;
  48.   width: 320px;
  49. }
  50. #header {
  51.   display: block;
  52.   margin: 0;
  53.   padding: 3px;
  54.   width: 100%;
  55. }
  56. #header h1 {
  57.   text-align: center;
  58.   color: #bdd708;
  59. }
  60. #sidebar {
  61.   color: #f4be57;
  62.   height: 100%;
  63.   width: 320px;
  64.   list-style-type: none;
  65. }
  66. #sidebar ul li {
  67.   display: inline-block;
  68.   font-size: 32px;
  69. }
  70. #pager {
  71.   display: inline-block;
  72.   list-style-type: none;
  73. }
  74. #postbox {
  75.   display: block;
  76.   width: 100%;
  77. }
  78. #postbox article {
  79.   margin: 0;
  80.   padding: 0;
  81.   height: 100%;
  82.   width: 100%;
  83. }
  84. #postbox h1 {
  85.   text-align: left;
  86.   color: #bdd708;
  87. }
  88. #postbox p {
  89.   padding: 10px;
  90. }
  91. .tag {
  92.   color: #d9940e;
  93.   font-weight: bold;
  94. }
  95. .navbar {
  96.   height: 50px;
  97.   list-style-type: none;
  98.   width: 100%;
  99. }
  100. .navbar ul li {
  101.   display: block;
  102. }
  103. .pager {
  104.   list-style-type: none;
  105. }