Un nuovo tema per maestroalberto.it
Pubblicato da Davide, Aggiornato lunedì 30 marzo 2009 12 Commenti »
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.
Varie info
Articolo pubblicato lunedì 30 marzo 2009 alle 00:14
Segnala questo articolo.. e sentiti utile!
12 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
vik - Pubblicato il 30 03 2009 alle 11:19
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
maestroalberto - Pubblicato il 30 03 2009 alle 14:47
lascio un commento soltanto per ringraziarti “ufficialmente” anche nel tuo blog
:)
alberto
3
camu - Pubblicato il 30 03 2009 alle 15:44
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
anna - Pubblicato il 30 03 2009 alle 17:22
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
Davide - Pubblicato il 30 03 2009 alle 18:04
@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
Davide - Pubblicato il 30 03 2009 alle 18:06
@camu: grazie.. ma mi manca “Missoni”.. che è? ‘na roba americana?? :D
7
camu - Pubblicato il 30 03 2009 alle 18:09
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
vik - Pubblicato il 30 03 2009 alle 21:12
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
Davide - Pubblicato il 30 03 2009 alle 23:27
Hai ragione, risolto. Grazie della segnalazione!
10
Julius - Pubblicato il 01 04 2009 alle 19:45
Ottimo lavoro, volevo segnalarti il link sotto la parola maestroalberto
In pratica dalle lettere “berto” non è + cliccabile…
11
davide - Pubblicato il 02 04 2009 alle 09:24
Ciao Julius, grazie della segnalazione.. E’ è dovuto allo z-index e larghezza dei div ;)
12
pierfrancesco99 - Pubblicato il 03 04 2009 alle 19:07
Ottimo lavoro, pulito ed essenziale, complimenti a Davide :)