Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/03/2015, 18:37
Avatar de rodrypaladin
rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 7 meses
Puntos: 468
Div que mueve el menú de navegación

Buenas compañeros.

Estoy intentando aprender CSS y me encuentro con algunos problemillas que no consigo resolver.

Primero he realizado un header con la barra de navegación, en el header he insertado el logo, y en la barra una lista la cual es el menú.

Ahora intento realizar un div el cual irá en la parte superior derecha, pero de la forma que lo he realizado me descoloca la barra de navegación.



El código css que tengo para ese Div es el siguiente:

Código CSS:
Ver original
  1. .llama {
  2.     float: right;
  3.     display: inline;
  4.     background:-webkit-linear-gradient(top, #22272b, #2a2d30);
  5.     border-top: solid 1px #4a5157;
  6.     position: relative;
  7.     top: -50px;
  8.     left: -7px;
  9.  
  10. }

y tengo otro el cual modifica el interior de ese Div

Código CSS:
Ver original
  1. #interiorllama {
  2.     font-size: 30px;
  3.     color: #fff;
  4.     text-shadow: black 0.1em 0.1em 0.2em;
  5.     margin-left: 20px;
  6.     margin-right: 20px;
  7.     margin-top: 5px;
  8.     margin-bottom: 5px;
  9. }


He conseguido realizarlo cambiando el position relative por fixed y cambiando el top y left para situarlo bien . pero obviamente al reducir el tamaño de la pantalla al llegar al div, este no se desplaza.

La idea es que quede de esta forma:



Adjunto también todo el código css que tengo hasta ahora por si algo entra en conflicto lo tengáis a mano. Un saludo y gracias de antemano

Código CSS:
Ver original
  1. body {
  2. background: url("http://www.pciviljumilla.es/wp-content/uploads/2014/08/Concierto.jpg") no-repeat fixed center;
  3.     -webkit-background-size: cover;
  4.     -moz-background-size: cover;
  5.     -o-background-size: cover;
  6.     background-size: cover;
  7. background-color: #7db9e8;
  8. font-family: Verdana;
  9. }
  10.  
  11. h2 {
  12.     font-size: 14px;
  13.     vertical-align: middle;
  14.     text-align: left;
  15.     margin-top: -2px;
  16.     margin-bottom: -5px;
  17.     margin-left: 6px;
  18.     color: #FFF;
  19.     text-shadow: black 0.1em 0.1em 0.2em;
  20. }
  21. header {
  22.     text-align: left;
  23.     margin: 1px auto;
  24.     padding: 10px 10px 10px 25px;
  25.     width: 1175px;
  26.     margin-bottom: -10px;
  27. }
  28.  
  29. .llama {
  30.     float: right;
  31.     display: inline;
  32.     background:-webkit-linear-gradient(top, #22272b, #2a2d30);
  33.     border-top: solid 1px #4a5157;
  34.     position: relative;
  35.     top: -40px;
  36.     left: -7px;
  37.  
  38. }
  39.  
  40. #interiorllama {
  41.     font-size: 30px;
  42.     color: #fff;
  43.     text-shadow: black 0.1em 0.1em 0.2em;
  44.     margin-left: 20px;
  45.     margin-right: 20px;
  46.     margin-top: 5px;
  47.     margin-bottom: 5px;
  48. }
  49. nav {
  50.     background:-webkit-linear-gradient(top, #22272b, #2a2d30);
  51.     border-top: solid 1px #4a5157;
  52.     text-align: center;
  53.     margin: 15px auto;
  54.     padding: 1px 0;
  55.     width: 1175px;
  56. }
  57.  
  58. section {
  59.     margin: -17px auto;
  60.     width: 1175px;
  61.     height: 600px;
  62.     background-color: #fff;
  63. }
  64.  
  65. li {
  66.     font-size: 20px;
  67.     display: inline;
  68.     margin-right: 35px;
  69.     border-radius: 10px;
  70.     border-radius: 10px;
  71.     padding: 6px 10px 6px 10px;
  72.  
  73. }
  74.  
  75. li:hover {
  76.     background: #1e5799; /* Old browsers */
  77.     background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
  78.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
  79.     background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
  80.     background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
  81.     background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
  82.     background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
  83.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
  84. }
  85.  
  86. a:link {
  87.     text-decoration: none;
  88.     color:#ffffff;
  89. }
  90. a:visited {
  91.     text-decoration: none;
  92.     color:#ffffff;
  93. }
  94. a:active {
  95.     text-decoration: none;
  96.     color:#ffffff;
  97. }
  98. a:hover {
  99.     text-decoration: none;
  100.     color:#ffffff;
  101. }

Me gustaría si es posible también que me expliquéis en que se basa el error para que pueda entenderlo yo mismo y no me vuelva a pasar en el futuro. Un abrazo
__________________
No te olvides de dar +1 a quien te echa un cable ;)