Visualizzazione post con etichetta CSS. Mostra tutti i post
Visualizzazione post con etichetta CSS. Mostra tutti i post

lunedì 7 aprile 2008

Angoli smussati con script PHP

Gli angoli smussati nelle pagine web vengono ormai utilizzati da gran parte dei web master. La resa grafica ottenuta arrotondando quadrati e rettangoli è spesso gradevole e rendono un sito internet un po' meno amatoriale senza un eccessivo ricorso alla grafica.

Purtroppo HTML e CSS, stratagemmi contorti a parte, non gestiscono nativamente questo tipo di implementazione.

Lo script che trovate nel sito Tonino Web Site consente di aggiungere angoli smussati con poche righe di codice, senza appesantire le pagine e con risultati grafici decisamente buoni.

Stiamo sperimentando lo script in pagine complesse su un sito del nostro network e al momento l'unico problema rilevato è con i div ad altezza variabile su FireFox 2. Nessun problema invece con Explorer 7

Incolonnare i link con i CSS

La sezione link partner nella home page di Mytom aveva bisogno di un deciso restyling, visto che era organizzata in un insieme di link confuso e senza nessuna formattazione.
Per ovviare a tale lacuna, Mytom ha deciso di rimettere tutto apposto ricorrendo ai CSS, d' altra parte tutto il sito è costruito con Cascade Syle Sheet.
Il primo passo è stato richiudere i link in un nuovo contenitore (i valori, d'ora in avanti, sono indicativi):

#link_partner {height: 120px}

Abbiamo dato così un' altezza fissa al contenitore. Successivamente abbiamo impostato un formato al tag "a" da inserire allinterno del contenitore.

#link_partner a {float: left; width: 290px; display: block; text-decoration:none; color: #396594; font-size: 12px; text-align: center;}

Dei valori sopra indicati è bene soffermasi sui seguenti:

- float: left; fa in modo che ogni link si disponga alla destra di quello precedente (left vuol dire che è mobile a sinistra)
- display: block; indica che il link deve avere la larghezza fissa dichiarata con width e deve comparire per intero come, appunto, un blocco.
- text-decoration: none; infine non fa comparire la linea sotto il link

Il risultato lo potete vedere voi stessi in home page, e tutto questo senza ricorrere alla solita tabella fatta di righe, colonne, allineamenti, dimensioni fisse ecc. ecc.