Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Div que mueve el menú de navegación

 Estas en el tema de Div que mueve el menú de navegación en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/03/2015, 18:37
Avatar de 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 ;)
  #2 (permalink)  
Antiguo 29/03/2015, 20:24
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: Div que mueve el menú de navegación
porque no pruebas poniendole un Display: inline-block en #interiorllama

y pasa el codigo completo html y css o pasa la pag si la tienes subidaa >_<
  #3 (permalink)  
Antiguo 30/03/2015, 05:10
Avatar de rodrypaladin
Moderador
  
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 7 meses
Puntos: 468
Respuesta: Div que mueve el menú de navegación
Aunque cambie inline por inline-block o añada inline-block en #interior llama me quedo en las mismas.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Alquiler de equipos de sonido e iluminacion</title>
  6. <link rel="stylesheet" type="text/css" href="style.css"/>
  7. </head>
  8. <body>
  9.     <header>
  10.     <img src="imagenes/logo.png" alt="sonido solaz"/>
  11.     <h2 id="descripcion">Alquiler de equipos de sonido e iluminacion</h2>
  12.     <div class="llama"><p id="interiorllama">Tlf: 666 66 66 66</p></div>
  13.     </header>
  14.     <nav>
  15.     <ul>
  16.     <li><a href src="#">Inicio</a></li>
  17.     <li><a href src="#">Alquiler</a></li>
  18.     <li><a href src="#">Discomovil</a></li>
  19.     <li><a href src="#">Megafonia</a></li>
  20.     <li><a href src="#">Galeria</a></li>
  21.     <li><a href src="#">Contacto</a></li>
  22.     </ul>
  23.     </nav>
  24.     <section>
  25.         
  26.     </section>
  27. </body>
  28. </html>

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: 65%;
  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: absolute;
  35.     top: 30px; 
  36.     left: 1200px;
  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: 65%;
  56. }
  57.  
  58. section {
  59.     margin: -17px auto;
  60.     width: 65%;
  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. }
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #4 (permalink)  
Antiguo 30/03/2015, 07:46
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: Div que mueve el menú de navegación
amigo para eso se ocupa hacer el Media query ya que tiene un ancho el Nav en Porcentajes por eso se ve asi >_<

intenta cambiar tu width en porcentajes por Pixeles ;) y ve usando las media querys para el responsive que quieres de tu Nav ;)
  #5 (permalink)  
Antiguo 30/03/2015, 08:57
 
Fecha de Ingreso: febrero-2015
Mensajes: 61
Antigüedad: 9 años, 8 meses
Puntos: 15
Respuesta: Div que mueve el menú de navegación
creo que.....

si solamente quieres q el contenido ocupe 65% de la pantalla.. encierra todo en un contenedor, y aplica el css al contenedor

.contenedor {width: 65%}

antes de empezar a aplicar estilos (css) lo primero, usar el normalize.css o reset.css ( googleando se encuentra rapido)

luego tienes que decidir si vas a hacer un diseño responsivo, o uno con ancho fijo

normalmente en responsive usas medidas en porcentajes y em/rem, y elementos flotantes

si quieres que el telefono se desplaze al cambiar el tamaño de la ventana, en vez de posicion fija.. deberias flotarlo a la derecha, y ademas, los 2 titulos/logo que tienes en el encabezado agruparlos/meterlo en un div/contenedor

Código HTML: 
Ver original
  1. <div izq> logo + subtitulo </div>
  2. <div der> telefono </div>
-----
http://codepen.io/anon/pen/PwLxOd
Última edición por MMan; 30/03/2015 a las 09:03
  #6 (permalink)  
Antiguo 30/03/2015, 13:09
Avatar de rodrypaladin
Moderador
  
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 7 meses
Puntos: 468
Respuesta: Div que mueve el menú de navegación
Gracias MMan, muy bien explicado ;)
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Etiquetas: background, color, float, mueve, todo, width
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 03:38.