spiegazione effetto

[PierBin]

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/[/size]
Come si realizza?
Ringrazio anticipatamente

[lemonsong]

Qui trovi il topic:

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

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

[PierBin]

grazie ho scaricato il progetto mo vediamo come integrarlo
 

[PierBin]

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
Grazie

[stesil]

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.

[PierBin]

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
Grazie

[stesil]

Prego! 

Puoi modificare questa parte:

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:

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.

[PierBin]

Ok bene, grazie spiegazioni sempre precise e corrette,
Mancano solo i collegamenti alle pagine.
Grazie

[PierBin]

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
Grazie

[lemonsong]

Prova a leggere QUI

Per evitare il redirect automatico, si potrà ovviamente specificare l'utilizzo del protocollo HTTPS in luogo di HTTP.

[PierBin]

Bene, ho letto, grazie poi ti aggiorno x l' altro discorso
 

[PierBin]

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

[lemonsong]

Puoi provare così:

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

[PierBin]

Grazie provato e funziona    dall'altra parte ancora nessuna risposta siamo ..... siamo messi bene.