Realizzazione - Progettazione e realizzazione di siti web

Articoli in ‘Realizzazione’

apr 10 2009

CSS: selettore discendente

In un documento HTML, ogni elemento è figlio di un altro elemento, fino a risalire all’elemento radice. Questa struttura ad albero può essere utilizzata nei fogli di stile per selezionare un particolare elemento figlio di un altro particolare elemento.

Data questa struttura:

<div id="content">
<p>Paragrafo</p>
</div>
<div>
<p>Altro paragrafo</p>
</div>

posso scrivere una regola di stile che utilizzi come normale selettore un paragrafo e una regola che utilizzi un selettore discendente, valida solo per l’elemento p che discende dall’elemento div con un attributo id uguale a content:

p {color: black;}
#content p {color: red;}

In questa maniera, tutti i paragrafi avranno un colore nero, ma i paragrafi contenuti all’interno dell’elemento di divisione identificato nella struttura come content avranno un colore rosso.

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

mar 10 2009

divitis, microformats, 960 grid system: un tema per WordPress

Un post di Livio Mondini mi ha ispirato hAtomGrid (file ZIP, 40KB), un tema o meglio un ~~wireframe~~ framework per WordPress che, oltre a ridurre al minimo indispensabile i div, integra il microformat hAtom per la struttura XHTML dei post e 960 Grid System per l’impaginazione.

Pubblicato da Paolo Sordi e archiviato in Realizzazione
1 Commento »

giu 13 2008

Il mio sito: i file

I file integrali delle esercitazioni:

Il mio sito (Archivio ZIP)

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

giu 13 2008

Barre di navigazione

Da una semplice struttura di una lista non ordinata è possibile creare barre di navigazione stilisticamente eleganti e complesse. L’aggiunta di id semantici agli elementi della lista e al corpo della pagina permette inoltre di attivare, grazie ai selettori discendenti, una segnaletica visuale tu sei qui utile a orientare il visitatore nella sua navigazione.

La struttura

<div id="navigazione">
<h2>Navigazione</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="chi-siamo.html">Chi siamo</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>

Lo stile per una barra verticale

div#navigazione h2 {  
display: none;  
}
div#navigazione ul {  
list-style-type: none;  
}
div#navigazione a {  
padding: 10px 0 10px 35px;  
display: block;  
border-bottom: 1px solid #c30;  
text-decoration: none;  
color: #c30;  
background: white;  
}
div#navigazione a:hover {  
color: white;  
background: #c30;
}

Lo stile per una barra orizzontale

div#navigazione h2 {  
display: none;  
}
div#navigazione ul {  
list-style-type: none;  
}
div#navigazione li {
float: left;
}
div#navigazione a {
line-height: 1.6em;
padding: 0 65px 0 35px;
display: block;
border-right: 1px solid #c30;
text-decoration: none;
color: #c30;
background: white;}
div#navigazione a:hover {
color: white;
background: #c30;
}

Lo stile per l’effetto tu sei qui

body#home li#nav-home a {  
color: black;  
background-color: #c50;
}

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

mag 12 2008

Background e Background Image Replacement

Le proprietà delle immagini di sfondo e la sostituzione del testo con un’immagine di sfondo per il logo identificativo del sito: file della lezione del 12 maggio 2008 (archivio ZIP).

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

mag 12 2008

Un semplice layout

In questo esempio, un semplice layout a due colonne con testata contenente il nome del sito. La posizione del menu può essere facilmente spostata a destra del corpo centrale della pagina, sostituendo la proprietà left con la proprietà right del blocco del menu e azzerando la proprietà left per il blocco del contenuto.

La struttura

<h1>Il mio sito</h1>

<div id="contenuto">

<h2>Titolo della pagina</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>

<h3>Titolo del paragrafo</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>

<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco <a href="#">laboris</a> nisi
  ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
  velit esse cillum dolore <em>eu fugiat nulla</em> pariatur. Excepteur
  sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
  </p>
  </div>

<div id="navigazione">
  <h2>Navigazione</h2>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Chi siamo</a></li>
  <li><a href="#">Blog</a></li>
  </ul>
  </div>

Lo stile

body, div, h1,h2,h3,h4,h5,h6,p,ul,li,table, tr, td, dl,dt,dd {
margin: 0;
padding: 0;
}
body {
font-family: &quot;Lucida Grande&quot;, &quot;Lucida sans&quot;, Verdana, sans-serif;
font-size: 14px;
}
h1 {
background: black;
color: red;
text-align: center;
padding: 10px;
height:60px;
}
div#contenuto {
position: relative;
left: 30%;
width: 70%;
}
div#navigazione {
position: absolute;
top: 80px;
background: green;
width: 30%;
left: 0;
}

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

mar 31 2008