.: HosiriS :.

Informatica e non solo

G.Li.Ar: le viste (2)

Posted by hosiris su maggio 15, 2010

Nell’ultimo post avevo presentato una modifica di base sulle viste, nel poco tempo a disposizione ho modificato ulteriormente l’aspetto del mio applicativo, senza raggiungere effetti stilistici spettacolari, ma rendendolo più carino da vedere. Ho principalmente modificato il foglio di stile, producendo una soluzione a due colonne:


<!-- web/css/main.css -->
body {
    font-family: Verdana, Arial;
    width: 800px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
}
div#header h1 {
    border: 1px black solid;
    font-size: 24px;
    text-align: center;
    padding: 10px;
}
div#menu {
    float: left;
    display: block;
}
div#menu ul {
    list-style: none;
    margin: 0;
    padding: 10px;
}
div#menu a {
    font-size: 10px;
    text-decoration: none;
    color: #000;
}
div#menu a:hover {
    background: #000;
    color: #aff;
}
div#content {
    font-size: 10px;
    margin: 0 10px 20px 20px;
    float: left;
}
div#footer {
    clear: both;
}
div#footer h3 {
    border: 1px black solid;
    font-size: 8px;
    text-align: center;
    padding: 5px;
}

il codice dovrebbe essere di facile lettura, ma specifico alcuni passaggi importanti. Il body è centrato, quindi tutto il contenuto verrà automaticamente centrato. La soluzione a due colonne è tableless, utilizzando il metodo “float: left” sul div menu e content, non dimenticate di impostare nel div footer la voce: “clear: both” altrimenti il footer andrà a sovrapporsi alle due colonne. Ho modificato i parametri del menu “ul” eliminando le decorazioni tipiche del tag anchor e aggiungendo un effetto rollover al passaggio del mouse.

Il risultato è il seguente:

Certo il bianco e nero, lo rende ancora bruttino, ma per me è già un seccesso così!
Potrete apprezzare il fatto che, tramite il pattern decorator, la struttura base riamarrà costante nella navigazione, mentre quello che starà nel content va modificato. A tal fine io ho lavorato sui template dei moduli “libri” e “articoli”.
Ad esempio una semplice modifica al file “apps/frontend/modules/libri/templates/editSuccess.php” (se non ricordate i nomi dei template, vi ricordo che la vista per una data azione è data dal nome dell’azione + “Success”) porta a questo risultato:

Alla prossima… e come sempre: Buon divertimento!

2 Risposte to “G.Li.Ar: le viste (2)”

  1. blackout said

    ottimo lavoro

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: