Código Javascript:
Ver original
/* --- Alineacion --- */ function Solo(){ /* --- Novedad --- */ document.getElementById('Novedad').removeAttribute('class'); document.getElementById('Novedad').setAttribute('class','Uno'); /* --- Detalle --- */ document.getElementById('Detallado').removeAttribute('class'); document.getElementById('Detallado').setAttribute('class','DUno'); } function Dos(){ /* --- Novedad --- */ document.getElementById('Novedad').removeAttribute('class'); document.getElementById('Novedad').setAttribute('class','Dos'); /* --- Detalle --- */ document.getElementById('Detallado').removeAttribute('class'); document.getElementById('Detallado').setAttribute('class','DDos'); } function Tres(){ /* --- Novedad --- */ document.getElementById('Novedad').removeAttribute('class'); document.getElementById('Novedad').setAttribute('class','Tres'); /* --- Detalle --- */ document.getElementById('Detallado').removeAttribute('class'); document.getElementById('Detallado').setAttribute('class','DTres'); }
Código CSS:
Ver original
/* --- Novedades --- */ #Novedades{ display:table; border:1px solid #333; border-radius:5px; padding:25px; height:350px; box-shadow:-1px 1px 10px #666; margin-top:50px; margin-right:50px; text-align:center; } /* --- 3 Cuadros por linea --- */ .Tres{ margin-bottom:50px; display:inline-block; width:250px; margin:8px; } .Tres img{ width:200px; margin:5px; } #DTres{ display:none; } /* --- 2 Cuadros por linea --- */ .Dos{ margin:10px; padding-left:25px; padding-right:25px; margin-bottom:50px; display:inline-block; width:325px; } .Dos img{ width:200px; margin:5px; } .DDos{ color:#444; margin-top:25px; margin-bottom:50px; } /* --- 1 Cuadro por linea --- */ .Uno{ margin-bottom:50px; display:block; width:400px; margin:8px; margin-left:175px; } .Uno img{ width:200px; margin:5px; } .DUno{ color:#444; margin-top:25px; margin-bottom:50px; display:block; text-align:left; }
Y por último lo que serian los cuadros.
Código HTML:
Ver original
<!-- Novedades --> <div id="Novedades"> <div id="Controladores"> <table> <tr> <td> Alineacion: </td> <td> Cantidad: </td> <td> Orden: </td> <td> Buscador: </td> </tr> <tr> <td> <input type="image" src="Imagen/Utileria/Solo.png" onClick="Solo();" /> <input type="image" src="Imagen/Utileria/Dos.png" onClick="Dos();" /> <input type="image" src="Imagen/Utileria/Tres.png" onClick="Tres();" /> </td> <td> <select onChange="Cantidad();"> </select> </td> <td> <select onChange="Cantidad();"> </select> </td> <td> <input type="search" placeholder="Buscar..." onKeyUp="Buscar(this.value);" /> </td> </tr> </table> </div> <div class="Novedad"> La Entre vias en "El dioni bar"<br> La entre vias se estara presentando en el dioni bar con intencion de presentar oficialmente el nuevo disco titulado "Todo Suma".<br> <div id="Detallado"> Lugar: Dioni bar - Avellaneda.<br> Direccion: Beruti 249 entre belgrano y mitre.<br> Fecha: Miercoles 2 de mayo.<br> Horario: 00:00 Hs. </div> </div> <div class="Novedad"> La Entre vias en "El dioni bar"<br> La entre vias se estara presentando en el dioni bar con intencion de presentar oficialmente el nuevo disco titulado "Todo Suma".<br> <div id="Detallado"> Lugar: Dioni bar - Avellaneda.<br> Direccion: Beruti 249 entre belgrano y mitre.<br> Fecha: Miercoles 2 de mayo.<br> Horario: 00:00 Hs. </div> </div> <div class="Novedad"> La Entre vias en "El dioni bar"<br> La entre vias se estara presentando en el dioni bar con intencion de presentar oficialmente el nuevo disco titulado "Todo Suma".<br> <div id="Detallado"> Lugar: Dioni bar - Avellaneda.<br> Direccion: Beruti 249 entre belgrano y mitre.<br> Fecha: Miercoles 2 de mayo.<br> Horario: 00:00 Hs. </div> </div> </div>