Problema con barra fija responsive. Problema con barra fija responsive.
Problema con barra fija responsive.
Mostrando resultados del 1 al 6 de 6
  1. #1
    Registro
    25-noviembre-2011
    Ubicación
    Colombia
    Mensajes
    84
    Problema con barra fija responsive.
    Hola a todos,

    Tengo un problema al implementar una barra fija para la radio online de mi Web. Ya está funcionando pero quiero mejorar el diseño para que se adapte a diferentes dispositivos.

    La barra es un div, que en su interior tiene 3 div hijos. Los dos primeros son de ancho fijo en pixeles, estos no se pueden cambiar ya que uno es la radio, el otro es un texto que dice "SONANDO" y el tercero es un marquesina que muestra el nombre de la canción que está sonando.

    La barra ocupa todo el ancho del navegador es decir es Width: 100%, el primer contenedor ocupa 120px, el segundo ocupa 80px, y el tercero quiero que ocupe todo el ancho restante, sea cual sea el tamaño de pantalla.

    Código HTML:
    <div class="barra">
    	<div class="radio"></div>
    	<div class="sonando"></div>
    	<div class="marquesina"></div>
    </div>
    Aquí les dejo el css básico sin los demás estilos para que sea más fácil de leer.

    Código HTML:
         .barra {
                            position: fixed;
    			width: 100%;
    			height: 30px;
    			background-color:#B9B9B9;
                            botom: 0px;
                            left: 0px;
    
    		}
    
    		.radio {
    			width: 120px;
    			height:30px;
    			float:left;
    		}
    
    		.sonando {
    			width: 80px;
    			height:30px;
    			float:left;
    			
    		}
    
    		.marquesina {
    			width: ¿¿¿???;
    			height: 30px;
    			float: right;
    			
    		}
    Espero que puedan ayudarme.
    Gracias

  2. #2
    Registro
    06-noviembre-2016
    Ubicación
    127.0.0.1
    Edad
    26
    Mensajes
    367
    Hola que tal,

    Si gustas permíteme el enlace de tu sitio web por mensaje privado para hacer una depuración desde Chrome y comentarte el código que necesitas.

    Recuerda tener la barra implementada como la tienes actualmente para partir desde alli.

    Saludos.

  3. #3
    Registro
    25-noviembre-2011
    Ubicación
    Colombia
    Mensajes
    84
    Listo, aquí tiene la página donde hago las pruebas
    Barra Emisora

    - - - Actualizado - - -

    Cita Iniciado por sysdop Ver Mensaje
    Hola que tal,

    Si gustas permíteme el enlace de tu sitio web por mensaje privado para hacer una depuración desde Chrome y comentarte el código que necesitas.

    Recuerda tener la barra implementada como la tienes actualmente para partir desde alli.

    Saludos.
    Última edición por Adictonet; 16-abr-2017 a las 15:46

  4. #4
    Registro
    06-noviembre-2016
    Ubicación
    127.0.0.1
    Edad
    26
    Mensajes
    367
    Cita Iniciado por Adictonet Ver Mensaje
    Listo, aquí tiene la página donde hago las pruebas
    Barra Emisora

    - - - Actualizado - - -
    Quita esta línea de .barra:

    /* height: 26px; */

    Si no te sale por 26 seguro lo tendrás en 30.

    Cuando ingreses desde el teléfono móvil, el texto lo mejor que hara es acomodarse por debajo del sonando (se ajustará al mismo estilo que tienes).

    Saludos.

  5. #5
    Registro
    25-noviembre-2011
    Ubicación
    Colombia
    Mensajes
    84
    Cita Iniciado por sysdop Ver Mensaje
    Quita esta línea de .barra:

    /* height: 26px; */

    Si no te sale por 26 seguro lo tendrás en 30.

    Cuando ingreses desde el teléfono móvil, el texto lo mejor que hara es acomodarse por debajo del sonando (se ajustará al mismo estilo que tienes).

    Saludos.
    Mejor mirala desde FlowCartagena.Net | Champeta, Dancehall, Reggaeton y más
    Ahí le coloque unas media queries para hacerla responsive, pero lo que quiero es que la medida que puse en pixeles para cada medida de pantalla, cambiarla en medidas relativas como porcentaje, pero al hacerlo no funciona.

  6. #6
    Quítale el float: right; a la marquesina, y le pones un margin-left: 200px;

    Así de sencillo

    Ejemplo: Barra musica - JSFiddle

    Saludos
    Última edición por OLMID; 22-abr-2017 a las 09:01

Temas similares

  1. Pie de pagina responsive igual al nav o barra de navegacion
    Trabajo en un proyecto y tengo dificultades al lograr que se comporte el footer igual que el nav o tamaño del menu navegacion , sobre todo al...
    Respuestas: 3
    Último mensaje: 07-dic-2016
  2. Barra lateral fija de Facebook fanpage
    Hola, pues quiero poner una barrita lateral en mi pagina anunciando la fan page del sitio, la típica imagen de "Hazte fan" lo he visto en varias webs...
    Respuestas: 2
    Último mensaje: 02-feb-2014
  3. Barra footer fija
    Hola requiero apoyo para insertar una barra en el footer que quede fija o que siempre sea visible si se hace scrolling, estilo facebook terra u otras...
    Respuestas: 4
    Último mensaje: 23-nov-2012
  4. ¿Colocar barra fija de radio?
    Hola me gustaría insertar una barra de radio en mi web el código de la barra esta todo listo solo que no se como colocar la barra es fija aca un...
    Respuestas: 6
    Último mensaje: 29-jul-2012
  5. Barra de menú fija
    Muy buenas, espero estar posteando en el lugar correcto, porque mis nociones sobre desarrollo web son menos que básicas. El caso es que estoy...
    Respuestas: 4
    Último mensaje: 06-dic-2011

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •