Problema con i collegamenti!

[Dario Cavallo]

Il problema: vorrei creare una serie di bottoni sottoforma di semplice testo che cambia colore al passaggio del mouse.
Ho creato perciò con Frontpage un foglio di stile esterno.
Sono riuscito ad impostare il colore al passaggio del mouse con la proprietà:

#button1 a:hover {color: rgb(230,0,0)}

Come faccio però ad impostare un colore nero al collegamento ipertestuale non visitato all'interno del foglio di stile?
Ho provato vari metodi; il più ovvio mi sembra:

#button a:link{
color: Black;
font-size: 150%;
text-decoration: none;
}
Poi nella pagina HTML ho richiamato il <div id="button1"> ed ho scritto:

<div id="button1">BUTTON1
</div>

Non funziona: il testo del collegamento ipertestuale mi viene di colore verde e sottolineato pur avendo dichiarato "text decoration: none"!
E' tutto giusto? Come debbo scrivere nel foglio di stile e nella rispettiva pagina HTML, sapendo che voglio richiamare una pseudo-classe come "a:link..." dell' id "button1"?
La pagina dove potete scaricare HTML e CSS è questa:

http://freeweb.supereva.com/proposta80/body.htm?p

Il bottone in questione è l'unico in alto, al centro pagina (BUTTON1).

[awd]

non serve che richiami un id all'interno del tag A se tanto hai già definito il css nella forma:
#button1 a {...}
il che sta a secrivere la formattazione per tutti i tag A all'interno del div con id button1

Per il link non visitato è giusto usare la pseudoclasse a:link ma ad una condizione, che poi descrivi anche a:visited, altrimenti il collegamento visitato avrà il colore di default del browser
quindi o definisci singolarmete a:link, a.visited, a:hover e a:active, oppure usi la formattazione generica che ti ho scritto sopra:

#button1 a {
color: Black;
font-size: 150%;
text-decoration: none; }
#button1 a:hover {
color: rgb(230,0,0) }

quindi tutti gli stati del pulsante saranno nero, 150%, senza sottolineatura, tranne lo stato hover dove il testo avrà il colore definito

[Dario Cavallo]

Ho usato come mi hai detto:

#button1 a {
color: Black;
font-size: 150%;
text-decoration: none; }
#button1 a:hover {
color: rgb(230,0,0) }

I pusanti funzionano!
Però vorrei fare un'altra cosa:

1)vorrei fare in modo che quando faccio click sul "button1", ad esempio, cambio pagina, mi viene di nuovo una pagina con lo stesso sfondo e la stessa interfaccia di bottoni, ma vorrei anche che il bottone che ho selezionato diventi e rimanga rosso, ad indicare che la pagina che sto vedendo in quel momento è quella raggiunta dal bottone1 (button1).

In pratica voglio fare la stessa cosa presente nei bottoni di questo sito:

http://www.paumanokreview.com/

2)Non sono capace di fare in modo che compaia la nuova sezione senza ricaricare tutta la pagina (dopo aver premuto il bottone), ma va bene lo stesso: faccio che caricare una nuova pagina e risolvo il problema.

1 bis)ho provato ha usare "a:active" ed "a:visited" per regolare il colore una volta che il bottone è stato premuto, ma non riesco a raggiungere il mio scopo. Soprattutto per il fatto che premendo il bottone cambia la pagina e quindi il valore non viene mantenuto.

E' possibile ovviare a questi problemi? C'è una soluzione?
Non ditemi che posso copiare il css del sito di Paumanok perchè non ci capisco molto!
Se mi potete guidare è molto meglio...

[awd]

1) la funzione delle pseudo-classi non ti serve per rendere attivo un pulsante! a:active, che spesso trae in inganno, serve solo per definire lo stile del pulsante nel momento in cui ci stai cliccando sopra (di solito si lascia uguale all'hover)!
Per rendere attivo il pulsante nella nuova pagina devi eliminare il collegamento (il tag a) e applicargli, ad esempio, una classe con la formattazione che ti interessa. questo puoi farlo a mano, oppure con dei procedimenti lato server che anche io sto cercando di implementare in un mio sito. se hai poche pagine va benissimo a mano!

2) questa una cosa normalissima, a meno che non usi i frame. oppure potresti usare degli include che ti caricano solo la parte di contenuto variabile, ma qui si va sul tecnico

[Dario Cavallo]

Grazie per l'aiuto: ho risolto il problema!
Vorrei un altro aiutino:

vorrei disporre il "titolo1" (<h1>...</h1>)di fianco al "titolo2"(<h2>...</h2>)sulla stessa righa.

Cioè usare la funzione text-align:left per il titolo1 e text-align:right per il titolo2. Entrambe sono contenuti in un div#container.
Il problema è che il titolo2 torna a capo a destra sotto il titolo1.
Non vorrei utilizzare le funzioni di posizionamento nè la funzione float.
Debbo usare la funzione display:inline?
Come debbo fare per non stravolgere il corretto layout della pagina?
Potete vedere la pagina dimostrativa a questo indirizzo:

http://www.cavallodario.it/body2.htm