Css e simulazione Frames

vampiretta

Css e simulazione Frames

Visto che in tanti mi avete consigliato di evitare i Frames nella mio Homepge ho "studiato" e ho cercato di usare i css per avere l'effetto frames con barra laterale sinistra fissa.

Ora però ho alcuni problemi.

Prima di tutto nell'esempio che ho trovato io per fare questa cosa, come tag per emttere il foglio di stile all'interno della apgina mi hanno dato:

[html]
<style type="text/css" media="screen">@import url(stile.css );</style>
[/html]

E mi chiedevo è meglio quello o il classico:

[html]
<link rel="stylesheet" type="text/css" href="style_pagine.css">
[/html]

Poi ho un problema con i link della barra laterla. Io vorrei che li le scritte fossero arancioni e quando passo col mouse diventino verdi. Ma poi anche se sono link visitati restino ancora arancioni. Io ho messo le impostazioni ai link ma devo aver fatto qualche casotto.

Vi lascio il codice del css, mi ci date un occhiata e mi dite anche se è secondo voi corretto nella sintassi? Il W3C, barra di scorrimento laterare a parte lo convalida, ma non sono sicura di quel che ho programmato.

Il codice del css:

[html]
body {
margin: 0;
padding: 0 0 0 135px;
color: #FF6600;
background: #FFFFCC;
background-image: url(immagine-sfondo.gif);
font-family: Garamond;
font-weight: bold;
SCROLLBAR-FACE-COLOR:;
SCROLLBAR-ARROW-COLOR:;
}
#menu{
overflow: auto;
height: 100%;
width: 15%;
position: absolute;
top: 0;
left: 12px;
padding: 15 0 0 0px;
color:;
background:;
background-image: url(immagine-sfondo.gif);
font-family: Garamond;
font-size: 16px;
font-weight: bold;
SCROLLBAR-FACE-COLOR:;
SCROLLBAR-ARROW-COLOR:;
}

color:;
text-decoration: none;
font-weight: bold;
}
a:hover {
color:;
text-decoration: underline;
font-style: normal;
}

#content {
padding: 0 1px 2px;
font-size: 18px;
top: 0;
}
a:link, a:active, a:visited {
color: green;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: green;
text-decoration: underline;
font-style: normal;
}
h2 {
color: #B500B5;
font-size: 34px;
font-style: normal;
font-weight: bold;
text-align: center;
margin-top: 15px;
margin-bottom: 0px;
}
h3 {
color:;
font-size: 24px;
font-style: normal;
font-weight: bold;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
h4 {
color:;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}

color:;
font-size: 18px;
font-style: normal;
font-weight: bold;
}
div.hr {
display: block;
background-image: url(barretta.gif);
height: 0px;
background-repeat: no-repeat;
background-position: center center;
margin: auto auto;
}
.table {
color:;
font-size: 18px;
width: 800px;
font-weight: bolder;
} /* tabella testo /
.tablehome {
color:;
font-size: 16px;
width: 700px;
font-weight: bolder;
} / tabella testo /
.tablediritti {
color:;
font-size: 13px;
font-weight: bolder;
} / tabella testo */

border: 2px dotted;
font-size: 12px;
}/* tabelle /
.tablesmile {
border: 2px dotted;
color: black;
font-family: Verdana;
font-size: 12px;
padding: 5px 5px 5px 5px;
border-collapse: collapse;
} / tabelle classiche con bordino */

p{
margin:0;
padding:5px;
}

@media screen
{
body>div#menu
{
position: fixed;
}
}
[/html]

vampiretta

Ora però volevo chiedere una cosa, facendo l'indice laterale in questo modo, e avendo molte pagine da modificare qualora volessi apportare un aggiornamento all'indice, il lavoro diventa massacrante.

Mi chiedevo se sempre con i css (o in qualche altro modo) c'è anche modo di introdurre delle scritte o un elenco, in modo che modificato quello, mi cambiano automaticamente anche tutte le pagine.

paola.mi

Devi usare l'include del php.
In questo modo ogni modo che cambi una voce nella parte fissa, ti si cambia in tutte le pagine.

vampiretta

Provo a cercare nel web include php!

Grazie!

Ma le pagine poi devo farle tutte in php o solo quella che contiene la parte che voglio comune a tutte?

paola.mi

No no, tutte in php, altrimenti non ti funziona l'include.

vampiretta

@Paola_mi said:

No no, tutte in php, altrimenti non ti funziona l'include.
Ah ecco perchè non mi riusciva!

Paola mi dai un occhiata al codice del css per risolvere il problema dei links? Non ne vengo a capo!

E cosa è meglio usare tra @import url e il classico link per i css?

vampiretta

I links li ho risolti...

vampiretta

Pensavo di averli risolti i link ma col cavolo! HELP!!!

paola.mi

Vampiretta, se non ho capito male vuoi che restino arancioni dopo la visita?
Devi impostare il colore (arancione, nella fattispecie) nell a:visited.
Magari non raggrupparli per ora, falli uno a uno:

a:link (e metti tutte le specifiche)
a:visited (e metti tutte le specifiche)
a:hover (e metti tutte le specifiche)

paola.mi

@Vampiretta said:

Ah ecco perchè non mi riusciva!

ATTENTA!!!

Ricorda che se cambi l'estensione delle pagine in .php risulta come fosse un sito nuovo, per cui perdi le posizioni che ti eri guadagnata, il pr e i visitatori abituali penseranno che hai chiuso il sito.
Ti consiglio di lasciare ANCHE tutte le pagine in html, e al posto del testo inserisci una frase che spiega che il sito è a un'altro indirizzo e poi fai il redirect alle pagine nuove...

vampiretta

@Paola_mi said:

Vampiretta, se non ho capito male vuoi che restino arancioni dopo la visita?
Devi impostare il colore (arancione, nella fattispecie) nell a:visited.
Magari non raggrupparli per ora, falli uno a uno:

a:link (e metti tutte le specifiche)
a:visited (e metti tutte le specifiche)
a:hover (e metti tutte le specifiche)

Ciao Paola grazie per l'aiuto!

Quella parte mi riusciva, insomma la faccio abitualmente nelle pagine classiche. Qui il problema è che per simulare i frames, la guida che ho trovato mi ha fatto creare due contenitori uno #menu e uno #content a cui non riuscivo a capire come applicare i link perchè volevo fossero diversi nell'uno e nell'altro. Ora ho girato un po' la rete e provando e riprovando credo di aver trovato la strada giusta:

[HTML]#menu a {
color: #FF6600;
text-decoration: none;
font-weight: bold; }

color: green;
text-decoration: underline;
font-weight: bold; }

color: green;
text-decoration: none;
font-weight: bold; }

color: green;
text-decoration: underline;
font-weight: bold; }[/HTML]

Pagina prova

Volevo:
menu lato: link arancione che al passaggio del mouse divetenta verde e sottolineato.

pagina a destra: link verde che al passaggio del mouse si sottolinea

Funziona, ma non so se è effettivamente la sintassi giusta.

vampiretta

@Paola_mi said:

ATTENTA!!!

Ricorda che se cambi l'estensione delle pagine in .php risulta come fosse un sito nuovo, per cui perdi le posizioni che ti eri guadagnata, il pr e i visitatori abituali penseranno che hai chiuso il sito.
Ti consiglio di lasciare ANCHE tutte le pagine in html, e al posto del testo inserisci una frase che spiega che il sito è a un'altro indirizzo e poi fai il redirect alle pagine nuove...
Ecco mi ricordavo che lo avevi scritto (almeno mi pare fossi stata tu) anche in un altro topic.

Mi chiedevo anche se cambio da htm a html o le maiuscole e minuscole nel nome del file di una pagina, ho lo stesso problema???

Perchè nel mio sito ho alcune pagine .htm e .html e volevo farle tutte uguali. E volevo per comodità togliere le maiuscole ai nomi delle pagine. "ChiSono" farlo "chisono".

Ma se poi deve sembrare un sito ec novo, lascio perdere.

paola.mi

mhhh... all'ultima domanda, ahimé, non ti so rispondere... :bho:

aspettiamo qualche esperto.

trancedesigner

ciao vampiretta,

allora, se cambi le maiuscole in minuscole non ci sono problemi, diverso è per l'estensione: htm è diverso da html.

la cosa migliore sarebbe fare un reindirizzamento 301 dalle pagine "vecchie" htm a quelle "nuove" html.

la mia domanda è: ma ti conviene? o meglio, qual'è lo scopo? sia un utente che un motore, se vedono htm o html, per loro non fa differenza...

interessante il "frame con css"...

achille

vampiretta

@trancedesigner said:

ciao vampiretta,

allora, se cambi le maiuscole in minuscole non ci sono problemi, diverso è per l'estensione: htm è diverso da html.

la cosa migliore sarebbe fare un reindirizzamento 301 dalle pagine "vecchie" htm a quelle "nuove" html.

la mia domanda è: ma ti conviene? o meglio, qual'è lo scopo? sia un utente che un motore, se vedono htm o html, per loro non fa differenza...

interessante il "frame con css"...

achille
Ecco questo già mi è comodo perchè se scrivo il codice direttamente sul foglio bianco starmi a ricordare come ho messo maiuscole e minuscole è una tragedia. Vale lo stesso per htm e html se le ho tutte uguali in teoria farei prima.

Stavo anche pensando che dovrò cambiare lo spazio dove tengo il sito visto che prendo un dominio tutto mio a quel punto perdo cmq la posizione e dunque posso anche cambiare l'estensione delle pagine? O sbaglio?

Che cosa è un reindirizzamento 301?

trancedesigner

è un peccato perdere la popolarità (il pr se vuoi) acquistito.

anche se trasferisci tutto su un dominio tuo, puoi comunque mantenere attivo il vecchio sito e fare un reindirizzamento 301.

"questo 301" è fondamentalmente un comando che si inserisce in un particolare file caricato nella root del sito e che dice "la pagina www.vecchiodominio.it/pagina1.htm è diventata www.nuovodominio.it/pagina2.html".

questo ti permette di trasferire tutte le informazioni delle tue pagine presenti sui motori da una vecchi pagina ad un'altra.

fai sapere se ti serve una mano per questo perchè in realtà è più difficile a dirsi che a farsi.

achille

p.s. ho visto che il sito in realtà non ha questa grande popolarità per cui puoi fare tutto da zero...

vampiretta

@trancedesigner said:

è un peccato perdere la popolarità (il pr se vuoi) acquistito.

anche se trasferisci tutto su un dominio tuo, puoi comunque mantenere attivo il vecchio sito e fare un reindirizzamento 301.

"questo 301" è fondamentalmente un comando che si inserisce in un particolare file caricato nella root del sito e che dice "la pagina www.vecchiodominio.it/pagina1.htm è diventata www.nuovodominio.it/pagina2.html".

questo ti permette di trasferire tutte le informazioni delle tue pagine presenti sui motori da una vecchi pagina ad un'altra.

fai sapere se ti serve una mano per questo perchè in realtà è più difficile a dirsi che a farsi.

achille

p.s. ho visto che il sito in realtà non ha questa grande popolarità per cui puoi fare tutto da zero...
Certo che dirmi che non ha grande popolarità è come piantarmi un paletto di frassino nel cuore... e visto il mio nick...

Ovviamente scherzo, si non sono certo il sito + cliccato del web, dunque magari cambio questa volta le pagine mettendo a tutte le stessa estensione e poi vado tranquilla e comoda ad oltranza.

Se ti va di spiegarmi il metodo 301 magari ci provo. O cmq mi dici dove trovare info a riguardo.

Grazie!

vampiretta

E' possibile secondo voi inserire un header che prenda entrambe le pagine che ho fatto per simulare il frame? :():

vampiretta

@Paola_mi said:

Devi usare l'include del php.
In questo modo ogni modo che cambi una voce nella parte fissa, ti si cambia in tutte le pagine.

Ci sono riuscita!

Ora mi sorge un dubbio, ma se rinomino tutte le pagine in php... non posso + convalidarle W3C???

E che Doc Type devo mettere?

paola.mi

@Vampiretta said:

Ci sono riuscita!

Ora mi sorge un dubbio, ma se rinomino tutte le pagine in php... non posso + convalidarle W3C???

E che Doc Type devo mettere?

Certo che puoi validarle...
Il Doctype dipende da come hai scritto il codice: Html? Xhtml?