Barra menu e barra Intestazione larghe a tutto schermo
Autor: Fabrizio R.
Besucht 2759,
Followers 4,
Geteilt 0
Ragazzi sapete il codice per rendere la barra menu larga tutto lo schermo?
sul mio sito http://www.eurcoffee.it ho impostato dei codici per il menu ecc.
pero' vorrei la barra colorata del menu che occupi tutto lo schermo tipo famoso codice width:100% pero' non so' come aggire :( e come inserirlo visto gia' ho inserito il codice per mettere il menu cosi come e' imposto sul sito ...Grazie sempre a chi mi aiutera' :)
Gepostet am
La cosa più semplice sarebbe che lo spazio con sfondo nero del menù sia quello dello sfondo del top, in parole povere aggiungi una strscia nera all'immagine del top.
Ciao
Poi visto che ci siamo farei uno sfondo con il colore che ti piace lasciando la base di colore nero, altezza a tuo piacimento ì, bastano pochi px di larghezza ma con lunghezza almeno 4000 px, lo imposti con web site selezionando allineamento alla base.
Vedi questo esenìmpio: http://www.motoramabike.it
Marzio
Autor
hai il codice? come la creo?
Autor
aa forse ho capito devo fare sfondo intestazione colore nero di 4000px che si nasconde dietro l immagine intesazione
Autor
dove seleziono allinamento alla base?
Impostazioni Generali
Stile del modello
Sfondo pagina
Ripeti in orizzontale (2)
Allineamento basso (8)
aa forse ho capito devo fare sfondo intestazione colore nero di 4000px che si nasconde dietro l immagine intesazione
NON mi sono spiegato bene: per il top basta inserire una striscia nera alta come il tuo menù, lo spazio dedicato al menù lo lasci trasparente così prende il colore del top, prestare attenzione che tale spazio sia compreso nello sfondo intestazione.
Per quanto riguarda la base inserisci uno sfondo: come da descrizione sopra di ALTEZZA almeno quanto l'altezza della pagina più lunga che hai intenzione di inserire o altra strada tieni fisso lo sfondo del sito.
Esempio creo uno sfondo con larghezza 5/8 px e con altezza 4000 px avendo cura di creare una porzione, che finirà alla base del sito, del colore desiderato, è più facile farlo che descrivere i passi...... Ovviamente poi avrò cura di rendere trasparente il Piè di pagina
Prova varie opzioni seguendo l'esempio che ti ho inserito al primo post.
Tutto questo con website in vers. 11 pro, non ho preso ancora la vers. 12
Ciao
Autor
quindi poi metto il colore nero e i 4000px lunghezza?
Autor
pero' non viene bene :( ti allego lo screen
Autor
a me serve solo dove sta' il menu come se fosse continuo a destra e sinistra la barra grigia scura :(
...!... non hai avvisato chi ti ha dato i suggerimenti che hai apportato modifiche extra al codice, quindi fuori dalle logiche del programma...!...
... pertanto è di extra che devi continuare per integrazioni extra su modifiche fatte che sai tu, con gli stessi metodi che ti furono sugeriti e di cui dovresti esserne diventato esperto...
... chiudi l'altro argometo, visto che hai risolto...
.
Autor
OK grazie sempre amici :) ogni tanto vi scoccio con aiutini hahahahaha
... visto che hai usato il DIV_CUSTOM nato qui, https://helpcenter.websitex5.com/post/142197 , continua con un altro DIV_CUSTOM, e ad occhio e croce potresti risolvere semplicemente con questa stringa nel TAG STYLE:
#imMnMn {top:-65px} @media(max-width: 1199px) {#SFONDO_MENU{display:none} #imMnMn {top:0px}}
... ed il DIV_CUSTOM da aggiungere al precedente sarà questo:
<div id="SFONDO_MENU" style="position:relative;top:0px;width:100%;height:65px;background-color:black;"> </div>
.
Autor
questo e' x il menu? allungare la barra? direttamente
... ... vedo che non hai ancora provato ...
... come già detto devo vedere quello che fai...
Autor
ho dovuto togliere tutto bhoo all improvviso mi ha sbalzato le misure :( ora sono di nuovo indietro :( KolAsim mo mi devi aiutare hahahah allora ora il sito sta' come prima che la barra menu' non e' lunga tutto lo schermo :( ho tolto tutti i codici anzi ti indico tutti i codici che ci sono: cosi mi aiuti una volta e' sempre sempre hahahah
<style>
#imContent {padding-top: 80px;}
</style>
dopo apertura body?
<div id="SFONDO_FULL" style="position:relative;top:0px;width:100%;z-index:10;">
<img src="http://www.eurcoffee.it/image/co10.jpg" width=100%;>
</div>
poi nell impostazione generale dei codici :
<style>
#imMnMn {
top:0px;
position:absolute;
left:auto;
margin-left:0px;
border-top: 0px;
z-index:10003;
}
</style>
<style>
#imMnMn .hamburger-bar {
background-color:red;
}
</style>
ecco questo e' tutto quello che c'e' :(
... MACCHINE CAFFE' ...adesso va a capo; ...hai cambiato font; ...sei sicuro che deve rimanere così...?...
.
Autor
Dammi un aiuto se blokkato tutto :( guarda il template cosi mi dici i codici per far si che viene tutto a posto barra menu larga tutto lo schermo poi l immagine header full 100% e aggiustare il content page :( helppp
... non mi hai risposto, altrimenti cambierebbero alcune cose ...
e questo:
<p><a href="http://www.eurcoffee.it" ><img src="image/f1.jpg" style="bottom: 700px; left:auto; position: absolute; z-index: 5;" /></a></p>
nel tag head...?
Autor
si
Autor
Poi c e quello del div che sta nel body ora ho tolto quello nell head non so perche masi era bloccato tutto ora sono rimasti solo il div per l immagine ed quello menu per farlo posizionare a piacimento :( mo sto a zero per risolvere la barra menu ecc :(
Autor
Buondi KolAsim spero ci sei oggi
... dopo pranzo andrò a rivedere con calma cosa hai fatto ...
.
mi sembra di vederlo funzionante ora...
Autor
siii tutto bene infatti credo che va bene ho messo a posto tutti i codici ed anche il respansive si vede bene
Autor
Con l'aiuto di KolAsim e' andato tutto buon fine :) Grazie.....
ma la scritta macchine caffè deve stare in riga o su 2 righe...?
a volte lo vedo su una, a volte su 2...
Autor
mi chiedevo solo una cosa, secondo voi possibile inserire una transazione di dissolevanza alle immagini header? qualcuno sa' il codice da inserire? sarebbe bello che compaiono a dissolevanza :) http://www.eurcoffee.it
Autor
riga 1
Autor
non accavalata deve essere una sola riga io lo messa cosi a me si vede cosi
... visto adesso, ottimo, esattamente come ti avevo detto qui: https://helpcenter.websitex5.com/post/142232#12
... tieni presente però che il sito migliore è quello che si sa realizzare con gli strumenti previsti dal programma, senza strafare...
... ringrazio anche Mirko ...che ne ha permesso l'attuazione originale ...
...
...!... per la dissolvenza devi/puoi fare come ti avevo già detto a ferragosto...!...
.
Autor
ovvio grazie anche a Mirko :) ... KolAsim non puoi ridarmi il codice per la dissolevanza? :( non lo ricordo
... i Topic sono ancora lì:
https://helpcenter.websitex5.com/post/126189
https://helpcenter.websitex5.com/post/125103
.
Autor
si ma quello era per il backgroun :( questo e header :( l inpostazione del codice e' diverso :(
...!... ... usa quello che ti ideai in JS e risolverai all'istante...
... copia/incolla solo lo SCRIPT ed ovviamente metti/sostituisci i riferimenti del tuo DIV_CUSTOM, cioè SFONDO_FULL ...prelevandolo direttamente da qui: http://www.zspace.it/kolasim/div_custom/DivCustom_diss_entrata_JS_K.html
.
Autor
non cio' capito molto bene, :8 perche' non so cosa devo sostituire? il dv sfondo full lo in dopo la chiusura del body poi qui c e un file js che deve essere modificato? prima che viene messo nella cartella di esportazione ma non e' che mi puoi dare l istruzione? un fie txt sempre per gentilezza e perfavore ci mancherebbe :)
... copia ed incolla in HEAD: http://www.zspace.it/kolasim/javascript/dissolvenzaK.txt
.
Autor
Sei un grande KolAsim :) , ma voledo avere invece della sfumatura bianca la dissolevanza sarebbe , che parte come se ci fosse sfondo nero.. cosa potrei aggiungere? al codice, non potendo inserire lo sfondo nero perche mi serve bianco quello del templates
... incapsula il DIV in un altro DIV con sfondo nero...
.
<div style="background-color:black;z-index:-1;">
<div id="SFONDO_FULL" style="position:relative;top:0px;width:100%;">
<img src="http://www.eurcoffee.it/image/bg0.jpg" width=100% >
</div></div>
Autor
ottimo , KolAsim invece per farsi che il menu si blokki quando fa l'ancoraggio perche' ho cambiato delle cose mi piace piu' cosi il sito , pero' ovvio quando clicco prodotti e la pagina scala per ancoraggio , il menu scompare su , invece sarebbe bello blokkarsi quando va su, spero hai capito www.eurcoffee.it :) Grazie di cuore...
bel lavoro, complimenti....però il menu hamburger dove è finito ora...?
...riducendo molto si visualizza l'hamburger ... , ma a certe risoluzioni intermedie ci sono dei problemi , sia col menu che non si visualizza sia con certe celle che si troncano ...
molto molto però...
... infatti...!... prima c'era ed ora non più... ... ...e poi il menu c'è ancora ma non si vede, e l'hamburger rosso si vede appunto in finestra ridotta; ...credo che sono stati modificati anche i breakpoint ...
... per quanto riguarda la barra menu fissa io non ho il programma, ma mi sembra! che già abbia tale opzione, ...altrimenti intervenire con qualche codice...
... di più non posso aggiungere... ...
.
Autor
Il template lo posto su 1200px , dove c e l errore della riduzione :( io ho fatto prove su pc su iphone su samsung va bene mo non so che modificare :( se vedete un errore :(
Autor
Forse ho visto scompare la barra menu lunga tutto lo schermo :( ad una certa risoluzione
secondo voi devo mettere il colore al menu? lo tolto nelle impostazioni ho messo trasparente perche' avevo messo il codice di kolAsim che mi dava una barra colorata lunga tutto lo schermo ..pero' togliendo il colore alla barra menu sua di programma forse ad una certa risolusione scompare e quindi non e' che non c'e' il manu...e che la barra aggiunta col codice scompare..ad una certa risoluzione...quindi chi mi aiuta ad risolvere? :)
ho appena fatto una prova con i tuoi codici qui e a me funzia:
http://www.mirboprova.altervista.org/topfull2/
---------------------------------------------------------------
....hai messo Risolto il Post, cosi però nessun'altro può intervenire...
...!... visto che hai modificato e impostazioni iniziali, lascia solo la prima parte del tag stile postato qui: https://helpcenter.websitex5.com/post/142232#12
... cioè soltanto questo: #imMnMn {top:-65px}
Autor
questo nel div menu proprieta' pagina? non ho capito la modifica da fare :(
Autor
quindi tutto va bene, si deve risolvere solo il fatto che ad una certa risoluzione scompare la barra menu inserita col codice , quindi non imposto da programma il colore del menu lo lascio trasparente? pero' non ho capito cosa devo modificare per risolvere la cosa :( ma il menu hamburger va bene?
...!... si parla del tag style...!...
... oppure per chiuderla qui prova ad usare quest'altro:
#imMnMn { position:fixed; top:0px; }
Autor
tolgo questo?
<div id="SFONDO_MENU" style="position:relative;top:0px;width:100%;height:65px;background-color:black;"> </div>
e poi inserisco il colore al menu da programma? :( Help meee
Autor
il menu deve restare sotto l header pero'... cosi non e che lo mette fisso sopra all header? l immagine che e' in width:100% con codice
... rileggi il post linkato prima, il tag style sta in HEAD ...
Autor
la modifica che mi vuoi far fare risolve il problema che, diciamo la barra menu nero non scompare ad una certa risoluzione a finche' poi il barra menu resta senza colore , a me serviva risolvere cio' eppure se ci fosse il codice per fare la funzione che quando scrollo il menu si blokka sopra restando visibile , alla fine sono 2 i casi hahhahah semplici naturalmente :) che io non so' capace di capire :(
Autor
si letto...
Autor
sta' nel passo 4 ...
... per tutto il sito al passo_4 ...
... pagina per pagina in Proprietà della Pagina; ...ma perchè chiedi se l'hai già fatto...?...
Autor
sorry. :( e' che non ho capito per modificare cosa devo fare :(
... in HEAD hai inserito questa stringa:
#imMnMn {top:-45px} @media(max-width: 1199px) {#SFONDO_MENU{display:none} #imMnMn {top:0px}}
... elimiminala e lascia solo:
#imMnMn {top:-45px}
... oppure usa quest'altra:
#imMnMn { position:fixed; top:0px; } ( ... dovrebbe fissarti il menu in alto...)
Autor
grazie di vero cuore.......... :)
Autor
provo ....per vedere se la funzione fosse quella :)
Autor
il sito e' tutto a posto molto carino solo una cosa...per la dissolevanza dell'immagine header al 100% l'effetto non posso metterelo nero sfondo colore perche' se no mi da anche la pagina nera ..non so' perche'..cmq se si puo' risolveres e no fa nulla :)
ora i menu sono centrati, ma stringendo la pagina vanno a dx...?
Autor
come posso modificare? sia il fatto che mai detto che il fatto della transazione dissolevanza colore nero e non bianco?
prova questo al posto del tuo:
#imMnMn {position:fixed; top:0px;left:0;text-align:center; width:100%; z-index: 10;}
Autor
dovrei usare qualche z-index.. ? per il fatto che l'effetto transazione dell'immagine header sfondo e' bianche e non nera... perche' quando imposto color:black...al codice inserito..mi da tutto lo sfondo nero e toglie il bianco che mi serve per visualizzare i contenuti pagina....
un argomento gia' fatto con KolAsim che io ho usato ma..all'improvviso mi da' questo errore... :( poi devo risolvere il fatto del menu che mi ha suggerito Mirko... :( Help me...
Autor
ok mirko provo :)
leggi qui:
https://helpcenter.websitex5.com/post/142232#40
tu hai messo lo sfondo bianco=FFFFFF, invece quello di Kol era nero...se ho capito la domanda...
Autor
credo che questo e' risolto ottimo :) mo c e' il fatto dell' effetto colore dissolevanza immagine header :(
Autor
si ma se lo metto nero mi da tutto nero anche la pagina :(
letto tardi...
Autor
il fatto del menu e' risolto..Mirko ho messo il tuo codice
Autor
mo ho solo il picc. problema dell'effetto colore sfumatura dissolevanza :( se metto black mi da tutto anche la pagina contenuto :(
... non hai chiuso l'incapsulamento, manca: </div>
... VEDI >>>> https://helpcenter.websitex5.com/post/142232#40
.
Autor
hai ragione..... :) ora tutto completo...dai un occhiata se va bene tutto :)
... correggi qui:
<imgsrc="http://www.eurcoffee.it/image/bg10.jpg" width=100%;">
width=100%;"
... deve essere così:
<imgsrc="http://www.eurcoffee.it/image/bg10.jpg" width=100% >
width=100%
.
Autor
Fatto
... OK, ...non si notano altri errori nel codice...
.
Autor
Ho lasciato un post del fatto della posizione menu respansive
... dovrai rivedere un po' tu che hai il programma, rimodulando il tutto ad hoc...
https://helpcenter.websitex5.com/post/142232#31
.
Autor
per il post qui.. https://helpcenter.websitex5.com/post/142593
nessuno aiuta? :)
... non capisco cosa stai cercando di ottenere; ...l'esempio dimostrativo di Mirkopostato prima mi sembra che sia perfetto oltre che innovativo! ...
.
Autor
Per cambiare il colore scritta menu agg. Al menu hamburger lui la messa nera