Tag: attributi

Il posizionamento dei blocchi con html e css

Torniamo sull’argomento del posizionamento dei blocchi <div> in una pagina html, perché è particolarmente sentito. Una volta un layout veniva disegnato facendo ricorso alle tabelle. Adesso con i css tutto è diventato estremamente più potente ed abbiamo strumenti prima assolutamente impensabili. Peccato che con le tabelle tutto fosse anche assolutamente semplice. Oggi, volete due blocchi con la stessa altezza ed allineati orizzontalmente e sotto di essi altri due con le stesse caratteristiche? Benvenuti all’inferno.

Ci è stato insegnato che i <div> sono elementi che per default si posizionano verticalmente così come i <p>, <ul> ecc. e quindi se vogliamo un immagine affiancata ad un altro blocco possiamo, per esempio, utilizzare la proprietà float: per posizionare l’immagine.

Quindi pensiamo di posizionare nella pagina un’immagine afiancata dalla sua descrizione e in una riga successiva un’altra immagine anch’essa affiancata dalla propria descrizione.

Lezione 39: Costruiamo un template (Parte 9^)

Impariamo a costruire un sito Web

Lezione 39: Costruiamo un template (Parte 9^)

Per terminare la costruzione del nostro template di esempio manca la descrizione della parte del contenuto ed infine del footer.

Riprendiamo quello che avevamo definito nella lezione 37 come scheletro del corpo centrale del nostro template:

<div class="ww_corpo_wrapper">
    <div class="ww_corpo_row">
      <div class="ww_corpo_cell ww_sidebar1"> ... </div>
      <div class="ww_corpo_cell ww_contenuto"> ... </div>
    </div>
</div>

Continua a leggere…

Lezione 37: Costruiamo un template (Parte 7^)

Impariamo a costruire un sito Web

Lezione 37: Costruiamo un template (Parte 7^)

Terminato il menu ci occupiamo adesso del corpo della nostra pagina web. Il corpo che è tutto ciò che sta tra la header ed il footer (vedi l’immagine fornita a proposito alla lezione 31) lo includiamo in un blocco contenitore entro al quale inseriremo la sidebar ed il contenuto. Il codice html è:

<div class="ww_corpo_wrapper">
  <div class="ww_corpo_row">
    <div class="ww_corpo_cell ww_sidebar1"> ... </div>
    <div class="ww_corpo_cell ww_contenuto"> ... </div>
  </div>
</div>

Continua a leggere…

Dimensione del font: come dichiararla?

Quando dobbiamo definire la dimensione del carattere in un foglio di stile CSS abbiamo a disposizione diverse opzioni. Possiamo utilizzare una ‘parola chiave’, (small, large ecc.} oppure un valore numerico. Se si utilizza un valore, è ovviamente necessario dichiarare l’unità di misura con una delle quattro opzioni: px – em – % – pt. Quale è la migliore? Beh, se ci fosse un’opzione da preferire in assoluto non ci sarebbero verosimilmente le opzioni alternative. La risposta è quindi: dipende.

Continua a leggere…

Lezione 33: Costruiamo un template (Parte 3^)

Impariamo a costruire un sito Web

Lezione 33: Costruiamo un template (Parte 3^).

Dopo aver esaminato la parte iniziale relativa allo sfondo, affrontiamo il contenuto vero e proprio della pagina (ricordiamo che facciamo riferimento alla pagina mostrata nelle immagini nella lez.31). Cominciamo ovviamente dalla testata e dal menu immediatamente successivo all’immagine di testata.

Alla fine della lezione precedente abbiamo proposto l’intelaiatura della nostra pagina con i commenti che ci dicono cosa andremo ad inserire nei vari blocchi. Vediamo dunque che tutti i blocchi di contenuto (header, menu, sidebar ecc.) sono stati racchiusi in un unico contenitore che abbiamo indicato così:

Continua a leggere…

Corso HTML e CSS (29^ lezione): CSS: Trasformazioni

Impariamo a costruire un sito Web

Lezione 29: CSS: Le ultime proprietà.

Ci restano da vedere le proprietà relative a:

– Trasformazioni (CSS3, ma supportate con specifiche varianti)

– Animazioni (CSS3, non supportate da IE)

– Transizioni (CSS3, non supportate da IE)

Continua a leggere…

Corso HTML e CSS (20^ lezione): CSS: Box model (3^parte)

Impariamo a costruire un sito Web

Lezione 20: CSS: Box model (3^parte).

 

Vediamo dunque tutte le proprietà che possiamo usare per stilizzare un box. A questo proposito possiamo fare riferimento alla tabella delle proprietà riportata alla lez. 18.

Suddividiamo le proprietà per tipo per nostra comodità di esposizione.

Continua a leggere…