Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Problema css rollover menu IE

    Ciao a tutti!
    mi sono iscritto al forum perche mi sto avvicinando solo ora ai CSS e vorrei un aiuto da voi esperti :-) scusate se probabilmente la domanda e stata gia fatta ma devo ancora entrare nelle meccaniche del forum...
    ecco il mio problrma riguarda il menu in alto sotto l'intestazione:
    in pratica seguendo una guida riadattandola un po alle mie esigenze ho creato il menu tramite immagine di sfondo dentro un DIV e altre immagini che si visualizzano con il comando "hover" in determinate posizioni: ecco la pagina:

    www.gf-shop.it

    ho provato in tutti i browser firefox, crome, opera e tutto funziona come dovrebbe...
    solo su internet explorer mi si presenta il seguente problema: le immagini richiamate nello stato Hover non sono perfettamante allineate con lo sfondo ma mi si presentano spostate di vari px in su
    sapete aiutarmi grazie mille!

  2. #2
    Su I.E.8, il mio almeno , tutto sembra filare liscio
    «Se non vi è rimasta molta anima e lo sapete, vi resta ancora dell'anima.»
    Occhio all' Ursupanaru!

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2008
    Messaggi
    142
    tutto sembra corretto, anche se per creare un menu potresti aggire in maniera diversa... e molto più semplice...

    nell'html inserisci questo codice:
    codice:
    <div id="mmenu">
    
    <ul class="menu">
    
    <li  id="bottone1">
     chi siamo 
    
    
    <li  id="bottone2">
     inserzioni 
    
    
    <li  id="bottone3">
     feedback 
    
    
    <li  id="bottone4">
     garanzie 
    
    
    <li  id="bottone5">
     negozi 
    
    [/list]
    
    </div>
    le differenze sostanziali tra qesto ed il tuo script sono: l'inserimento di una lista vera e propria, invece dell'inserimento di tanti link, poi non sono mischiate le isruzioni css con il codice html, creando ordine, in oltre se vuoi un consiglio, non scrivere il css tra i tag <style></style> nell'head della pagina come hai fatto tu, crea confusione, crea più tost un'altro file (es. "template.css") da richiamare nell'head della pagina html con il codice:

    codice:
    <link href="template.css" rel="stylesheet" type="text/css" />
    nel file css poi richiamerai le classi gli id e gli elementi della ta pagina, come se stessi scrivendo nell'head.

    infatti il codice css del menù che ti ho proposto sarà:
    codice:
    /* diamo lo sfondo al div mmenu e formattiamolo */
    #mmenu {
    background-image:url(../images/sfondomenu.jpg);
    background-repeat:no-repeat;
    width: 883px; 
    height: 38px;
    }
    
    /* richiamiamo la classe menu associata all'elemento ul */
    #mmenu ul.menu{
    list-style:none;
    margin:0; padding:0;
    } 
    
    /* "formattiamo" gli elementi li */
    #mmenu .menu li {
    display:inline;
    } 
    
    /* diamo la formattazione generica degli elementi a all'interno dei li */
    #mmenu .menu a {
    width: 97px;
    height: 38px;
    display: block;
    text-indent: -9998px;
    float: left;
    }
    
    /* diamo lo sfondo specifico per ogni id a */
    
    #bottone1 a {
    background: Background url('images/Template-Inserzioni-slice_03.png') no-repeat;
    background-position:top;
    }
    
    #bottone2 a {
    background: Background url('images/Template-Inserzioni-slice_04.png') no-repeat;
    background-position:top;
    }
    
    #bottone3 a {
    background: Background url('images/Template-Inserzioni-slice_05.png') no-repeat;
    background-position:top;
    }
    
    #bottone4 a {
    background: Background url('images/Template-Inserzioni-slice_06.png') no-repeat;
    background-position:top;
    }
    
    #bottone5 a {
    background: Background url('images/Template-Inserzioni-slice_07.png') no-repeat;
    background-position:top;
    }
    
    /* diamo le istruzioni per l'evento hover */
    #mmenu .menu a:hover {
    background-position:bottom;
    }
    ora, non esiste fare un menù con un immagine di sfondo che comprenda i bottoni...
    le tue immagini quindi per il metodo che ti ho illustrato io dovranno essere:

    per ogni pulsante

    per lo sfondo del menu...

    comunque studia bene le guida ai css che c'è sul sito... http://css.html.it/
    e io al tuo posto mi darei anche una rinfrescata di html http://xhtml.html.it/

  4. #4

    Grazie

    Grazie molto gentili e veloci per le risposte! quello che mi hai segnalato è un ottimo metodo,
    mi sa che mi mettero a lavoro seguendo il tuo esempio, prima pero devo studiare un po come mi hai consigliato! avevo pensato pero di tenere il css insieme alla pagina, perche non so se ebay legge i fogli di stile esterni, (visto che questo sarebbe un template per inserzioni) anzi qualcuno mi aveva detto di no! voi ne sapete qualcosa a riguardo? ineffetti utilizzando un foglio esterno tutto sarebbe piu ordinato... PS quella che mi hai consigliato si chiama tecnica del "css sprite" giusto? gli stavo giusto dando un 'occhiata in questi giorni...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.