problema layout misto

**cucca** · 08-11-2007, 17:52

Salve a tutti
dovrei realizzare un semplice form, dove i campi posso essere, a seconda della necessita' 1 sotto l'altro, in 2 colonne o in 3 colonne. Per fare questo ho realizzato la seguente pagina:

Codice PHP:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="MSSmartTagsPreventParsing" content="TRUE" />

    <title></title>



    <style>

    form fieldset{

        text-align:left;

        border:1px solid #CCC;

        padding: 15px;

        margin: 0 auto;

        width: 600px;

    }

    .content{

        padding: 1em 1em;

        background-color: #FFFFFF;

    }

    .center{

        margin: 0 auto;

        text-align:center;

    }

    

    .col1_3 {

        float:left;

        display: block;

        margin:0pt;

        width:100px;

    }

    .col2_3 {

        float:left;

        display: block;

        margin:0pt;

        width:250px;

    }

    .col3_3 {

        float:left;

        display: block;

        margin:0pt;

        width:235px;

    }

    </style>

</head>

<body bgcolor="white">

    <div class="content">

        <div class="center"> 

            <form name="form1" method="post" action="#">

                <fieldset>

                    <label> prova 1</label>

                    

                    <div class="col1_3">

                        <label>prova col1</label>

                    </div>

                    <div class="col2_3">

                        <label>prova col2</label>

                    </div>

                    <div class="col3_3">

                        <label>prova col3</label>


                    </div>

                    

                    <div class="col1_3">

                        <input name="c1" type="text" id="zip" size="9" maxlength="9" value=""/>

                    </div>

                    <div class="col2_3">

                        <input name="c2" type="text" id="city" size="35" maxlength="35" value=""/>

                    </div>

                    <div class="col3_3">

                        <input name="c3" type="text" id="state" size="2" maxlength="2" value=""/>

                    </div>

                    

                    <label>prova prova prova</label>

                </fieldset>

            </form>    

        <div>

    </div>

</body>

</html>

ma, come potete vedere il risultato e' abbastanza strano: l'ultima label fuori dai div "col" si va ad unire alla prima e ho paura che il width delle colonne non vada bene per ie...
Potreste darmi un aiutino per risolvere i problemi?

grazie a tutti

**Sgro** · 08-11-2007, 18:26

Che confusione! Innanzitutto elimina ogni tag di formattazione dall'html. Nel tuo caso, togli gli attributi "size" dagli input. Inoltre per correttezza dovresti associare le label ai relativi controlli, così:

codice:

<label for="inputnome">Nome</label>
<input type="text" id="inputnome" />

Inoltre fai sparire gli attributi "name", nel tuo caso specifico non servono a niente, e in ogni caso sono deprecati nel tag input e nel tag form.

Il tag <fieldset> necessita del tag <legend> all'interno per correttezza semantica. Aggiungilo.

Bisognerebbe anche ripulire un po quel form, ci sono una tonnellata di DIV superflui che non hanno alcun significato strutturale e che dovresti rimuovere.

Infine dovresti chiarirmi quel "a seconda delle necessità". In base a cosa i campi si dovranno disporre in un modo o in un altro? Intendo, in base alla risoluzione dell'utente e dimensioni della finestra del browser, oppure tramite un'opzione selezionabile o quant'altro. Senza questa informazione non mi è possibile indirizzarti verso la soluzione adeguata.

**cucca** · 08-11-2007, 18:36

il name negli input deprecati? azz e come si fa quando si ricevono i dati da un form a distinguerli?
Cmq hai ragione per la pulizia... ci vuole decisamente

a seconda delle necessita' era riferito al fatto che ad esempio ho dei campi che dovranno contenere cap, citta' e provincia e vorrei che fossero nella stessa riga ma in 3 colonne, come ad esempio telefono e fax che vorrei mettere nella stessa riga. In realta' non e' una necessita' ma una sistema per raggruppare "intelligentemente" i vari campi, anche per evitare form lunghissimi (in termini di risoluzione verticale).

Spero di essere stato piu' chiaro ora e ti ringrazio del tuo aiuto!

**Sgro** · 08-11-2007, 18:48

Scusa, "name" è deprecato solo su form, mi son confuso. Dopo se ho tempo cerco di darti una mano.

**cucca** · 08-11-2007, 21:12

Originariamente inviato da Sgro
Scusa, "name" è deprecato solo su form, mi son confuso. Dopo se ho tempo cerco di darti una mano.

tranquillo, in effetti name sul form non ha un gran significato... almeno, nella mia poca esperienza non mi e' mai servito

Una domanda forse banale, con xhtml i tag come size non ci sono piu' giusto? a favore di css? esiste qualcosa online tipo una lista di controlli e i tag concessi per xhtml? cosi' da non confondermi tutte le volte

se riesci a darmi una mano per css te ne sono grato! Ciao e grazie

**Sgro** · 09-11-2007, 10:28

Ci sono le reference sul sito www.w3schools.com con l'elenco dei tag e per ognuno in quali DTD è supportato o meno (o deprecato).

A logica comunque basta che segui questo ragionamento: qualunque attributo di tag che indichi una formattazione visiva è da evitare. I CSS forniscono tutte le proprietà necessarie per impaginare i documenti html.

**cucca** · 09-11-2007, 10:38

Originariamente inviato da Sgro
Ci sono le reference sul sito www.w3schools.com con l'elenco dei tag e per ognuno in quali DTD è supportato o meno (o deprecato).

A logica comunque basta che segui questo ragionamento: qualunque attributo di tag che indichi una formattazione visiva è da evitare. I CSS forniscono tutte le proprietà necessarie per impaginare i documenti html.

io sono un po' testone scusami, ma se vado nel sito del w3school e vado a vedere le reference dell'xhtml e clicco su input (http://www.w3schools.com/tags/tag_input.asp) mi compare anche il tag size... sbaglio io a consultare il sito?

**Sgro** · 09-11-2007, 11:07

E' vero che il tag size lo indica come supportato in tutte le DTD (infatti se vedi nell'ultima colonna dice STF (strict, transitional, frameset), ma questo non vuol dire che tu lo debba usare.

Validare un sito rispetto alla DTD non vuol dire avere costruito un sito semanticamente corretto. Significa solo aver rispettato uno standard di well-formedness, che è sicuramente il primo passo verso un lavoro di qualità, ma non basta.

Per avere un sito ben strutturato, devi completamente scindere contenuti da presentazione. Questo ti permette, quando vuoi cambiare l'aspetto estetico del sito o di parte di esso, di intervenire solo sul file CSS senza dover cambiare neanche mezzo carattere nei file html.

Per questo anche attributi supportati dalla DTD come "size" non vanno usati.

Ciao

**cucca** · 09-11-2007, 11:30

Originariamente inviato da Sgro
E' vero che il tag size lo indica come supportato in tutte le DTD (infatti se vedi nell'ultima colonna dice STF (strict, transitional, frameset), ma questo non vuol dire che tu lo debba usare.

Validare un sito rispetto alla DTD non vuol dire avere costruito un sito semanticamente corretto. Significa solo aver rispettato uno standard di well-formedness, che è sicuramente il primo passo verso un lavoro di qualità, ma non basta.

Per avere un sito ben strutturato, devi completamente scindere contenuti da presentazione. Questo ti permette, quando vuoi cambiare l'aspetto estetico del sito o di parte di esso, di intervenire solo sul file CSS senza dover cambiare neanche mezzo carattere nei file html.

Per questo anche attributi supportati dalla DTD come "size" non vanno usati.

Ciao

oookey

ora e' piu' chiaro! Pero' una cosa mi lascia perplesso. Se sto facendo un progetto di diciamo circa 20-30 pagine, per ogni pagina e' bene fare un css per formattare tutti gli elementi e fare magari un css comune a tutti? oppure, come si procede di solito in ambito professionale?

grazie 1000!

P.S.: il problema del css l'ho risolto, avevo sbagliato a calcolare il width, perche' non avevo sottratto il padding del container per 2 volte

**Sgro** · 09-11-2007, 11:43

Per l'organizzazione dei CSS ci sono alcune considerazioni da fare.

Innanzitutto una delle regole chiave per l'ottimizzazione è quella di minimizzare il numero di HTTP requests al caricamento delle pagine. Ne consegue che meno file CSS hai, meglio è.

La creazione di un CSS comune per le parti comuni delle pagine è sicuramente una delle pratiche più comuni e diffuse. Per le parti che variano invece, nelle pagine, puoi agire in diversi modi.

Se ad esempio non riutilizzi mai, nelle varie pagine, gli stessi ID per gli elementi e le stesse classi, puoi mettere tutto nel css comune, organizzandolo magari in sezioni (io lo divido a blocchi logici con dei commenti) del tipo:

codice:

/* Selettori comuni */

body{}
#header{}
#content{}
#navigation{}
#footer{}

/* Homepage */

.contenthome{}

/* News */

.contentnews{}

E così via. A volte non si può proprio però fare a meno di avere più di un file CSS, ad esempio se hai un sito multilingua con anche le immagini di sfondo localizzate a seconda della lingua. In quel caso dovrai avere un file CSS per lingua dove all'interno carichi le immagini di sfondo relative al linguaggio selezionato.

Riassumendo, bisogna valutare caso per caso, cercando sempre di utlizzare il minor numero possibile di richieste HTTP.

Discussione: problema layout misto

Strumenti discussione

Ricerca discussione

Visualizza

problema layout misto

Permessi di invio