Foros del Web » Creando para Internet » CSS »

Problemas con los colores y los estilos

 Estas en el tema de Problemas con los colores y los estilos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/04/2013, 21:46
Avatar de nanotime  
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 13 años, 2 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. }
  #2 (permalink)  
Antiguo 08/04/2013, 23:33
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 16 años
Puntos: 306
Respuesta: Problemas con los colores y los estilos
Cita:
Yo declaré un color para todos los links y otro color para cuando estuvieran visitados (visited).
¿Donde lo declaras?
No lo encontré en el código que posteas.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 09/04/2013, 06:42
Avatar de nanotime  
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 13 años, 2 meses
Puntos: 6
Respuesta: Problemas con los colores y los estilos
Disculpa estaba haciendo pruebas y borré la línea a ver si quitándolo se aplicaba el estilo, de igual manera se quedan de color morado una ves visitados y no importa si les asigné verde o marrón a los h1, ellos siguen quedándose así.
  #4 (permalink)  
Antiguo 09/04/2013, 08:36
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 5 meses
Puntos: 2114
Respuesta: Problemas con los colores y los estilos
¿Y no usas :visited?
  #5 (permalink)  
Antiguo 09/04/2013, 11:53
Avatar de nanotime  
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 13 años, 2 meses
Puntos: 6
Respuesta: Problemas con los colores y los estilos
Sí... no sé por que no está ahí ... seguro que puse la hoja que estaba testeando, dejame subir bien los cambios
  #6 (permalink)  
Antiguo 09/04/2013, 11:56
Avatar de nanotime  
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 13 años, 2 meses
Puntos: 6
Respuesta: Problemas con los colores y los estilos
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.   color: #bea77b;
  35. }
  36. a:visited {
  37.   color: #b49966;
  38. }
  39. img {
  40.   border: 0;
  41.   margin: 0;
  42.   max-width: 100%;
  43.   padding: 0;
  44.   vertical-align: middle;
  45. }
  46. small {
  47.   color: #f4be57;
  48. }
  49. #container {
  50.   height: 100%;
  51.   margin: 0 auto;
  52.   width: 320px;
  53. }
  54. #header {
  55.   display: block;
  56.   margin: 0;
  57.   padding: 3px;
  58.   width: 100%;
  59. }
  60. #header h1 {
  61.   text-align: center;
  62.   color: #bdd708;
  63. }
  64. #sidebar {
  65.   color: #f4be57;
  66.   height: 100%;
  67.   width: 320px;
  68.   list-style-type: none;
  69. }
  70. #sidebar ul li {
  71.   display: inline-block;
  72.   font-size: 32px;
  73. }
  74. #pager {
  75.   display: inline-block;
  76.   list-style-type: none;
  77. }
  78. #postbox {
  79.   display: block;
  80.   width: 100%;
  81. }
  82. #postbox article {
  83.   margin: 0;
  84.   padding: 0;
  85.   height: 100%;
  86.   width: 100%;
  87. }
  88. #postbox h1 {
  89.   text-align: left;
  90.   color: #bdd708;
  91. }
  92. #postbox p {
  93.   padding: 10px;
  94. }
  95. .tag {
  96.   color: #d9940e;
  97.   font-weight: bold;
  98. }
  99. .navbar {
  100.   height: 50px;
  101.   list-style-type: none;
  102.   width: 100%;
  103. }
  104. .navbar ul li {
  105.   display: block;
  106. }
  107. .pager {
  108.   list-style-type: none;
  109. }

Ese es el css que estoy usando
  #7 (permalink)  
Antiguo 09/04/2013, 12:47
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 5 meses
Puntos: 2114
Respuesta: Problemas con los colores y los estilos
Yo en principio no veo ningún error.

Borra el caché del navegador a ver si se está quedando colgado el archivo .css o algo así.
  #8 (permalink)  
Antiguo 10/04/2013, 10:36
Avatar de nanotime  
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 13 años, 2 meses
Puntos: 6
Respuesta: Problemas con los colores y los estilos
Será eso, de todos modos tengo que probar ahora, que ando haciendole limpieza total a mi pc, que andaba fastidiosa. Aviso a ver que pasa porque eso mismo, yo tampoco veo errores e igual sigue fastidiando ...

Etiquetas: colores, estilos, html
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 20:35.