Affincare due div e renderli gradevoli alla vista

di areasviluppo il
5 risposte
Utente Attivo
Iscritto da
gen, 2019
Messaggi
96
Un saluto alla community,
avrei la necessità del vostro supporto per affiancare con l'ausilio del css due div e renderli se possibile un pò più carini alla vista.

Questa è la pagina come si presenta ora



Questo il codice utilizzato 

<style>
.descrizione{
	text-align:center;
	margin:auto;
	display: inline;
	clear:both;
}

.descrizione > h3{
	color: green;
	font-size:1.2em;
}

.calcolo{
	text-align:center;
	margin-top: 10px;
	padding: 10px;
	background: #F7F7F9;
	display: inline;
	clear:both;
}
</style>


	<div class="descrizione">
		<h3>Conversione rapida da ore a minuti</h3>
	</div>
	
	<div class="calcolo">
		<div id="oreminuti">
			<input type="number" min='0' max='60' name="ore" id="ore" placeholder="Inserisci ore">
			<input type="number" min='0' max='60' name="minuti" id="minuti" placeholder="Inserisci min. max 60">
			<input type="text" name="minutiTot" id="minutiTot">
		</div>
	</div>

5 Risposte

  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Ciao, hai la possibilità di mettere online magari su una pagina di prova? Sarebbe utile per inspezionare anche resto del codice.
    Inoltre prova a disegnare un layout di come vorresti realizzare la cosa, perche non è molto chiaro cio che voi fare.
  • Utente Attivo
    Iscritto da
    gen, 2019
    Messaggi
    96
    Ciaooo ninja72,
    purtroppo il gestionale gira su un NAS locale, se metto online la versione che in locale funziona alla perfezione, online non viene correttamente impaginata, il layout si sballa e questo anche perchè essendo un "gestionale" realizzato circa 7, ed essendo io un forte appassionato ma non un programmatore, non riesco a farlo visualizzare online allo stesso modo di come si visualizza in locale. Ti ripeto, in locale tutto perfetto, online invece assolutamente no.

    Alla fine il risultato che vorrei ottenere è una cosa del genere giusto al centro 
    https://ibb.co/RHGNhrr
    Grazie ancora
  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Prova cosi, ma non garantisco.
    css: 
    
 .mycontainer{
        display: flex;
        width: 100%;
        background: #F7F7F9;
    }
    .descrizione {
        width: 50%;
        text-align: right;
    }

    .descrizione>h3 {
        margin: 0;
        padding: 10px;
        color: green;
        font-size: 1.2em;
    }

    .calcolo {
        padding: 10px;
        width: 50%;
        text-align: left;
    }
    html: 
    
<div class="mycontainer">
        <div class="descrizione">
            <h3>Conversione rapida da ore a minuti</h3>
        </div>
        <div class="calcolo">
            <div id="oreminuti">
                <input type="number" min='0' max='60' name="ore" id="ore" value="0">
                <input type="number" min='0' max='60' name="minuti" id="minuti" value="0">
                <input type="text" name="minutiTot" id="minutiTot" value="0">
            </div>
        </div>
    </div>
  • Utente Attivo
    Iscritto da
    gen, 2019
    Messaggi
    96
    Tutto ok,
    ho semplicemente apportato qualche modifica ma il risultato è quello atteso

    Lascio il codice per chiunque potrebbe averne bisogno e naturalmente ringrazio ninja72 per la grande pazienza
    
<style>
 .container-calcolo-ore{
        display: flex;
        width: 90%;
        background: #000;
		margin:20px auto 0px auto;
		border-radius:2px;
    }
    .descrizione {
        width: 50%;
        text-align: right;
    }

    .descrizione > h3 {
        margin-top: 3px;
        padding: 10px;
        color: yellow;
        font-size: 1.2em;
		font-weight: bold
    }

    .calcolo {
        padding: 10px;
        width: 50%;
        text-align: left;
    }
</style>


<div class="container-calcolo-ore">
        <div class="descrizione">
            <h3>Esegui conversione rapida da ore a minuti</h3>
        </div>
        <div class="calcolo">
            <div id="oreminuti">
                <input type="number" min='0' max='60' name="ore" id="ore" placeholder="Inserisci Ore">
                <input type="number" min='0' max='60' name="minuti" id="minuti" placeholder="Inserisci Minuti">
                <input type="text" name="minutiTot" id="minutiTot" value="0">
            </div>
        </div>
</div>
  • /
    Anonimizzato29381
    Utente anonimizzato
    Ragazzi non so se è lecito trovo interessante la possibiltià di sviluppo di questo sito (che ben inteso non è mio ... magari) che fornisce la possibilità di testare il codice ON-FLY sul momento. https://codepen.io/pen
    Ideale per testare porzioni di codice come in questo caso sopra...

    Comunque si... l'ideale è stato lavorare con le percentuali cosa che sembra dare il massimo del risultato. Poi a questo punto creerei delle viste @mediascreen per dispositivi mobile o table e riscriverei le classi per queti casi specifici.
Devi accedere o registrarti per scrivere nel forum
5 risposte