Idee per personalizzare form

[elpirata]

Buongiorno a tutti,
mi piacerebbe poter rendere carino questo form realizzato con i css, mi dareste una mano ad abbellire questo scempio ?



Questo il codice che attualmente utilizzo:

<fieldset>
  <legend>Anagrafica Cliente</legend>
  <div id="anagrafica">
 	 <div class="pre-1">
        <div class="pre-1-1">Id</div>
        <div class="pre-1-2"><input name="id" disabled="disabled" id="id" value="0" size="2" readonly="readonly"></div>
        <div class="pre-1-3">Data Intervento</div>
        <div class="pre-1-4"><input type="text"  name="data" class="datepicker" required="required" id="data"></div>

        <div class="pre-1-5">Cliente</div>
        <div class="pre-1-6"><input name="cliente" class="uppercase" id="cliente"></div>
	 <div class="pre-1-7">Indirizzo</div>
        <div class="pre-1-8"><input name="indirizzo" class="uppercase" id="indirizzo"></div>
        
	 <div class="pre-1-9">P. Iva</div>
        <div class="pre-1-10"><input name="piva" class="uppercase" id="piva" maxlength="12" value=""></div>
	 <div class="pre-1-11">Telefono</div>
        <div class="pre-1-12"><input name="tel" class="uppercase" id="tel"></div>
</div>
</div>
</fieldset>

Questo il css, come potete vedere lunghissimo e a mio parere confusionale

.pre-1 {
    border: none;
    height: 86px;
    position: relative;
    text-align: left;
    width: 620px;
}

.pre-1-1 {
    border: none;
    height: 24px;
    left: 2px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 0px;
    width: 99px;
}

.pre-1-2 {
    border: none;
    height: 24px;
    left: 60px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 2px;
    width: 170px;
}

.pre-1-3 {
    border: none;
    height: 24px;
    left: 360px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: -25px;
    width: 99px;
}

.pre-1-4 {
    border: none;
    height: 24px;
    left: 445px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 2px;
    width: 145px;
}

.pre-1-5 {
    border: none;
    height: 24px;
    left: 2px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 28px;
    width: 99px;
}

.pre-1-6 {
    border: none;
    height: 24px;
    left: 60px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 30px;
    width: 170px;
}

.pre-1-7 {
    border: none;
    height: 24px;
    left: 361px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 30px;
    width: 99px;
}

.pre-1-8 {
    border: none;
    height: 24px;
    left: 445px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 30px;
    width: 155px;
}

.pre-1-9 {
    border: none;
    height: 24px;
    left: 2px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 56px;
    width: 99px;
}

.pre-1-10 {
    border: none;
    height: 24px;
    left: 60px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 58px;
    width: 170px;
}

.pre-1-11 {
    border: none;
    height: 24px;
    left: 360px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 58px;
    width: 99px;
}

.pre-1-12 {
    border: none;
    height: 24px;
    left: 445px;
    line-height: 24px;
    padding: 1px;
    position: absolute;
    top: 58px;
    width: 155px;
}

.pre-2 {
 
    border: none;
    height: 86px;
    position: relative;
    text-align: left;
    width: 620px;
}

Confido in un vostro supporto :byebye:

 

[n1k4r0]

ciao, al momento sono a corto di tempo ma guarderò. intanto ho notato che tutte le .pre-qualcosa hanno molte cose in comune quindi ti consiglierei di modificare l'html aggiungendo una classe comune, per esempio class="pre pre-2"
in questo modo dentro a .pre metti tutto quello che hanno in comune e dentro .pre-2 le istruzioni specifiche. se non altro verrebbe più ordinato e più semplice da mantenere.

 

[elpirata]

ciao, al momento sono a corto di tempo ma guarderò. intanto ho notato che tutte le .pre-qualcosa hanno molte cose in comune quindi ti consiglierei di modificare l'html aggiungendo una classe comune, per esempio class="pre pre-2"
in questo modo dentro a .pre metti tutto quello che hanno in comune e dentro .pre-2 le istruzioni specifiche. se non altro verrebbe più ordinato e più semplice da mantenere.

Ciao n1k4r0,
innanzitutto grazie mille già solo per l'interessamento, come avrai sicuramente capito i css non sono il mio forte, proverò a mettere in pratica il tuo consiglio e attendo fiducioso un po di codice atto ad abbellire questo scempio che ho realizzato. Mi piacerebbe renderlo gradevole alla vista e magari poi in futuro applicare ad esso anche un pò di javascript per l'interattività. Per adesso imparerò prima a portare la bicicletta in futuro vedrò per la moto

 

[n1k4r0]

bene, spero di essere stato chiaro se no chiedi pure, al momento scrivo dal telefono e scrivere del codice è abbastanza una rottura co sta tastiera

 

[Max 1]

C'è anche da considerare che, il concetto di bello e carino è un concetto strettamente personale, quello che per me può essere bello, per te può essere orrendo, pertanto mettersi lì, impegnare tempo per scriverti un codice più o meno lungo e poi constatare che non ti piace, è abbastanza deludente.

Un forum tecnico come questo dovrebbe essere solo impegnato a soddisfare quesiti tecnici e mirati, non a creare per altri pagine web.

Dovresti essere tu a mettere la tua fantasia e creatività

 

[criric]

A me piace così com'è : semplice e ordinato :fonzie:

 

[elpirata]

Allora, sapete una cosa ??? Lo lascio così, al limite proverò a personalizzare solo un pò il testo

 

[elpirata]

Ragazzi, senza andare off-topic, essendo che si tratta di codice attinente sempre al progetto su cui sto lavorando, vi chiedo una gentilezza:

@charset "utf-8";
/* CSS Document */

html {
padding:0px;
margin:0px;
}

body {
background-color: #fff;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px 0px 240px 0;
overflow: auto;
}

#logo { 
padding-left: 20px; 
margin-left: auto;
margin-top: 20px;
}

#menu {
width: 20%;
left: 20px;
padding:0px;
margin:0px;
float: left;
overflow: auto;
border: 1px solid;
height: 900px;
}

#contenitore{
float: right;
width: 80%;
height: 100%;
overflow: auto;
}

La mia idea sarebbe quella di avere un menù a sinistra sempre presente in tutte le pagine che occupa diciamo il 20% e un contenitore a destra centrato in base al restante 80% di spazio, dove inserirò il contenuto del sito (quindi la tabella postata nell'immagine).
Cosi come scritto il codice, crea il menu fisso (tipi iframe) a sinistra e questo mi va benissimo, ma manda a capo il contenitore senza affiancarlo.

 

[Max 1]

Ti manda a capo il contenitore dati semplicemente perchè i conteggi degli spazi superano il 100%

menu 20%+left 20px+border 1+1= menu 20%+22px
Contenitore = 80%
---------------------------------------------
Totale = 100%+22px
Questi 22px mandano a capo il contenitore

 

[elpirata]

Ti manda a capo il contenitore dati semplicemente perchè i conteggi degli spazi superano il 100%

menu 20%+left 20px+border 1+1= menu 20%+22px
Contenitore = 80%
---------------------------------------------
Totale = 100%+22px
Questi 22px mandano a capo il contenitore

Perfetto :fonzie:
In realtà era 1px + 1px del border che mandava a capo.
Quel left è un intruso e non svolge nessuna funzione :byebye: