Css e simulazione Frames

**Vampiretta** · 16-03-07, 05:54

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:

Codice HTML:

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

E mi chiedevo è meglio quello o il classico:

Codice HTML:

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

--------------------------------------------------

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:

Codice 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: #FF6600;
 SCROLLBAR-ARROW-COLOR: #FFFFCC;
}
#menu{
  overflow: auto;
  height: 100%;
  width: 15%;
  position: absolute;
  top: 0;
  left: 12px;
  padding: 15 0 0 0px;
  color: #FF6600;
  background: #FFFFCC;
  background-image: url(immagine-sfondo.gif);
 font-family: Garamond;
 font-size: 16px;
 font-weight: bold;
 SCROLLBAR-FACE-COLOR: #FF6600;
 SCROLLBAR-ARROW-COLOR: #FFFFCC;
  }
 
 
#menu a:link, a:active, a:visited {
 color: #FF6600;
 text-decoration: none;
 font-weight: bold;
}
#menu a:hover {
 color: #FF6600;
 text-decoration: underline;
 font-style: normal;
}
 
 
#content {
padding:  0 1px 2px;
font-size: 18px;
top: 0;
}
#content a:link, a:active, a:visited {
 color: green;
 text-decoration: none;
 font-weight: bold;
}
#content a:hover {
 color: green;
 text-decoration: underline;
 font-style: normal;
}
#content h2 {
 color: #B500B5;
 font-size: 34px;
 font-style: normal;
 font-weight: bold;
 text-align: center;
 margin-top: 15px;
 margin-bottom: 0px;
}
#content h3 {
 color: #B500B5;
 font-size: 24px;
 font-style: normal;
 font-weight: bold;
 text-align: center;
 margin-top: 0px;
 margin-bottom: 0px;
}
#content h4 {
 color: #B500B5;
 font-size: 22px;
 font-style: normal;
 font-weight: bold;
 text-align: center;
 margin-top: 0px;
 margin-bottom: 0px;
}
 
#content .scrittine {
 color: #B500B5;
 font-size: 18px;
 font-style: normal;
 font-weight: bold;
}
#content div.hr {
 display: block;
 background-image: url(barretta.gif);
 height: 0px;
 background-repeat: no-repeat;
 background-position: center center;
 margin: auto auto;
}
#content .table {
 color: #FF6600;
 font-size: 18px;
 width: 800px;
 font-weight: bolder;
} /* tabella testo */
#content .tablehome {
 color: #FF6600;
 font-size: 16px;
 width: 700px;
 font-weight: bolder;
} /* tabella testo */
#content .tablediritti {
 color: #B500B5;
 font-size: 13px;
 font-weight: bolder;
} /* tabella testo */
 
#content .table.glitter, table.glitter td {
 border: 2px dotted #FF6600;
 font-size: 12px;
}/* tabelle */
#content .tablesmile {
   border: 2px dotted #FF6600;
 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;
    }
  }

**Vampiretta** · 16-03-07, 05:55

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** · 17-03-07, 11:58

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** · 17-03-07, 13:25

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** · 17-03-07, 13:50

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

**Vampiretta** · 18-03-07, 01:13

Originariamente Scritto da Paola_mi

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** · 18-03-07, 09:56

I links li ho risolti...

**Vampiretta** · 18-03-07, 11:47

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

**Paola_mi** · 18-03-07, 11:59

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** · 18-03-07, 12:02

Originariamente Scritto da Vampiretta

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** · 19-03-07, 02:34

Originariamente Scritto da 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)

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:

Codice HTML:

#menu a {
 color: #FF6600;
 text-decoration: none;
 font-weight: bold; }
 
#menu a:hover {
 color: green;
 text-decoration: underline;
 font-weight: bold; }
 
 
#content a {
 color: green;
 text-decoration: none;
 font-weight: bold; }
 
#content a:hover {
 color: green;
 text-decoration: underline;
 font-weight: bold; }

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** · 19-03-07, 02:37

Originariamente Scritto da Paola_mi

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** · 19-03-07, 10:08

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

aspettiamo qualche esperto.

**trancedesigner** · 19-03-07, 10:20

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** · 20-03-07, 02:47

Originariamente Scritto da 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

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** · 20-03-07, 09:32

è 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** · 24-03-07, 02:45

Originariamente Scritto da 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...

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** · 30-03-07, 05:34

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

**Vampiretta** · 30-03-07, 07:51

Originariamente Scritto da 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.

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** · 30-03-07, 11:06

Originariamente Scritto da Vampiretta

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?

**Vampiretta** · 31-03-07, 04:23

Originariamente Scritto da Paola_mi

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

Ciao Paola, io ho lasciato tutto come era, in Html Transitional, le pagina in estenzione html me le convalida, quelle in php no.

Dove sbaglio?

Grazie sempre per i suggerimenti.

Tu che pensi degli Iframe per fare l'indice? Sono indecisa tra l'include del php e l'iframe.

**Paola_mi** · 31-03-07, 12:27

Vampiretta, fammi capire: tu usi due estensioni per un sito?

Io non lo so se va bene... mi sa di no, però non ci giurerei perché non mi sono mai posta il problema.

Io direi, con molta calmissima (

) mettiti lì e rifallo tutto togliendo i frames, gli iframes e fallo tutto con l'include del php.
In questo modo avrai tutte le pagine uguali, non credi anche tu che sia meglio?

**Vampiretta** · 31-03-07, 13:35

Originariamente Scritto da Paola_mi

Vampiretta, fammi capire: tu usi due estensioni per un sito?

Io non lo so se va bene... mi sa di no, però non ci giurerei perché non mi sono mai posta il problema.

Io direi, con molta calmissima (

) mettiti lì e rifallo tutto togliendo i frames, gli iframes e fallo tutto con l'include del php.
In questo modo avrai tutte le pagine uguali, non credi anche tu che sia meglio?

Dunque io ho fatto due prove, una pagina in HTML e iframes per l'indice laterale inserito in una smulazione di frames con css. Perchhè ho letto che l'iframes è accettato abbastanza bene anche dal W3C e infatti mi convalida le pagine.

Poi ho fatto la prova con le pagine in php, ma col codice html, io il codice php non lo conosco ancora. Forse è li l'inghippo? Io avevo capito che le mie pagine html le rinominavo php e aggiungevo il target dell'include dove mi serviva, non era così?

**Paola_mi** · 31-03-07, 14:01

Che confusione...

Dunque...
se tu crei tutte le pagine in .php utilizzando l'include per tutte quelle parti che dovranno rimanere fisse su tutte le pagine, avrai un bel lavoro e un sito ordinato.

Esempio:

tu crei la pagina del menù che sai rimanere fissa in tutte le pagine (e che per comodità chiameremo "menu.php"), in questo modo:

dopodiché, se necessario, crea la pagina che contiene il footer e che rimarrà fissa in tutte le pagine (per comodità chiamiamola "footer.php" e la crei così (è sempre un esempio, eh?):

<div id="footer">Tutto quello che vuoi inserire nel footer</div>
</body>
</html>

Infine, vediamo a questo punto come creare le pagine, partiamo per esempio dalla home che chiameremo index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
<head>
<title>tuo titolo</title>
<?php include('menu.php'); ?>

TUTTO IL CORPO DELLA HOME

<?php include('footer.php'); ?>

Ovviamente prima di tutto devi crearti un CSS con tutte le impostazioni del caso.

Spero di esserti stata un po' d'aiuto, altrimenti chiedi pure...

**eqz** · 31-03-07, 18:35

Ciao,
scusate se mi intrometto nella discussione.

Forse, la distrazione di Vampiretta sta in questo:
credo che, per validare una pagina htm html xhtml puoi chiedere al W3C la convalida di una tua pagina che e' in locale. Se, invece, chiedi la convalida di una pagina *.php o *.asp devi farla on-line: inserendo l'url assoluto della tua pagina nel validatore, dopo, ovviamente, averla pubblicata su di un server.
Perche', nelle pagine *.php o *.asp il validatore valida il codice html che restituisce il server.
Se mi son sbagliato, scusate.

Grazie, Paola_mi, quanto hai detto mi torna utile, che a php, e non solo, sto a zero.

**Vampiretta** · 01-04-07, 08:35

No il mio problema è che mi lego con lo Strict, devo studiare da zero quali sono gli attributi, target etc che vuole e quali no.

Allora per ora credo di optare per un Iframe o cmq copiare l'indice laterale in tutte le pagine e sto imparando a capire le differenze tra Html e Xhtml entrambi Transitional.

Paola grazie per i suggerimenti, la pagina col php sono riuscita a crearla come mi hai detto tu, il problema è che poi il corpo della pagina è pieno di errori perchè non so ancora seguire i parametri dello Strict.

Css e simulazione Frames

LinkBack

Strumenti Discussione

Css e simulazione Frames

Per Vampiretta.

Tag per Questa Discussione

Permessi di Scrittura