Affincare due div e renderli gradevoli alla vista

di
areasviluppo
il
5 risposte
A
areasviluppo
Utente Attivo
Iscritto da
gen, 2019
Messaggi:
96

Affincare due div e renderli gradevoli alla vista

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

  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Affincare due div e renderli gradevoli alla vista

    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.
  • A
    areasviluppo
    Utente Attivo
    Iscritto da
    gen, 2019
    Messaggi:
    96

    Re: Affincare due div e renderli gradevoli alla vista

    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
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Affincare due div e renderli gradevoli alla vista

    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>
  • A
    areasviluppo
    Utente Attivo
    Iscritto da
    gen, 2019
    Messaggi:
    96

    Re: Affincare due div e renderli gradevoli alla vista

    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>
  • Giocar999
    Giocar999
    Pochi posts
    Iscritto da
    set, 2020
    Messaggi:
    6

    Re: Affincare due div e renderli gradevoli alla vista

    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