Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Form centrato responsive
#1
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>
<head>
<title>Extra Contents</title>
<link href="css/stile.css" rel="stylesheet" type="text/css" />
</head>
<body class="bg-gray">
<div class="content">
            <div class="text">
                 Enter the password to view the extra contents<br /><br />
                 <form id="form" name="">
                 </form><INPUT id="form" value=""><input id="input" type="submit" value="Enter"><br /><br />
                 Password
  </div>
            
        </div>



</body>
</html>
cliccando su "Enter" si collega alla pagina wrong.htm:
Codice:
<html>
<head>
<title>Extra Contents</title>
<link href="css/stile.css" rel="stylesheet" type="text/css" />
</head>
<body class="bg-gray">
<div class="content">
    <div class="box">
            <div class="text">
                 Invalid Password <br /><br />
                 <input id="input" type="submit" value="Ok">
  </div>
      </div>    
        </div>



</body>
</html>
Il css è così composto:
Codice:
/* Fonts Styles */


@font-face {
    font-family: "couriernew";
    src: local("couriernew"), local("Couriernew"), url("couriernew.ttf") format("truetype");
}


h1,h2,h3,h4,h5,h6 {

    font-family: "couriernew",Trebuchet MS, Arial, Helvetica, sans-serif;

}

.bg-gray{
    background-color:#cecece;
}

.content{
    position:relative;
    width: 608px;
    height: 236px;
}

.content .text{
        position:relative;
        align: center;
        margin:10px 0;
        padding:10px 30px;
        font-family:"couriernew", Arial, Helvetica, sans-serif;
        font-size: 16px;
}

.content .box{
    position:relative;
    align: center;
    background-image: url(../imgs/box.jpg);
    background-repeat: no-repeat;
    width: 608px;
    height: 236px;
}
#form {
    position:relative;
    font-family: "couriernew", Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 16px;
    width: 150px;
    background-color: #cecece;
    border:#fff000 thin;
    border: 1px;
}
#input {
    position:relative;
    font-family: "couriernew", Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
     width: 80px;
    background-color: #cecece;
    border:#FF0 outset;
    border: 1px;
}

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
[Immagine: temp_01.jpg]
[Immagine: temp_02.jpg]
[Immagine: temp_03.jpg]
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
Cita messaggio
#2
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 {
    margin-top: 100px; /* Margine dall'alto standard */
    width: 608px;
    height: 236px;
}
@media only screen and (max-height: 748px) { /* Regole CSS valide per l'altezza della risoluzione da 0 a 748px */
    .content {
        margin-top: 50px; /* Margine dall'alto per iPad */
    }
}
Mattia!
Cita messaggio
#3
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.
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 {
    margin-top: 100px; /* Margine dall'alto standard */
    width: 608px;
    height: 236px;
}
@media only screen and (max-height: 748px) { /* Regole CSS valide per l'altezza della risoluzione da 0 a 748px */
    .content {
        margin-top: 50px; /* Margine dall'alto per iPad */
    }
}
Cita messaggio
#4
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>
<head>
<title>Extra Contents</title>
<link href="css/stile.css" rel="stylesheet" type="text/css" />
</head>
<body class="bg-gray">
<div class="content">
    <div class="text">
        Enter the password to view the extra contents<br /><br />
        <form id="form" name="">
            <input type="password" value=""><input id="input" type="submit" value="Enter">
        </form><br /><br />
        Password
    </div>
</div>
</body>
</html>

Per centrare orizzontalmente il div devi modificare il CSS in questo modo:
Codice:
.content {
    margin: 100px auto 0 auto; /* Margine dall'alto standard (auto serve a centrarlo orizzontalmente) */
    width: 608px;
    height: 236px;
}

Per mostrare i bordi gialli elimina le istruzioni di #form e #input e sostituiscile con queste:
Codice:
#form input {
    font-family: "couriernew", Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 16px;
    width: 150px;
    background-color: #cecece;
    border: 3px solid #FFF000; /* Bordo largo 3 pixel formato da una linea continua e di colore giallo */
}
#form input#input {
    color: #000;
    width: 80px;
}
Mattia!
Cita messaggio
#5
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'" />
- sarebbe utile se al click tutto il pulsante enter diventasse giallo.
- 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
Cita messaggio
#6
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 {
    background-color: #FF0;
}

Modifica il pulsante "Ok" in questo modo:
Codice:
<div id="ok"><input type="submit" value="Ok" /></div>

Nel CSS aggiungi:
Codice:
#ok {
    text-align: right;
}

#ok input {
    background-color: #CECECE;
}
Mattia!
Cita messaggio
#7
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
Cita messaggio
#8
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).
Mattia!
Cita messaggio
#9
- 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>
e nell css ho messo:
Codice:
.invalid {
    margin-left: 185px;
}

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
Cita messaggio
#10
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".
Mattia!
Cita messaggio
#11
Perfetto, adesso funziona tutto!!

Grazie mille
Cita messaggio


Discussioni simili
Discussione Autore Risposte Letto Ultimo messaggio
  rendere responsive pagina web app Chandler 41 109.116 17/01/2015 01:55
Ultimo messaggio: Chandler
  rendere pagina responsive Chandler 2 7.282 13/12/2014 21:55
Ultimo messaggio: Chandler
  sito in parallax responsive Chandler 9 52.631 27/06/2014 12:18
Ultimo messaggio: Mattia
  Responsive Filemanager: sovrascrivere immagini con drag & drop Chandler 13 23.712 19/06/2014 21:44
Ultimo messaggio: jimmyfm

Vai al forum:


Utenti che stanno guardando questa discussione: 1 Ospite(i)