Lorem Ipsum

La proprietà CSS list-style-type permette di modificare il punto o il numero elenco di una lista <ul> o <ol>.

Il valore più usato è none, che permette di disattivare del tutto il punto elenco in modo da usare poi una immagine come punto elenco. I valori possibili sono:

none: nessun punto elenco

circle: un cerchio vuoto

disc: un cerchio pieno

square: un quadrato

decimal: 1, 2, 3, …

decimal-leading-zero: 01, 02, 03, …

lower-roman: i, ii, iii, …

upper-roman: I, II, III, …

lower-greek: α, β, γ, …

lower-alpha: a, b, c, …

upper-alpha: A, B, C, …

armenian: Ա Բ, Գ, …

georgian: ა, ბ, გ, …

Ne trovate una dimostrazione qui.

La proprietà CSS border-style permette di impostare lo stile dei bordi di un elemento; si può anche impostare separatamente per ciascun lato usando

border-top-style

border-right-style

border-bottom-style

border-left-style

rispettivamente per il bordo superiore, destro, inferiore e sinistro. I valori possibili sono:

none: nessun bordo

solid: bordo continuo

dotted: puntinato (per i bordi più spessi di 1px, in Firefox viene visualizzato come dei “trattini” quadrati, mentre in Explorer vengono resi dei cerchi)

dashed: tratteggiato

double: doppio, con due righe continue affiancate (ha senso solo per i bordi più spessi di 6px)

groove: inciso, reso con due colori e con un’ombra sul lato superiore e sinistro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero; dato che ciascun lato ha due colori, ha senso solo per bordi più spessi di 6px)

ridge: in rilievo, reso con due colori come per groove ma con i lati invertiti

inset: inciso, reso con due colori, di cui uno viene usato per i lati superiore e sinistro, l’altro per quelli inferiore e destro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero)

outset: in rilievo, reso con due colori come per inset ma con i lati invertiti

Qui trovate una dimostrazione dei vari stili del bordo, da controllare con i diversi browser

Spesso ci serve di creare un box con gli angoli stondati; se il box è di larghezza fissa è facile farlo in CSS usando solo due div opportunamente posizionati:

<div id="top">
<div id="bottom">
testo testo testo
</div>
</div>

L’idea è quella di inserire come sfondo del div top l’immagine che formerà il bordo superiore del box, e come sfondo del div bottom l’immagine che formerà il bordo inferiore. Il div top quindi avrà un padding-top pari all’altezza dell’immagine in alto, mentre dovrà avere padding-bottom pari a zero.

div#top {
width: 232px;
background-image: url(right-top.jpg);
background-repeat: no-repeat;
background-position: top left;
margin-left: 0px;
margin-bottom: 10px;
}

div#bottom {
width: 232px;
background-image: url(bottom.jpg);
background-repeat: no-repeat;
background-position: bottom left;
background-color: #7c2613;
padding: 0px 0px 0px 0px;
position: relative;
top: 14px;
text-align: center;
}

Qui trovate una dimostrazione

La proprietà CSS white-space permette di impostare, in qualsiasi elemento, come vengono gestiti gli spazi bianchi inseriti nel codice. Di default, se nel codice vengono inseriti più spazi bianchi, questi vengono visualizzati come uno spazio solo, ed eventuali a capo non vengono considerati. Possiamo gestire questa cosa in HTML usando i tag <pre> o <code>. La stessa cosa può essere gestita con la proprietà CSS white-space, che ha i seguenti valori possibili:

normal: il default. Più spazi nel codice vengono considerati uno solo. Se il testo arriva alla fine del suo contenitore, viene mandato a capo. Eventuali spazi iniziali non vengono considerati. Eventuali a capo nel codice non vengono considerati.

pre: Viene tutto reso come formattato nel codice: più spazi nel codice vengono resi singolarmente. Se il testo arriva alla fine del suo contenitore non viene mandato a capo. Eventuali spazi iniziali vengono considerati. Eventuali a capo nel codice vengono considerati.

nowrap: come normal, ma non manda a capo il testo alla fine del contenitore (non fa il wrap).

pre-wrap e pre-line: in Firefox resi come normal.

Trovate qui una dimostrazione dei vari valori.

Capita spesso che il CSS (e l’HTML!) che scriviamo non faccia quello che vogliamo. Cosa fare per risolvere la cosa? Beh, “fare delle prove” in genere funziona, ma qualche volta ci fa perdere un sacco di tempo. Ecco quindi un metodo “comprovato” per risparmiare tempo e soprattutto incavolature

1. Cosa voglio fare? Chiariamoci. Spesso pensare razionalmente a cosa vogliamo fare ci fa “scattare la scintilla”
2. Quali sono gli elementi HTML che sono coinvolti?
   1. Identificarli attraverso la Web Developer Toolbar
3. Gli elementi HTML coinvolti sono scritti correttamente nel codice HTML?
   1. Quali sono i selettori CSS che devo usare per richiamarli?
   2. C’è qualche errore di scrittura?
   3. Validare il codice HTML
4. La proprietà CSS che ho impostato non funziona come credevo. Cosa credevo? O meglio, cosa mi aspetto che faccia la proprietà CSS che ho impostato?
   1. Controllare sullo standard se ho ragione
   2. Validare il CSS
5. Se ancora non funziona come vorrei, forse è coinvolta qualche altra proprietà
   1. Controllare con la developer toolbar quali proprietà CSS ho
   2. Controllare se ci sono altri selettori che mi influiscono
   3. Controllare se l’elemento eredita qualche proprietà che non avevo considerato
   4. Accentuare l’effetto della proprietà per capire se viene visualizzata (es. aumentare a dismisura i bordi)
   5. Controllare se gli elementi vicini (genitori, figli, vicini) hanno qualche proprietà che può influire
   6. Modificare altre proprietà che possano avere una qualche influenza, e per ognuna di queste modifiche ricominciare da 1

Per fare un pulsante “in rilievo” si può usare questo codice CSS:

a {
display: block;
width: 200px;
color: #ffcc66;
padding: 5px;
text-align: center;
background-color: #18326d;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom: 3px solid #000;
border-right: 3px solid #000;
border-left: 3px solid #fff;
border-top: 3px solid #fff;
}

Esempio:

Bottone

Purtroppo lo “stondamento” del bordo funziona solo su Firefox, ma l’effetto rilievo vale lo stesso

La cosa più difficile per chi deve fare una pagina Web è farla in modo che si veda correttamente su Explorer: i bachi sono tanti, e spesso l’unico modo di evitarne uno è sfruttarne un altro :!

Ad esempio, si sa che su Explorer 6 o 7 non è implementata la specifica CSS2 min-height. Per risolvere la cosa, però, si può sfruttare un altro bug:

min-height: 200px; -> riga per Firefox

_height: 200px; -> riga per Explorer.

Mah…

Ovviamente, se la pagina non esiste più, un modo è quello di aspettare che Google indicizzi di nuovo il sito. A volte però questo non è possibile, soprattutto quando c’è di mezzo una azione legale… Google però offre degli strumenti per farlo, che sono riassunti qui:

http://www.google.it/intl/it/remove.html

In particolare, se volete rimuovere del tutto una pagina che non esiste più dall’indice, potete farlo in modo urgente con questa interfaccia:

https://www.google.com/webmasters/tools/removalsl

Se avete del codice scritto velocemente tempo fa, o se dovete leggere codice non vostro e non indentato correttamente, questa interfaccia permette di migliorare l’aspetto del codice, impostando le indentazioni, le parentesi e gli spazi secondo le linee guida di PEAR:

http://www.tote-taste.de/X-Project/beautify/ 

Si possono anche scaricare le librerie che permettono di fare “il trucco”

Per fare selezionare un comune dal database servirebbe una tendina di 8000 voci… una possibilità è fare due tendine, una per provincia e una per comune, facendo popolare la seconda in base alla scelta fatta nella prima. Serve:

Una funzione Javascript per il popolamento:

<script type="text/javascript">
function change(ref)
{
  var selid = ref.selectedIndex;
  var value = ref.options[selid].value;  var url = "popola.php";
  var pars="id_provincia="+value;

var myAjax = new Ajax.Request(  url,
  {
    method: 'get',
    parameters: pars,
    onComplete: function (data)
   {
      $('selectComune').innerHTML = data.responseText;
    }
  });
}
</script>

Uno script PHP che esegua la query per il popolamento:

<?
  if (isset($_GET["id_provincia"])){  $strSQL="SELECT * FROM comuni";

  if (is_numeric($_GET["id_provincia"]) AND $_GET["id_provincia"]>0) $strSQL.=" WHERE     id_provincia=".$_GET["id_provincia"];
  $strSQL.=" ORDER BY comune";

// connessione al db
  $connessione=mysql_connect("localhost", "utente", "password");
  $db=mysql_select_db("nomedb") OR DIE ("Impossibile connettersi al database");

$risultati=mysql_query($strSQL) OR DIE ("Impossibile eseguire la query");

  // scrivo la select per intero
  echo "<select class=\"testo_input\" style=\"width: 147px; float: left;\" title=\"selezionare il comune\"
        name=\"comune_mod\" id=\"comune_mod\"><option value=\"0\">Scegli un
        comune</option>";

  while ($rs=mysql_fetch_array($risultati)){
      if($rs["id_comune"] == $_POST[comune_mod]) $selected = "selected"; else $selected = "";
      echo "<option value=\"".$rs["id_comune"]."\">".htmlentities($rs["comune"])."</option>";
    }

    echo "</select>";
    $chiudi=mysql_close($connessione);
  }
?>

Il form:

<form action="index.php?page=lista&amp;sezione=turismo&amp;lang=<?=$lang?>" enctype="multipart/form-data" method="POST" target="_self">
<select style="width:147px; float:left;" class="testo_input" title="selezionare la provincia di appartenenza" name="comune_mod_p" id=
"comune_mod_p" onchange="change(this);">
<option value="">Prima scegli la provincia</option>
<?
$strProvince="SELECT id_provincia, nomeprovincia FROM province";
$risultati=mysql_query($strProvince) OR DIE ("Impossibile eseguire la query");
// scrivo la select per intero
while ($rs=mysql_fetch_array($risultati)){
  //    if($rs["id_provincia"] == $_POST[comune_mod_p]) $selected = "selected"; else $selected = "";
  echo "<option value=\"".$rs["id_provincia"]."\"".$selected.">".$rs["nomeprovincia"]."</option>";
}
?>
</select>
<br/>
<span id="selectComune">
<select class="testo_input" style="visibility: hidden;width:147px; float:left;"></select>
</span><input type="submit" value=<? echo $l_cerca["$lang"]?> class="tasto_cerca" name="cerca_comune">
</form>