Adictonet
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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.
Aquí les dejo el css básico sin los demás estilos para que sea más fácil de leer.
Espero que puedan ayudarme.
Gracias
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.
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.
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
