peopleForFun ~ don’t surf the net, make the waves

Dovevo realizzare un menù per un sito in stile Windows poi il cliente ha cambiato idea, così ho deciso di pubblicarlo, nulla di che, 4 righe di css e 2 immagini.

Se si vuole cambiare immagine o font i parametri da modificare sono solo nel padding, top e bottom.

Qui l’esempio.

  Windows Vista Menu (22 KiB, 82 hits)

piccolo trucco per eliminare l’errore (?) di un backgroud colorato di un fieldset, con ie, ovvio :)
questa è la situazione “normale”

e questa corretta

il trucco sta nel posizionare i 2 elementi:

#rightnav  fieldset{
	position: relative;
	margin-bottom:20px;
	padding: 1em;
	border:1px solid #CBCBCB;
	background:#EDEDED;
	top:1.5em;
}

#rightnav legend{
	position:absolute;
	top: -1em;
	left: .5em;
	padding: 0.2em 0.5em;
	border:1px solid #CBCBCB;
	font-size:14px;
	background:#123643;
	color:#FFF;
}

spesso su server windows non è presente la gd library, questo ovviamente non consente la creazioni dinamica di immagini, utile in fase di registrazione
un piccolo trucco è di passare direttamente la stringa generata e simulare un’immagine tramite css

span.unselectable {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 2px;
    border: 0px;
    padding: 4px;
    background-color: #000000;
    color: #FFFFFF;
    cursor: default;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

in rete ho trovato un fix per ie, basta aggiungere la riga seguente nel css

behavior: url(ieUserSelectFix.htc);

Php e css

Caricare un’immagine random di background tramite un css non è possibile, ma questo non vuol dire che sia impossibile.
Il sistema che ho utilizzato per il blog è uno script php abbastanza conosciuto, rotator, lo trovate qui: Automatic]
non c’è molto da modificare nel php, basta inserire il percorso delle immagini, $folder = ‘.’; in questo caso il php è nella stessa cartella, cmq è commentato, non si può sbagliare
nel css invece basta caricare il php al posto dell’immagine di sfondo:
background: url(images/rotator.php);
ovviamente nel body

facile, no?