Ciao a tutti sono nuovo del html e css sto provando a realizzare un menù con delle immagini e bottoni.
Le immagini sono 6 e volevo metterle su 2 righe soltanto che non riesco questo è il mio codice html qualcuno mi può aiutare:
e questo il css:codice:<!DOCTYPE html> <html manifest="webapp.manifest"> <head> <link rel="stylesheet" href="styles/main.css"> <script type="text/javascript" src="jlib/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="scripts/storage.js"></script> <script type="text/javascript" src="scripts/main.js"></script> <title>Sommario</title> </head> <body> <dl class="Riga1"> <dt> <input type="button" class="New" id="Nuovo" value=" " style="background-image:url('images/Nuovo.jpg')" onclick=""></input> </dt> <dt>Nuovo</dt> </dl> <dl class="Riga1"> <dt> <input type="button" class="LastDoc" id="UltimiDoc" value=" " style="background-image:url('images/UltimiDoc.jpg')" onclick=""></input> </dt> <dt>Ultimi Documenti</dt> </dl> <dl class="Riga1"> <dt> <input type="button" class="SitCont" id="SituazContab" value=" " style="background-image:url('images/SitCont.jpg')" onclick=""></input> </dt> <dt>Situazione Contabile</dt> </dl> <dl class="Riga1"> <dt> <input type="button" class="Movim" id="Movimenti" value=" " style="background-image:url('images/Movim.jpg')" onclick=""> </input> </dt> <dt>Movimenti</dt> </dl> <dl class="Riga1"> <dt> <input type="button" class="Statistic" id="Statistiche" value=" " style="background-image:url('images/Statistiche.jpg')" onclick=""> </input> </dt> <dt>Statistiche</dt> </dl> <dl class="Riga1"> <dt> <input type="button" class="Synchronize" id="Synchro" value=" " style="background-image:url('images/Syncro.jpg')" onclick="javascript:LanciaSyncro()"></input> </dt> <dt>Sincronizzazione</dt> </dl> </body> </html>
graziecodice:html,body, h1, form, fieldset, legend, ol, li { font-family:Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0; text-align:center; margin:auto; } body { background: #ffffff; color: #111111; font-family: Georgia, "Times New Roman", Times, serif; padding: 20px; } .New { background-repeat:no-repeat; background-position:center center; width:256px;height:256px; background-color: #D1D1D1; } .LastDoc { background-repeat:no-repeat; background-position:center center; width:256px;height:256px; background-color: #D1D1D1; } .SitCont { background-repeat:no-repeat; background-position:center center; width:256px;height:256px; background-color: #D1D1D1; } .Movim { background-repeat:no-repeat; background-position:center center; width:256px;height:256px; background-color: #D1D1D1; } .Statistic { background-repeat:no-repeat; background-position:center center; width:256px;height:256px; background-color: #D1D1D1; /* vertical-align: top; */ } .Synchronize { background-repeat:no-repeat; background-position:center center; width:256px;height:256px; background-color: #D1D1D1; /* font-size: 40px; vertical-align: top; */ } dl.Riga1 { border: 1px solid #000; background-color: #ddd; width: 266px; text-align: center; padding: 10px; float: left; margin-right: 1em; } .Riga1 dt { font-weight: bold; font-size: 20px; } .Riga1 dt img { border: 1px solid #000; width: 266px; height: 266px; } dl.Riga2 { border: 1px solid #000; background-color: #ddd; width: 266px; text-align: center; padding: 10px; float: left; margin-right: 1em; } .Riga2 dt { font-weight: bold; font-size: 20px; } .Riga2 dt img { border: 1px solid #000; width: 266px; height: 266px; }
Rispondi quotando
