Un nuovo tema per maestroalberto.it

Pubblicato da Davide, Aggiornato lunedì 30 marzo 2009 12 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

Dopo qualche mese di apnea causa tesi, ecco un aggiornamento al portfolio: il nuovo tema per maestroalberto. Il buon Alberto ha deciso di rinnovare il vestito del suo blog, mi ha chiesto di dargli una mano e ho accettato volentieri. E’ nato così un tema pulito ed essenziale, con 6 sidebar gestite tramite widget (3 laterali e 3 nel footer).

Dal punto di vista tecnico, la cosa a mio avviso più interessante è il modulo di ricerca Google, riadattato alla grafica del tema. Per i curiosi, riporto il css utilizzato:

#header form#quick-search {
position: absolute;
top: 175px; right: 20px;
padding: 0; margin: 0;
border: 1px solid #fff;
width: 320px; height: 33px;
background: #e5e5e3 url(images/header-search.gif) no-repeat top left;
z-index: 999999;
overflow: hidden;
}
#header form#quick-search p {
margin: 0; padding: 0; border: none;
}
#header form#quick-search input {
border: none;
background: transparent;
color: #bababa;
float: left;
margin: 0; padding: 5px;
}
#header form#quick-search .tbox {
margin: 6px 0 0 5px;
width: 216px;
display: inline;
border: none;
}
#header #search form#quick-search .btn{
width: 25px; height: 25px;
border: none;
}
#header form#quick-search label {
float: right;
font-size: 10px;
line-height: 11px;
border: none;
padding: 2px 2px 0 2px;
margin: 0;
}
#header form#quick-search input.radio {
float: right;
clear: right;
height: 12px;
margin: 2px 2px 0 0;
padding: 0;
border: none;
}

Ecco come appare il modulo in questione:

L’unica criticità era far rientrare i label che veicolano la ricerca su google o sul web nel piccolo spazio a disposizione nel form, l’unico modo per far diregire a IE questa cosa è forzare le dimensioni del campo di input del radio button. Con Firefox o Safari nessun problema; con IE, nonostante i margini e il padding, il bottone continuava ad andare per i fatti suoi. Dando una regola di height a 12px tutto è tornato come voluto.

Altra cosa interessante del tema è l’utilizzo del 960 grid system: un framework css molto comodo per dimensionare e strutturare un template con dimensione fissa di 960 pixel. E’ un modo rapido e veloce per impostare gli spazi, il framework permette di utilizzare un sistema a 12 o 16 colonne, grazie a una serie di classi preconfezionate e pronte all’uso, sicuramente da approfondire.

Per quanto riguarda la validazione invece, il CSS è privo di errori, mentre il codice XHTML risulta inquinato dai vari plugin.. Mi chiedo: ha ancora senso correre dietro ai mille errori che si presentano quando questi non dipendono da te? La politica che ho adottato è quella di costruire codice valido nella parte che realizzo in prima persona e infischiarsene di ciò che scrivono gli altri, finchè questo non intacca le prestanzioni globali..

Ne approfitto per fare un in bocca al lupo ad Alberto e ringraziarlo per avermi dato fiducia.
Commenti e suggerimenti sono ben accetti.

12 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

  1. 1

    gravatar

    Davvero un bel lavoro! C’è una cosa che non mi piace: l’evento :hover di un img a provoca l’appararie di un bordo (a occhio direi 1px dotted) sotto l’immagine, provocando lo spostamento verso il basso di tutti gli oggetti sottostanti. Non so se è voluto, ma la trovo una cosa fastidiosa.

  2. 2

    gravatar

    lascio un commento soltanto per ringraziarti “ufficialmente” anche nel tuo blog

    :)

    alberto

  3. 3

    gravatar

    Ottimo lavoro. Si vede che c’è la tua mano dietro, il tuo stile è come quello di Missoni… inconfondibile ;) Ma d’altro canto con te si va sempre sul sicuro, c’è poco da fare.

  4. 4

    gravatar

    ciao, faccio i complimenti per questo bel tema pulito e dalle linee semplici ed eleganti anche qui come da alberto :)
    p.s. mi manca il coraggio di scrivere l’http del mio blogghino, dal template veramente plastico :-/ avessi un mio dominio,
    ti avrei già commissionato un restyling, e vabbè…

  5. 5

    gravatar

    @vik: dove succede questo? Sui bottoncini della testata per caso?
    L’effetto è voluto ma non dovrebbe far slittare gli elementi sotto.. Riusciresti a darmi qualche indicazione in più? (ad esempio il browser..) Grazie mille ;)

  6. 6

    gravatar

    @camu: grazie.. ma mi manca “Missoni”.. che è? ‘na roba americana?? :D

  7. 7

    gravatar

    No no, è uno stilista rigorosamente italiano ;) Boh, io ho sempre notato i vestiti di Missoni, con tutti quei colori e le righe “come solo lui le fa” ed è stata la prima cosa che mi è venuta in mente quando ho scritto il commento qui sopra eh eh

  8. 8

    gravatar

    Ah, si, scusa! No, i bottoni nell’header vanno benissimo: il problema appare nella sidebar, sia quella a destra sia quella inferiore.
    Firefox 3.0.8 su MacOS

  9. 9

    gravatar

    Hai ragione, risolto. Grazie della segnalazione!

  10. 10

    gravatar

    Ottimo lavoro, volevo segnalarti il link sotto la parola maestroalberto

    In pratica dalle lettere “berto” non è + cliccabile…

  11. 11

    gravatar

    Ciao Julius, grazie della segnalazione.. E’ è dovuto allo z-index e larghezza dei div ;)

  12. 12

    gravatar

    Ottimo lavoro, pulito ed essenziale, complimenti a Davide :)

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi