Voci categorizzate come ‘CSS’

5 cose da non fare nei vostri siti

3 Giugno, 2007 · 1 Commento

cose da non fare

  1. Non usare CSS interni. Questo vuol dire che nella pagina HTML all’interno del tag HEAD non devono esserci definizioni di stile come accade in questo esempio:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title›seconda pagina</title>
    <style type="text/css">
    .style1 color: #00FFFF}
    #contenuto{
    background-color: #FFFFFF; font-family: "Trebuchet MS", Verdana, Arial, sans-serif;}
    </style>
    </head>
  2. Non inserire elementi di formattazione grafica all’interno dell’HTML. Questo tipo di formattazione del testo
    <div align=”center”><strong>Benvenuti nel nostro sito! </strong></div>
    deve essere definita ed inserita nei fogli di stile. Ricordatevi che bisogna sempre separare il contenuto dalla presentazione (Separazione: il Dilemma del Web Designer – Pixline.net)
  3. Non usare il corsivo per interi paragrafi. (Consigli di grafica – Mestiere di Scrivere)
  4. Non giustificare il testo ( Allineamento – Gdesign.it)
  5. Non usare le tabelle per impostare la grafica delle pagine (CSS e tabelle a confronto – Constile.org)

Categorie: CSS · html · suggerimenti

menu di navigazione orizzontale

25 Aprile, 2007 · Lascia un Commento

Per realizzare un menu di navigazione orizzontale utilizzando le liste occorre aggiungere al vostro foglio di stile un selettore che identifichi il menu (ad esempio #navmenu).

Per l’elemento ul (unordered list) presente nel menu bisogna aggiungere una regola CSS che rimuova il punto dalla lista e setti i margini a zero per l’intera lista.
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }

Il passo successivo è quello di disporre orizzontalmente gli elementi delle lista (li-list item)
#navmenu li {display: inline; }

Ora non resta altro che passare al file HTLM:
<div id="navmenu">
<ul>
<li>home</li>
<li>programma</li>
<li>materiale didattico</li>
<li>esami</li>
</ul>
</div>

Ovviamente potete personalizzare ulteriormente il menu aggiungendo altre regole… ad esempio:
#navmenu li {
display: inline;
background-color: #CCCCCC;
padding: 3px;
}

Questo è il risultato:
menu di navigazione orizzontale

Categorie: CSS

Testo intorno all’immagine

24 Aprile, 2007 · Lascia un Commento

matita…praticamente quello che succede in questo post!
Il primo passo è definire un selettore di tipo class a cui associamo un nome, ad esempio image_sx, ed attribuirgli un float a sinistra e un margine di 3 pixel (per distanziare l’immagine dal testo):
.image_sx {float: left; margin: 3px;}
Il secondo passo è associare all’immagine presente nel documento HTLM la classe creata:<img src="immagine.gif" alt="descrizione immagine" class="image_sx"/>
Ovviamente se desiderate posizionare l’immagine a destra basta cambiare il valore left con right
.image_dx {float: right; margin: 3px;}

Vi ricordo che la sintassi per definire un selettore CSS da usare come nome di una classe richiede l’uso di un “.” (punto) immediatamente prima di tale nome. Al contrario, la sintassi per la definizione di selettori di tipo id richiede l’uso di un “#” (cancelletto, sharp), al posto del “.” .

Per chi usa Dreamweaver
Inserite un’immagine all’interno del documento icona “inserisci immagine”(inserisci > immagine).
Create una nuova regola CSS icona “nuova regola”(testo>stili CSS> nuovo), controllate che il selettore CLASSE sia selezionato, attribuite il nome e fate click su ok.
Ora non vi resta che associare la classe all’immagine: selezionate l’immagine e dalla finestra CLASSE all’interno del box PROPRIETÀ scegliete la classe da associare.

Spero sia tutto chiaro…

Categorie: CSS · Immagini

Siti nudi per un giorno

5 Aprile, 2007 · Lascia un Commento

CSS naked day ‘07Oggi (5 Aprile) si celebra il CSS naked day ‘07.
Questo vuol dire che tutti coloro che aderiscono all’iniziativa faranno a meno per un giorno dei propri fogli di stile. L’idea è di Dustin Diaz per spingere al rispetto degli standard e alla scrittura di codice di buona qualità.
Perché questo blog resta vestito?
Che domanda!
Non ho scritto io il codice…
Contribuisco all’iniziativa semplicemente con questo post!

Categorie: CSS

Contenuti in orizzontale

2 Aprile, 2007 · 4 Commenti

The Horizontal Way Marco Rosella con il suo The Horizontal Way ha vinto il 10° South By Southwest Web Awards (gli oscar americani del web) come “Best CSS”.
The Horizontal Way è un sito progettato con un layout tutto in orizzontale che fa da showcase a diversi siti realizzati con tale struttura.

Se la cosa vi piace e vi ispira potete scaricare il template… provare a creare un sito… ed inserirlo nella galleria…

Categorie: CSS · web design