Form centrato responsive - Versione stampabile +- Forum di Matriz (https://www.matriz.it/forum) +-- Forum: Programmazione Web (https://www.matriz.it/forum/forum-26.html) +--- Forum: (X)HTML, CSS & JavaScript (https://www.matriz.it/forum/forum-28.html) +--- Discussione: Form centrato responsive (/thread-665.html) |
Form centrato responsive - Chandler - 27/11/2013 Ciao Mattia, ho bisogno di fare una "finta" pagina di inserimento password che dà sempre "password non corretta" come risposta. Ho deciso di fare una index.html così strutturata: Codice: <html> Codice: <html> Codice: /* Fonts Styles */ Adesso, dato che le due pagine dovrò visualizzarle da un ipad, occorrerebbe che fossero in responsive... quindi cosa occorre modificare per renderle in responsive? ti allego 3 immagini per farti vedere come dovrebbero venire come puoi vedere nella terza immagine, cliccando sul form di inserimento password dovrebbe essere più alto della tastiera dell'ipad (onde evitare che lo copra). Credo sia tutto... ti rpego di farmi sapere Grazie RE: pagina in responsive - Mattia - 28/11/2013 Al div con classe "content" devi assegnare un margine dall'alto in base alla risoluzione dello schermo. Ci sarà un margine di default e uno in base all'altezza della risoluzione. Ho messo due valori di esempio, poi correggili tu in base a come vuoi che appaia. Codice: .content { RE: pagina in responsive - Chandler - 28/11/2013 Ciao Mattia, ho sistemato il valore per ipad a 200 e il div si è abbassato correttamente, ma comunque non viene centrato come nell'immagine d'esempio! Inoltre ho difficoltà a vedere il bordo giallo intorno al form per scrivere la password e al pulsante "enter" e a "nascondere il testo della password che immetto nel form. (28/11/2013 14:20)Mattia Ha scritto: Al div con classe "content" devi assegnare un margine dall'alto in base alla risoluzione dello schermo. RE: pagina in responsive - Mattia - 29/11/2013 Devi modificare il codice HTML della prima pagina in questo modo (ho corretto alcuni errori e ho fatto in modo che il campo sia di tipo "password"): Codice: <html> Per centrare orizzontalmente il div devi modificare il CSS in questo modo: Codice: .content { Per mostrare i bordi gialli elimina le istruzioni di #form e #input e sostituiscile con queste: Codice: #form input { RE: Form centrato responsive - Chandler - 30/11/2013 Grazie Mattia, un paio di appunti: - l'input ENTER non può avere la stessa larghezza dell'input di inserimento della passw (cioè 150 px, ma al max 80px). - ho provato a collegare al click il pulsante enter con la pagina wrong.htm ma non funzia, ho usato questa sintassi: Codice: <input type="password" value=""><input id="input" type="submit" value="Enter" onclick="location.href='../gaja/wrong.htm'" /> - il pulsante OK della pagina wrong.htm è diventato un bottone e non è fedele all'immagine allegata al post. Sarebbe anche utile riuscire ad allinearlo più a destra rispetto al centro (sempre come nell'img in allegato nel primo post) Puoi vedere una simulazione QUI siamo quasi vicini al risultato finale delle immagini Grazie RE: Form centrato responsive - Mattia - 30/11/2013 Nel messaggio precedente avevo sbagliato a scrivere il codice CSS. L'ho corretto e, se lo ricopi adesso, il pulsante "Enter" dovrebbe diventare lungo 80 pixel. Per collegare il form devi inserire all'interno del parametro action il valore della pagina a cui vuoi arrivare. Per avere il pulsante giallo quando clicchi aggiungi questo codice CSS: Codice: #form input#input:active { Modifica il pulsante "Ok" in questo modo: Codice: <div id="ok"><input type="submit" value="Ok" /></div> Nel CSS aggiungi: Codice: #ok { RE: Form centrato responsive - Chandler - 30/11/2013 Direi che ci siamo quasi: - bisognerebbe riuscire a staccare di 10 px il form della pass dal bottone enter - in wrong.html la scritta "Invalid Password" dovrebbe essere centrata dentro il box bianco per il resto ho colelgato l'Ok alla pagina iniziale così che diventi un circolo vizioso. Grazie RE: Form centrato responsive - Mattia - 01/12/2013 Per staccare il campo della password dal bottone devi aggiungere un margine destro al campo oppure aggiungere un margine sinistro al bottone. Per centrare una scritta, puoi inserirla dentro un tag (per esempio, <p>) e assegnargli il valore "center" a text-align (altri valori di text-align sono "left" per allinearlo a sinistra, "right" per allinearlo a destra e "justify" per rendere il testo giustificato). RE: Form centrato responsive - Chandler - 01/12/2013 - sono riuscito a staccare il bottone correttamente, dandogli un margin-left. - la scritta invece non si centrava nonostante il text-align quindi ho deciso di aggiungergli una classe alla quale ho applicato nuovamente il margin-left: Codice: <p text-align="center" class="invalid" >Invalid Password</p> Codice: .invalid { Adesso tutto funziona perfettamente! L'unica domanda che ti faccio (e sicuramente è abbastanza stupida) è che da ipad il bottone non lo vedo come su web, ma come bottone "standard" di safari...si riesce a forzare la visualizzazione per farlo vedere come nelle immagini che avevo allegato nel primo post (e come lo vedo su web)? Grazie RE: Form centrato responsive - Mattia - 01/12/2013 text-align è una proprietà del CSS e non è un attributo HTML; è per quello che non ti funzionava. Per eliminare lo stile dei bottoni di Safari, puoi utilizzare la proprietà CSS -webkit-appearance con valore "none". RE: Form centrato responsive - Chandler - 01/12/2013 Perfetto, adesso funziona tutto!! Grazie mille |