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.449
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.449
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
felino Lubuntu 18.04 Requisiti per applicazione console .net core 7.0 Linux e Software 0
M pulsante per aprire una maschera che contiene controllo schede MS Access 0
E Aiuto per query PHP 8
E Il punto di riferimento italiano per Trailers cavalli Discussioni Varie 0
F CERCO Servizi SEO di Qualità per Agenzie di Servizi SEO e Posizionamento 3
D Miglior modo per estrarre le occorrenze di un elemento in un set di più file xml e quindi scrivere il risultato in una tabella Excel o magari in JSON XML 0
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
R Plugin di base per WordPress WordPress 0
D [COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo. Vendere e Acquistare pubblicita' online 0
L Suggerimento Pagespeed per non vedenti HTML e CSS 0
M Analisi sito per pulire codice inutile HTML e CSS 1
Paolo69 Risolto reCAPTCHA v2 per ASP Classic ASP 0
M Hosting VPS per server di gioco Minecraft Hosting 0
N Grazie per il benvenuto Presentati al Forum 0
Lino80 [Retribuito] Cerco programmatore php per modifica/inserimento funzione/valori da un plugin importer wordpress Offerte e Richieste di Lavoro e/o Collaborazione 0
R Filtri e plugin per photoshop Photoshop 0
AkTaRuS DIsabilitare il tasto destro tranne che per code e pre Javascript 1
0 [Retribuito] Cercasi programmatore per GdR PbC Offerte e Richieste di Lavoro e/o Collaborazione 0
A Adempimenti per magazine on line Leggi, Normative e Fisco 0
R Recupero di permalink di un sito che è stato eliminato per errore WordPress 5
I aiuto urgente per thunderbird Posta Elettronica 0
A Web master per semplice sito web Offerte e Richieste di Lavoro e/o Collaborazione 2
M [Cerco][Gratuito] Artista/designer per creazione grafica gioco di società Offerte e Richieste di Lavoro e/o Collaborazione 0
M Un saluto per cominciare Presentati al Forum 1
N MAX() + ADD_DATE - per update su Mysql MySQL 0
G Qualcuno conosce questo software per gestire le telecamere IP Cam e Videosorveglianza 0
A [CERCO] Articolista per siti a tema eventi e feste private Offerte e Richieste di Lavoro e/o Collaborazione 0
F Applicazione PHP/MySQL per prenotazioni: limitare il numero massimo di posti prenotabili PHP 20
I aiuto per outlook Posta Elettronica 0
L Script per convertire numeri in parole Javascript 2
J [Cerco] [Collaborazione gratuita] Grafico per piccoli lavori di grafica Offerte e Richieste di Lavoro e/o Collaborazione 0
M Memorizzazione temi per le diverse pagine del sito Javascript 1
otto9due Proteggere file caricati dall'esterno ma renderli accessibili per gli utenti loggati. PHP 4
E Consigli per hosting reseller Hosting 0
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
F Cerco fotografo per sito abiti da sposa Discussioni Varie 2
R [cerco][retribuito] Collaborazione per creazioni loghi ed altro Offerte e Richieste di Lavoro e/o Collaborazione 0

Discussioni simili