Logo nell'intestazione
Autore: Alex D.
Visite 1867,
Followers 3,
Condiviso 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?
Postato il
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
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.
lo puoi ottenere anche giocando con la grafica e utilizzando l'immagine di sfondo dell'intestazione e quella dell'header, senza utilizzare nessun codice..
Autore
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?
vedo che hai la v9, per mettere codici nel body usa il campo delle statistiche.
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.
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
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...
senza js il logo non esce dall'intestazione, fai le prove, hai tutte le versioni.
il cosiddetto div custom poi non è ne di kolasim ne di icm, è un banalissimo div figlio di html, non ha altre paternità.
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
Autore
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?
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
@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 . . .
è per quello che il js che ho suggerito ti facilita la vita
non ho capito a cosa ti riferisci...
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...
Autore
@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...
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
ma hai letto quello che ti ho suggerito io??
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...
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
versione 9 con modello personalizzato : http://i40.tinypic.com/bfmlpu.jpg
è questo che volevi?
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.
Autore
@ 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
Io penso, che Milux ti abbia mostrato quello che aveva scritto nel Post nr.4....ma forse mi sbaglio io....
Metti questo come sfondo intestazione...
....è solo una prova...
Vedo che avete scritto un trattato
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
Autore
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.
Una cosa cosi circa...utilizzando immagini semitrasparenti, ovviamente...
http://mibo.altervista.org/calcio/divfixed1.html
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...)
Autore
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...
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"...
Autore
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
Autore
cmq lo z-index messo nel div non funziona, come scritto giustamente da Silver!
@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
Autore
Ehi, così funziona!
Autore
ecco, così mi serviva l'effetto finale:
L'importante è che ci sei riuscito.....e cosi avrai imparato qualche cosa di nuovo anche tu....
per fugare ogni dubbio prova a ridimensionare la finestra in larghezza per assicurarti che sia proprio quello che volevi.
Autore
ok grazie sempre al contributo di tutti!
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
oh nooo!, ci avevo preso.... dopo 42 post... tank's...
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
Autore
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....)
concordo con lemonsong che ci sono vari sistemi per ottenete un risultato... daje alex con il prox post...
non oso pensare quando si registrerà un utente con il nick di Cicciolina...