WebSite X5Help Center

 
Alex D.
Alex D.
User

Logo nell'intestazione  it

Autor: Alex D.
Visitado 1884, Seguidores 3, Compartilhado 0  

Salve a tutti, ho una domanda riguardo il logo da mettere in intestazione.

Nel mio sito di esempio (http://alexdrugo.altervista.org) ho posizionato un logo ovale sia a destra che a sinistra del menu. Ora, vorrei che quello a sinistra potesse sconfinare ed essere visto "sopra" lo sfondo del sito, mentre così in effetti finisce dietro e risulta "tagliato".

Credo sia come nel caso del menu (che ho "rubato" da EsseDi) un problema di z-index, ma dove lo trovo lo z-index del logo? E perchè poi se in Intestazione metto l'immagine in primo piano o in secondo piano non cambia nulla rispetto all'effetto che vorrei avere?

Publicado em
47 RESPOSTAS - 1 ÚTIL
Skeggia 12
Skeggia 12
Moderator

prova con questo css, da un suggerimento di KolAsim...

<style>
#sfondok{
position:absolute;
top:0px;
left:600px;
z-index:100;
width:100%;
height:200px;
background-position: left top;
background-repeat: none;
}
</style><div id="sfondok" >
<img src="http://www.tuosito.it/image.xxx">
</div>


da inserire al passo 1 in tab esperto... personalizzando il i valori in neretto e il nome immagine... ciao

Ler mais
Publicado em de Skeggia 12
Template By Silver™
Template By Silver™
User

scusate la pignoleria ma in questo modo il logo si sposta a dx o sx secondo la dimensione della finastra o risoluzione del monitor con effetto sgradevole e sicuramente non cercato.

inoltre da precisare che la parte css va in head e la parte html nel body.

Ler mais
Publicado em de Template By Silver™
Mi Lux
Mi Lux
User

lo puoi ottenere anche giocando con la grafica e utilizzando l'immagine di sfondo dell'intestazione e quella dell'header, senza utilizzare nessun codice..

Ler mais
Publicado em de Mi Lux
Alex D.
Alex D.
User
Autor

Sto facendo delle prove ma nn riesco ad ottenere nulla di buono... intanto mettendo "background-repeat: repeat-x;" non ripete cmq l'immagine (è un png dallo spessore di 1 px) e poi come faccio a mettere nel body il codice html se in Impostazioni generali c'è solo il codice nella sezione head? Devo inserirlo in ogni pagina del sito? Ma non c'è un altro modo per far sovrapporre un logo o un'immagine allo sfondo?

Ler mais
Publicado em de Alex D.
Template By Silver™
Template By Silver™
User

vedo che hai la v9, per mettere codici nel body usa il campo delle statistiche.

Ler mais
Publicado em de Template By Silver™
Template By Silver™
Template By Silver™
User

metti in modifica del modello, intestazione, con strumento html

<div id="logo"><img src="files/logo.png"></a></div>

allega il logo da un qualunque oggetto html

metti al passo 1 esperto in head questo js

<script type="text/javascript">
$(document).ready(function(){
$('div#imHeader div:has(#logo)').css({
'top':'18px',
'left':'20px',
'z-index':'10001'});
});
</script>

personalizza i valori, se serve come nel tuo caso anche negativi.

Ler mais
Publicado em de Template By Silver™
 lemonsong  
 lemonsong  
User

Sicuramente avrò capito male ma non è sufficiente inserire il tag img nell'oggetto HTML dell'header/intestazione:

<img src="files/logo.png" alt="" />

... e spostarlo a sx quanto basta?

Non ho la 9 per provare ma con la 8 funziona.

Sempre se ho capito bene eh...

P.S.

Se abbiamo un id o classe è sufficiente inserirli come selettore: has è superfluo.

_______ oltre il 5° step ________

http://www.unofficialwsx5.com

Ler mais
Publicado em de  lemonsong  
Skeggia 12
Skeggia 12
Moderator
Template By Silver™
metti in modifica del modello, intestazione, con strumento html <div id="logo"><img src="files/logo.png"></a></div> allega il logo da un qualunque oggetto html metti al passo 1 esperto in head questo js <script type="text/javascript"> $(document).ready(function(){ $('div#imHeader div:has(#logo)').css({ 'top':'18px', 'left':'20px', 'z-index':'10001'}); }); </script> personalizza i valori, se serve come nel tuo caso anche negativi.

chiedo scusa, io cerco di apprendere sempre, ma questa soluzione non somiglia al div custom di KolAsim ma in versione js? Sempre uno spostamento manuale bisogna dare o sbaglio? E ridimensionando la finestra si sposta comunque? Lo so che i div non vanno in head . . . anche mettendo il css solo in head e il div in intestazione, si ottiene quello che chiede Alex (immagine fuori dall'intestazione sulla destra... o sulla sinistra, aggiungeno un div custom anche per la sinistra "#sfondoy" e relativo div y..... ma forse mi sbaglio...

Ler mais
Publicado em de Skeggia 12
Template By Silver™
Template By Silver™
User

senza js il logo non esce dall'intestazione, fai le prove, hai tutte le versioni.

Ler mais
Publicado em de Template By Silver™
Template By Silver™
Template By Silver™
User

il cosiddetto div custom poi non è ne di kolasim ne di icm, è un banalissimo div figlio di html, non ha altre paternità.

Ler mais
Publicado em de Template By Silver™
Skeggia 12
Skeggia 12
Moderator

ciao silver: ti allego lo screenshot di quanto succede in ws10pro con il div custom di Kolasim per l'immagine spostata tutta a destra con css in head e div in intestazione...(senza js)...

P.S. - lo stesso div custom l'ho usato sul sito test di v10pro per inserire una slide a tutto schermo

http.//www.skeggia12.it/test/v10pro

Ler mais
Publicado em de Skeggia 12
Alex D.
Alex D.
User
Autor

Allora, grazie sempre per le risposte, con i div e i css nn sono riuscito a risolvere, col metodo di lemonsong quasi, utilizzando un oggetto html riesco a spostarmi a sinistra ma in basso il logo finisce sotto il corpo del sito (vedere screenshot). Allora si torna allo z-index che però come lo assegno all'oggetto html?

Ler mais
Publicado em de Alex D.
Pasqualino D.
Pasqualino D.
User

Ciao Alex.. per fare quel lavoro, devi semplicmente creare tu il template in modo da fare tutte le modifiche che vui... dai un'occhiata www.torinocuore.it oppure www.oltreituoisogni.it

Spero di esserti stato utile 

Ler mais
Publicado em de Pasqualino D.
Skeggia 12
Skeggia 12
Moderator

@silver: vabbè mi arrendo, non ne azzecco una . . . ma quell'una funziona . . . dovrò imaparare ancora molto...

@P. Della Torre: secondo me non è corretto quello che affermi, in questo caso, lo screenshot allegato sopra è tratto da un modello predefinito, come puoi vedere . . .

Ler mais
Publicado em de Skeggia 12
Template By Silver™
Template By Silver™
User
Alex D.
Allora, grazie sempre per le risposte, con i div e i css nn sono riuscito a risolvere, col metodo di lemonsong quasi, utilizzando un oggetto html riesco a spostarmi a sinistra ma in basso il logo finisce sotto il corpo del sito (vedere screenshot). Allora si torna allo z-index che però come lo assegno all'oggetto html?

è per quello che il js che ho suggerito ti facilita la vita 

Ler mais
Publicado em de Template By Silver™
Template By Silver™
Template By Silver™
User
Skeggia 12
@silver: vabbè mi arrendo, non ne azzecco una . . . ma quell'una funziona . . . dovrò imaparare ancora molto...

non ho capito a cosa ti riferisci...

Ler mais
Publicado em de Template By Silver™
Skeggia 12
Skeggia 12
Moderator

mi riferisco che puntualizzi che il div custom non è di kol o di icm; mica ho detto che sono di loro proprietà ma semplicemente che Kol, che ne sa più di me, lo consiglia sempre per risolvere alcuni problemi, come quelli di questo post, a niente altro, e al fatto che quel div funzioni egregiamente nel caso in questione anche senza js e che tu dici non essere possibile senza js (la domanda iniziale era un logo fuori dall'intestazione a sinistra o a destra) come dimostrato dallo screenshot...tutto qui...

Ler mais
Publicado em de Skeggia 12
Alex D.
Alex D.
User
Autor

@P. della Torre: scusa nn ho capito, io ho creato un modello personalizzato al passo 1 - Impostazioni generali, e da lì in poi ho inserito nell'intestazione i loghi e il menu personalizzato in html e nel piè di pagina 3 img di rollover. Quello che non riesco a fare tramite ws x5 è sovrapporre il logo a parte del corpo centrale...

Ler mais
Publicado em de Alex D.
Template By Silver™
Template By Silver™
User
Skeggia 12
mi riferisco che puntualizzi che il div custom non è di kol o di icm; mica ho detto che sono di loro proprietà ma semplicemente che Kol, che ne sa più di me, lo consiglia sempre per risolvere alcuni problemi, come quelli di questo post, a niente altro, e al fatto che quel div funzioni egregiamente nel caso in questione anche senza js e che tu dici non essere possibile senza js (la domanda iniziale era un logo fuori dall'intestazione a sinistra o a destra) come dimostrato dallo screenshot...tutto qui...

secondo me ve la tirate un po' troppo...va bè fate come volete, per una volta che avevo il tempo di aiutare..ma vedo che vi da fastidio...

comunque la tua slide a tutto schermo non mi pare proprio indovinata

Ler mais
Publicado em de Template By Silver™
Template By Silver™
Template By Silver™
User
Alex D.
@P. della Torre: scusa nn ho capito, io ho creato un modello personalizzato al passo 1 - Impostazioni generali, e da lì in poi ho inserito nell'intestazione i loghi e il menu personalizzato in html e nel piè di pagina 3 img di rollover. Quello che non riesco a fare tramite ws x5 è sovrapporre il logo a parte del corpo centrale...

ma hai letto quello che ti ho suggerito io??

Ler mais
Publicado em de Template By Silver™
Skeggia 12
Skeggia 12
Moderator

Alex, se copi esattamente il css che ti ho postato (che ha anche parametri superflui a questa esigenza, ma ininfluenti), e come anche suggerito da silver, per avere un codice corretto, la parte:

<div id="sfondok"><img src="http://www.nomesito.it/nomeimg.ext></div>

in intestazione, che posizionerai a mano al di fuori dell'intestazione a sinistra, ti verrà sovrapposta...

Ler mais
Publicado em de Skeggia 12
Skeggia 12
Skeggia 12
Moderator

la chiudo qui silver, dire a me che me la tiro... quando preciso sempre che ho molto da imparare... strano che la slide non funzioni a te (chrome?, a me su tutti i browser si, comunque...)

ciao

Ler mais
Publicado em de Skeggia 12
Template By Silver™
Template By Silver™
User
Skeggia 12
la chiudo qui silver, dire a me che me la tiro... quando preciso sempre che ho molto da imparare... ciao

certo, abbiamo tutti da imparare,

la chiudo anche io che devo andare a cena, 

non ho detto comunque che è impossibile, non sono stato esplicito probabilmente, ma intendevo che col js di prima si risolve questa e anche altre situazioni, come per esempio quella venuta fuori dopo della sovraesposizione, strade ce ne sono sempre piu di una.

Ler mais
Publicado em de Template By Silver™
Alex D.
Alex D.
User
Autor

@ Silver: ho letto il tuo suggerimento ma ti dico la verità non ho ancora provato, perchè con js non sono per niente pratico e cercavo di capire il metodo prima... cmq proverò grazie!

@ Mi Lux: hai messo il logo sia a dx che a sx in un oggetto html giusto? Ho fatto pure io così e va bene per spostarsi più a sinistra o a destra dei "confini" dell'intestazione, ma sotto non funziona... cioè ho provato a spostare l'oggetto più in basso e il risultato è che viene in parte coperto dal corpo:

http://alexdrugo.altervista.org/index.html

Ler mais
Publicado em de Alex D.
Mirko Boschetti
Mirko Boschetti
Moderator

Io penso, che Milux ti abbia mostrato quello che aveva scritto nel Post nr.4....ma forse mi sbaglio io....

Ler mais
Publicado em de Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

Metti questo come sfondo intestazione...

....è solo una prova...

Ler mais
Publicado em de Mirko Boschetti
 lemonsong  
 lemonsong  
User

Vedo che avete scritto un trattato

Alex D.
col metodo di lemonsong quasi, utilizzando un oggetto html riesco a spostarmi a sinistra ma in basso il logo finisce sotto il corpo del sito (vedere screenshot). Allora si torna allo z-index che però come lo assegno all'oggetto html?

Continuando (io) a non capire, è sufficiente (forse) che "inserisci" l'immagine in un div:

<div style="z-index:10;"><img src="files/logo.png" alt="" /></div>

Aumenta z-index, eventualmente.

Vado sempre alla cieca eh, non sparatemi

_______ oltre il 5° step ________

http://www.unofficialwsx5.com

Ler mais
Publicado em de  lemonsong  
Alex D.
Alex D.
User
Autor

Un attimo, a me non serve uno sfondo fisso ma la possibilità di spostare gli oggetti nel sito, ad esempio il logo che ho fatto in realtà doveva essere un albero con le radici, volevo farlo in png (per lasciare la trasparenza) in modo tale che le radici potessero "cadere" anche nel corpo della pagina.

Ler mais
Publicado em de Alex D.
Template By Silver™
Template By Silver™
User
 lemonsong  
Vedo che avete scritto un trattato Alex D. col metodo di lemonsong quasi, utilizzando un oggetto html riesco a spostarmi a sinistra ma in basso il logo finisce sotto il corpo del sito (vedere screenshot). Allora si torna allo z-index che però come lo assegno all'oggetto html? Continuando (io) a non capire, è sufficiente (forse) che "inserisci" l'immagine in un div: <div style="z-index:10;"><img src="files/logo.png" alt="" /></div> Aumenta z-index, eventualmente. Vado sempre alla cieca eh, non sparatemi _______ oltre il 5° step ________ http://www.unofficialwsx5.com

se metti questo div in intestazione ottieni in parte il risultato, è vero che puoi posizionarlo ai lati ma non piu su o piu giu, ad esempio non sovrasta il menu e neppure il corpo pagina, neppure se alzi z-index a 100000000000000000000

funzionava nella 8 ma dalla 9 non piu

e mi pare che l'avevi fatto notare proprio tu ai tempi in cui uscì la 9 dalle pagine del forum dei professori (oops...mi è sfuggito del sarcasmo...)

Ler mais
Publicado em de Template By Silver™
Alex D.
Alex D.
User
Autor

Ecco Mirko, i tuoi box blu con le scritte fanno al caso mio!

@ lemonsong: non ci avevo pensato a mettere z-index nell'oggetto, dovrebbe funzionare allora!

Si vede che sono poco pratico di codici...

Ler mais
Publicado em de Alex D.
Template By Silver™
Template By Silver™
User
Alex D.
Ecco Mirko, i tuoi box blu con le scritte fanno al caso mio!

che non è quello che avevi chiesto dall'inizio però..

...vorrei che quello a sinistra potesse sconfinare ed essere visto "sopra" lo sfondo del sito, mentre così in effetti finisce dietro e risulta "tagliato"...

Ler mais
Publicado em de Template By Silver™
Alex D.
Alex D.
User
Autor

Eh, scusa ma in quelle pagina il box a destra ad esempio sconfina e si vede "sopra" lo sfondo (quindi andrebbe bene), l'unica cosa è che io vorrei che l'oggetto in questione non fosse fisso come nell'esempio postato da Mirko ma fosse integrato nella grafica del sito.

http://mibo.altervista.org/calcio/divfixed1.html

Ler mais
Publicado em de Alex D.
Alex D.
Alex D.
User
Autor

cmq lo z-index messo nel div non funziona, come scritto giustamente da Silver!

Ler mais
Publicado em de Alex D.
 lemonsong  
 lemonsong  
User

@Silver

Non ricordo la mia "dotta"  nota ma mi fido di te.

La richiesta iniziale mi sembrava fosse diversa da quella sviluppatasi in seguito, comunque prova (visto che hai la 9) a scriverlo così:

<div style="z-index:10001; position:absolute;"><img src="files/logo.png" alt="" /></div>

_______ oltre il 5° step ________

http://www.unofficialwsx5.com

Ler mais
Publicado em de  lemonsong  
Alex D.
Alex D.
User
Autor

Ehi, così funziona!

Ler mais
Publicado em de Alex D.
Alex D.
Alex D.
User
Autor

ecco, così mi serviva l'effetto finale:

Ler mais
Publicado em de Alex D.
Mirko Boschetti
Mirko Boschetti
Moderator

L'importante è che ci sei riuscito.....e cosi avrai imparato qualche cosa di nuovo anche tu....

Ler mais
Publicado em de Mirko Boschetti
Template By Silver™
Template By Silver™
User

per fugare ogni dubbio prova a ridimensionare la finestra in larghezza per assicurarti che sia proprio quello che volevi.

Ler mais
Publicado em de Template By Silver™
Alex D.
Alex D.
User
Autor

ok grazie sempre al contributo di tutti!

Ler mais
Publicado em de Alex D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês ESUsuário do mês PT
Alex D.
ecco, così mi serviva l'effetto finale:

ciao, 

... l'importante ormai è l'aver risolto, ...ma, ...avesti potuto risolvere per ottenere l'effetto che hai fatto vedere, da subito, con il primo post di Skeggia, sistemando poce cose ad hoc, per esempio misure, livello e posizione del DIV nel BODY, ...non è altro che il DIV CUSTOM di Icm, che permette di realizzare qualsiasi personalizzazione......

...

ciao, KolAsim

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Skeggia 12
Skeggia 12
Moderator

oh nooo!, ci avevo preso.... dopo 42 post... tank's...

Ler mais
Publicado em de Skeggia 12
 lemonsong  
 lemonsong  
User

Non esiste un modo solo per ottenere un risultato.

Quando si può usare gli strumenti del programma e poco più, è "pratico" ma scrivendo una decina di righe di codice può essere divertente.

Alex D. è stato "coccolato" (40+ post), non oso immaginare il numero di post se si fosse chiamato Alessandra 

Scusate per 'sta cavolata di post...

_______ oltre il 5° step ________

http://www.unofficialwsx5.com

Ler mais
Publicado em de  lemonsong  
Alex D.
Alex D.
User
Autor

Ma infatti! Bisogna considerare che quello che aveva postato skeggia l'avevo provato senza ottenere un buon risultato, ma ovviamente per colpa mia dato che nn sono pratico..... vi ringrazio cmq x la pazienza e se come dice lemonsong con "Alessandra" avrei ottenuto addirittura più risposte, beh.... ce lo faccio un pensierino........

Alla prossima! (tanto ho già un'altro problemino con i video....)

Ler mais
Publicado em de Alex D.
Skeggia 12
Skeggia 12
Moderator

concordo con lemonsong che ci sono vari sistemi per ottenete un risultato... daje alex con il prox post...

Ler mais
Publicado em de Skeggia 12
Mi Lux
Mi Lux
User

non oso pensare quando si registrerà un utente con il nick di Cicciolina...

Ler mais
Publicado em de Mi Lux