Aiuto posizionamento elenco puntato

[ivanisevic82]

Ciao a tutti, sto facendo un piccolo sito per un amico, avrei bisogno di un piccolo aiuto per posizionare meglio un elenco puntato.

Il sito è questo:

http://www.associazioneursamaior.it/

Sulla destra, dove ci sono le note musicali (utilizzate come elenchi puntati) vorrei apportare due modifiche:

1) Vorrei che il testo del titolo H2 (Canti Toscani) sia allineato con la parte alta della nota e non in basso.

2) Vorrei che il testo sottostante (Viaggio musicale in Toscana) non fosse così distante.

Per chiarire ulteriormente, vorrei che fosse così:



Grazie!

[Nobody33]

#destra ul{
background: url(/media/NOTA.png) no-repeat top left;
list-style-type: none;
}

EDIT


Se vuoi una posizione ben specifica dell'immagine di sfondo, inserisci invece di TOP LEFT i pixel.

Il posizionamento dell'immagine di sfondo avviene sull'asse X e Y. Ad esempio

#destra ul{
background: url(/media/NOTA.png) no-repeat 10px 30px;
list-style-type: none;
}

e via dicendo

[ivanisevic82]

Benissimo, grazie!
Alla fine la posizione corretta era "no-repeat 10px 5px;".

Resta però da correggere la distanza tra il testo "h1" e quello normale sottostante.
Ho notato che sopra e sotto H1 mi crea uno spazio automaticamente...come mai?

EDIT: altra cosa...con UL mi mette solo la prima nota, come faccio con le successive??

[Nobody33]

Se vuoi una nota per ognuna delle liste, dai una classe ad ognuno delle ul.

Oppure una lo fai con ul e l'altra con ol.

ul = unordered list

ol = ordered list

[ac_socmel]

gli sfondi "nota musicale" andrebbero applicati a[*]
non ha molto senso fare varie liste

[ivanisevic82]

Lo pensavo anche io ma ho fatto la prova è inserendo le note in li vengono tagliate...
Appena arrivo a casa faccio la prova e vi faccio vedere...

[ivanisevic82]

Ecco, se andate a vedete ora, questo è il risultato se provo ad applicarlo al "li"...

[ac_socmel]

ho visto che non hai fatto il reset
comunque gioca un poco con margin e padding, non è difficile

[ivanisevic82]

Originariamente inviato da ac_socmel
ho visto che non hai fatto il reset
comunque gioca un poco con margin e padding, non è difficile

Cosa é il reset?

[ac_socmel]

reset si dice l'insieme di regole che servono a normalizzare-appianare il comportamento del browser
l'esempio più semplice e usato è l'azzeramento di margin e padding di ogni elemento di blocco

* {
	margin: 0;
	padding: 0
}

a noi comunque adesso serve mettere la nota al suo posto e puoi partire da questo

#destra ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}
#destra ul li {
    background: url("/media/Nota.JPG") no-repeat scroll 5px 5px transparent;
    margin: 0;
    padding: 0px 0px 0px 35px
}