+ Rispondi alla Discussione
Risultati da 1 a 26 di 26

Css e simulazione Frames

Ultimo Messaggio di Vampiretta il:
  1. #1
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623

    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:

    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;
        }
      }

  2. #2
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    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.

  3. #3
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    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.

  4. #4
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    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?

  5. #5
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    No no, tutte in php, altrimenti non ti funziona l'include.

  6. #6
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da Paola_mi Visualizza Messaggio
    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?

  7. #7
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    I links li ho risolti...

  8. #8
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Pensavo di averli risolti i link ma col cavolo! HELP!!!

  9. #9
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    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)


  10. #10
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    Citazione Originariamente Scritto da Vampiretta Visualizza Messaggio
    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...

  11. #11
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da Paola_mi Visualizza Messaggio
    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.

  12. #12
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da Paola_mi Visualizza Messaggio
    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.

  13. #13
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    mhhh... all'ultima domanda, ahimé, non ti so rispondere...

    aspettiamo qualche esperto.

  14. #14
    Moderatore L'avatar di trancedesigner
    Data Registrazione
    Aug 2006
    Località
    Brescia
    Messaggi
    619
    Segui trancedesigner su Twitter Aggiungi trancedesigner su Google+ Aggiungi trancedesigner su Facebook Aggiungi trancedesigner su Linkedin Visita il canale Youtube di 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
    Mia mamma dice che non sono bello ma simpatico...

  15. #15
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da trancedesigner Visualizza Messaggio
    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?

  16. #16
    Moderatore L'avatar di trancedesigner
    Data Registrazione
    Aug 2006
    Località
    Brescia
    Messaggi
    619
    Segui trancedesigner su Twitter Aggiungi trancedesigner su Google+ Aggiungi trancedesigner su Facebook Aggiungi trancedesigner su Linkedin Visita il canale Youtube di 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...
    Mia mamma dice che non sono bello ma simpatico...

  17. #17
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da trancedesigner Visualizza Messaggio
    è 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!

  18. #18
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    E' possibile secondo voi inserire un header che prenda entrambe le pagine che ho fatto per simulare il frame?

  19. #19
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da Paola_mi Visualizza Messaggio
    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?
    Ultima modifica di Vampiretta; 30-03-07 alle 07:57

  20. #20
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    Citazione Originariamente Scritto da Vampiretta Visualizza Messaggio
    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?


  21. #21
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da Paola_mi Visualizza Messaggio
    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.

  22. #22
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    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?


  23. #23
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    Citazione Originariamente Scritto da Paola_mi Visualizza Messaggio
    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ì?

  24. #24
    Non iscritto L'avatar di Paola_mi
    Data Registrazione
    Mar 2006
    Località
    Cinisello Balsamo
    Messaggi
    1,263
    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:

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="tuo nome" />
    <meta name="Keywords" content="tue parole chiave" />
    <meta name="Description" content="tua descrizione" />
    <meta name="robots" content="all" />
    <link href="style.css" rel="stylesheet" type="text/css" / (tuo css)>
    </head>
    <body>

    tutto il tuo menù
    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...

  25. #25
    eqz
    eqz è offline
    User
    Data Registrazione
    Mar 2007
    Messaggi
    20

    Per Vampiretta.

    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.

  26. #26
    Utente Premium L'avatar di Vampiretta
    Data Registrazione
    Oct 2006
    Località
    Roma
    Messaggi
    1,623
    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.

+ Rispondi alla Discussione

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.