Unofficial WebSite X5

WebSite X5 versioni obsolete => WebSite X5 [v10] Professional - Discussioni generali => Topic aperto da: PierBin - 26 Luglio, 2014, 10:44:05

Titolo: spiegazione effetto
Inserito da: PierBin - 26 Luglio, 2014, 10:44:05
Ciao Raga, forse ne avete già parlato, quindi chiedo gentilmente di girarmi il link di riferimento
sul sito test di Stesil ho visto questo effetto [size=78%]http://stesil.altervista.org/evo10/back_image_navigation/ (http://stesil.altervista.org/evo10/back_image_navigation/)[/size]
Come si realizza?
Ringrazio anticipatamente
Titolo: Re:spiegazione effetto
Inserito da: lemonsong - 26 Luglio, 2014, 11:51:58
Qui trovi il topic:

http://www.unofficialwsx5.com/index.php?topic=1547.0 (http://www.unofficialwsx5.com/index.php?topic=1547.0)

Se incontrerai problemi leggendo il topic, progetto etc... posta là dentro.

Titolo: Re:spiegazione effetto
Inserito da: PierBin - 26 Luglio, 2014, 14:31:20
grazie ho scaricato il progetto mo vediamo come integrarlo
 ;)
Titolo: Re:spiegazione effetto
Inserito da: PierBin - 26 Luglio, 2014, 20:06:51
Problema n 1
vorrei aggiungere una voce al menu dentro alla quadrato colorato in + ma si sovrappone al menu principale vedi problema
http://www.testpierbin.altervista.org/index-1.html (http://www.testpierbin.altervista.org/index-1.html)
Grazie
Titolo: Re:spiegazione effetto
Inserito da: stesil - 26 Luglio, 2014, 23:02:15
Ciao,

devi modifcare i valori di altezza e margin-top di questo selettore CSS: ul.menu > li ul

http://stesil.altervista.org/evo10/back_image_navigation/_index.html

Hai anche incluso due volte sia la libreria jQuery che lo script jquery.bgpos.js.
Titolo: Re:spiegazione effetto
Inserito da: PierBin - 27 Luglio, 2014, 10:10:51
In primis ti ringrazio e sai a cosa mi riferisco
Il CSS è questo ma qual'è la stringa che ti permette di aggiungere una voce al menu dentro al quadrato colorato in[/size] questo caso di color azzurro chiaro.



.menuWrapper{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    position:relative;
    margin:20px auto;
    height:542px;
    width:797px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-color:transparent;
}
ul.menu{
    list-style:none;
    width:797px;
}
ul.menu > li{
    float:left;
    width:265px;
    height:542px;
    border-right:1px solid #777;
    background-repeat:no-repeat;
    background-color:transparent;
}
ul.menu > li.last{
    border:none;
}
.bg1{
    background-image: url(../images/bin/1.jpg);
}
.bg2{
    background-image: url(../images/bin/2.jpg);
}
.bg3{
    background-image: url(../images/bin/3.jpg);
}
ul.menu > li > a{
    float:left;
    width:265px;
    height:50px;
    margin-top:450px;
    text-align:center;
    line-height:50px;
    color:#ddd;
    background-color:#333;
    letter-spacing:1px;
    cursor:pointer;
    text-decoration:none;
    text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
    list-style:none;
    float:left;
    margin-top:-180px;
    width:100%;
    height:110px;
    padding-top:20px;
    background-repeat:no-repeat;
    background-color:transparent;
}
ul.menu > li ul li{
    display:none;
}
ul.menu > li ul.sub1{
    background-image:url(../images/bin/bg1sub.png);
}
ul.menu > li ul.sub2{
    background-image:url(../images/bin/bg2sub.png);
}
ul.menu > li ul.sub3{
    background-image:url(../images/bin/bg3sub.png);
}
ul.menu > li ul li a{
    color:#fff;
    text-decoration:none;
    line-height:30px;
    margin-left:20px;
    text-shadow:1px 1px 1px #444;
    font-size:11px;
}
ul.menu > li ul.sub1 li{
    display:block;
}
ul.menu > li ul li a:hover{
    border-bottom:1px dotted #fff;


Pagina test
http://www.testpierbin.altervista.org/index-1.html (http://www.testpierbin.altervista.org/index-1.html)
Grazie



Titolo: Re:spiegazione effetto
Inserito da: stesil - 27 Luglio, 2014, 14:10:01
Prego!  :)

Puoi modificare questa parte:

Citazione

ul.menu > li ul{
    list-style:none;
    float:left;
    margin-top:-230px;
    width:100%;
    height:160px;
    padding-top:20px;
    background-repeat:no-repeat;
    background-color:transparent;
}


e tutti e tre i sottomenu avranno la stessa altezza.

Oppure, in alternativa, se vuoi aumentare l'altezza solo del primo menu, aggiungi sempre le stesse regole a questo selettore:

Citazione
ul.menu > li ul.sub1{
    background-image:url(../images/bin/bg1sub.png);
    margin-top:-230px;
    height:160px;   
}

C'è anche una chiusura in più di un </div> prima degli script js da cancellare.
Titolo: Re:spiegazione effetto
Inserito da: PierBin - 27 Luglio, 2014, 20:51:02
Ok bene, grazie spiegazioni sempre precise e corrette,
Mancano solo i collegamenti alle pagine.
Grazie
Titolo: Re:spiegazione effetto
Inserito da: PierBin - 29 Luglio, 2014, 09:10:34
Ho collegato la parola arabescato alla pagina di google, perchè visualizzo nel browser questa dicitura?
www.google.it/?gws_rd=ssl
pagina test
http://www.testpierbin.altervista.org/index-1.html (http://www.testpierbin.altervista.org/index-1.html)
Grazie
Titolo: Re:spiegazione effetto
Inserito da: lemonsong - 29 Luglio, 2014, 09:51:04
Prova a leggere QUI (http://www.ilsoftware.it/articoli.asp?tag=Perche-accanto-all-indirizzo-wwwgoogleit-compare-la-stringa-gws-rd=ssl_11038)

Citazione
Per evitare il redirect automatico, si potrà ovviamente specificare l'utilizzo del protocollo HTTPS in luogo di HTTP.
Titolo: Re:spiegazione effetto
Inserito da: PierBin - 29 Luglio, 2014, 10:48:33
Bene, ho letto, grazie poi ti aggiorno x l' altro discorso
 ;)
Titolo: Re:spiegazione effetto
Inserito da: PierBin - 03 Agosto, 2014, 15:23:14
Problema:
avendo inserito una nuova voce nel menu quest' ultima esce dal riquadro celestino in questo caso la voce lavorati
e' un problema di aumentare le impostazioni del CSS o dell' immagine celestina.
Grazie
http://www.testpierbin.altervista.org/test/index-1.html (http://www.testpierbin.altervista.org/test/index-1.html)
Titolo: Re:spiegazione effetto
Inserito da: lemonsong - 03 Agosto, 2014, 16:01:48
Puoi provare così:

Citazione

ul.menu > li ul.sub1 {
    background-image: url("../images/bin/bg1sub.png");
    background-repeat: repeat-y;
    height: auto;
    margin-top: -250px;
}

In blu da aggiungere/sostituire, in rosso da personalizzare quando aggiungerai/rimuoverai le voci del menu.

L'ho provato solo con Firefox/Firebug
Titolo: Re:spiegazione effetto
Inserito da: PierBin - 03 Agosto, 2014, 17:32:39
Grazie provato e funziona  ;)  dall'altra parte ancora nessuna risposta siamo ..... siamo messi bene.