Idee per personalizzare form

elpirata

Utente Attivo
18 Mar 2009
264
7
18
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:

HTML:
<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


Codice:
.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

Utente Attivo
15 Nov 2012
135
0
0
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

Utente Attivo
18 Mar 2009
264
7
18
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

Utente Attivo
15 Nov 2012
135
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.397
338
83
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
A me piace così com'è : semplice e ordinato :fonzie:
 

elpirata

Utente Attivo
18 Mar 2009
264
7
18
Allora, sapete una cosa ??? Lo lascio così, al limite proverò a personalizzare solo un pò il testo :)
 

elpirata

Utente Attivo
18 Mar 2009
264
7
18
Ragazzi, senza andare off-topic, essendo che si tratta di codice attinente sempre al progetto su cui sto lavorando, vi chiedo una gentilezza:

Codice:
@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.

:confused:
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.397
338
83
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

Utente Attivo
18 Mar 2009
264
7
18
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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Idee per iniziare HTML e CSS 0
F idee..codice php per videogallery da database PHP 4
masters46 Missione Guadagnare! Idee per il successo finanziario Presenta il tuo Sito 0
P [PHP] Sono Pippinedda e ho le idee confuse PHP 3
Robert_MW [COMPRO] Pagina Facebook +20k - Tema Casa (idee, fai da te, design) Annunci servizi di Social Media Marketing 5
G [VENDO] Articoli con tema "Natale" (idee regalo, decorazioni, riciclare i regali ecc) Offerte e Richieste di Lavoro e/o Collaborazione 0
B Sviluppo browsergame, idee? aiuto? Offerte e Richieste di Lavoro e/o Collaborazione 1
C contatore alfanumerico 0000 -> ZZZZ, idee? PHP 3
T Memberarea, forum, contatore...Mi chiarite le idee? HTML e CSS 7
N Copyright ... Idee Leggi, Normative e Fisco 1
jan267 Firefox sente i css, Explorer no! Idee e/o soluzioni? HTML e CSS 2
T Selezione tema una sola volta: idee? Classic ASP 0
J a corto di idee HTML e CSS 1
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
P Aiuto per rendere un Bot Telegram Privato PHP 0
V Query per una somma PHP 2
A Tabella con bottoni per aggiornamento record PHP 6
G Consigli SEO per scrittura e struttura pagine SEO e Posizionamento 5
P Passare solo alcuni parametri a script per CSV PHP 0
A Consiglio per creazione sito web CMS (Content Management System) 0
A Regex per isolare link interni con rel noopener PHP 0
L form immagini per il database PHP 0
S CREAZIONE DI SITO PER CORSI DI FORMAZIONE WordPress 1
I [cerchiamo][retribuito] Grafico/a per stickers Offerte e Richieste di Lavoro e/o Collaborazione 0
R Cercarsi programmatore per GDR PBC Offerte e Richieste di Lavoro e/o Collaborazione 0
L Sessione e array per utenti PHP 0
A Sottoquery con group by per mese MySQL 0
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
V [Cerco] Socio e Sviluppatore per App PlacesFinder Offerte e Richieste di Lavoro e/o Collaborazione 0
M user agent per il download di api PHP 0
B Stringa sql per ricerca su più campi Database 1
Cosina Upload multiplo con invio allegati per email PHP 0
P Editor per la realizzazione di siti HTML e CSS 0
M Versione nativa per M1. Photoshop 1
A Aiuto per pagina php PHP 0
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
T [cerco] scrittore/scrittrice per articoli web Offerte e Richieste di Lavoro e/o Collaborazione 5
L Interfaccia grafica per gestire sql server .NET Framework 1
B javascript per problemi con pdf e Safari Javascript 0
R Plugin per Gestire videocorsi a pagamento WordPress 3
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
C media per riga MySQL 1
I Cerca: blogger IT per articoli di prova Offerte e Richieste di Lavoro e/o Collaborazione 0
R Plugin per Registrazione Utente e Pagamento prodotto WordPress 2
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
D modificare questo codice per inserimento in text e non in tabella jQuery 1
U [Cerco ] incremento traffico per il mio sito Vendere e Acquistare pubblicita' online 0
E Monitor per Photoshop Photoshop 0
S Libreria PHP per creare file dwg o dxf PHP 0
T cercasi aiuto per file d1 (open-edge db) Database 0

Discussioni simili