• K
    Super User •

    immagine di sfondo in link

    Ciao a tutti ho un problema con questo codice :

    
#menu
{
	background-image:url(../img/layout_08.jpg);
	width :100%;
	height:48px;
} a 
{
	text-decoration:none;
} a:hover 
{
	background-image:url(../img/layout_50.jpg);
	text-decoration:underline;
	color:red;
   
	
}

    in pratica quando passo sopra il mouse lo sfondo dovrebbe cambaire e caricare l'immagine layout_50 pero questo non succede,dove potrebbe essere l'errore?

    Inoltre altra piccola curiosita :

    dato che e un menu orizzontale allineato in una lista se scrivo cosi :
    ul li a
    ul li a:hover

    e piu corretto rispetto a sopra ?

    Grazie

    0
  • K
    Super User •

    Ciao Kaisersose 🙂

    Ad occhio così dovrebbe andare bene ma magari il problema è che il path dell'immagine non è corretto.
    Per vedere se l'errore sta solo nel path e non nel codice prova inserendo al posto di background-image un "background-color:#33333" per vedere se un colore rgb te lo inserisce.
    Se te lo mostra allora è il path o il nome della tua immagine altrimenti c'è qualcosa che "ostruisce" l'evento.
    Se mi linki qualcosa vedo di intervenire con una risposta più risolutiva 😄

    Per la seconda domanda ti do il SI
    La differenza nel tuo primo caso è che in quel modo attribuiresti l'evento a tutti i link posti dentro il genitore #menu mentre in quel modo precisi che si riferisce solo a quelli contenuti nella tua lista. Quindi come dici tu va benissimo 🙂

    0
  • K
    Super User •

    ciao karedas,
    grazie per le precisazioni, ho gia impsotato il colore di sfondo lo faccio sempre im caso le immagini siano disabilitate e funziona perfettamente e l o stesso errore lo ricevo quando cerco di impostare l'immagine di sfondo anche a un campo fieldset sempre con i css. Il path e giusto perche nel div #menu ho impostato una immagine di sfondo e funziona, poi nei link ,interni al div menu, non va.
    ti posto il codice css completo della pagina:

    

body {
background-image: url(../img/sfondo.gif);
background-color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:white;
font-size: 0.9em;

}
a:visited
{
	color:#333333;
}
#wrap 
{
	
    margin-left:200px;
	margin-right:150px;
    background-color:#000000;
	width:810px;
	height:100%;
}
{
	background-image:url(../img/layout_08.jpg);
	width :100%;
	height:48px;
} a 
{

	text-decoration:none;
} a:hover 
{
	background-image:url(../img/layout_50.jpg);
	text-decoration:underline;
	color:red;
   
	
}
 ul
{
 list-style:none;
 display:block;	
}
.menu
{
	font-family:georgia;
		font-size:1.1em;
	float:left;
    margin-right:15px;
	padding-top:8px;
}

#content
{
	position:relative;
	background-color:black;
	clear: both;
}

#testo img 
{
	border-style:dashed;
	border-width:1px;
	border-color:white;
	padding:3px;
    float:left;
	margin:5px;
}
{
	position:relative;
	float:left;
	width:65%;
    margin:10px;
	text-align:justify;
	padding:5px;
	
}
#prenotazioni
{
	position:relative;
	float:left;
	width:25%;
    margin:10px;
	padding:10px;
	background-color:#282828;
}
#ora
{
	float:left;
}
#spacer
{
	position:absolute;
	clear:both;
}
#gallery
{
	position:relative;
	margin:10px;
	clear:both;

}
#footer
{ 
    position:relative;
	clear:both;
	height:48px;
	background-color:#000000;
	margin:0px 5px 0px 0px;
	background-image:url(../img/layout_41.jpg);
	
}
.titolo
{
	width:80%;
	color:red;
	background-color:yellow;
}
fieldset
{
   
    border:dotted;
	border-color:#363;
    border-width:1px;
	}

    Il css che lo riguarda e : a:hover dove nn cambia.
    ai link applico la class menu , forse credo che il problema sia proprio in questo. In caso carico la pagina su qualche ftp e posto il link.

    grazie

    0
  • K
    Super User •

    Mhh si sarebbe meglio tu la inserisca sull'ftp attualmente non riesco a riscontrare il problema senza vederlo a video 😞

    0
  • K
    Super User •

    www. antoniofullone.it/dolcevita/index.html

    il menu e quello in alto da lip uoi guardare sia il codice html che il foglio di stile.
    grazie

    🙂

    0
  • K
    Super User •

    Ok notato il problema 🙂

    All'hover c'è un background con immagine "layout_50.jpg".
    L'immagine layout_50.jpg , a differenza delle altre, non viene trovata. Potrebbe non esistere, potrebbe non essere quello il path giusto oppure non si chiama in quel modo (controlla le maiuscole io ho fatto tentativi ma non sono riuscito a "beccarla" 😄 ).

    Inoltre togli la **class="menu" **ai tuoi link e scrivi solamente:

    *.menu a:hover{}

    *Dovrebbe bastare.Oppure potresti anche ovviare al problema scrivendo in questo modo il tuo attributo:

    *.menu a:hover{
    background: url("path/immagine.tipo") !important;
    }

    *Ciao!

    0
  • K
    Super User •

    Ciao karedas, grazie sono prorio un pollo!!!
    ero straconvinto di avere esportato l'immagine come jpg mentre in realta era una gif!!!

    Ho tolto anche la classe menu che in effetti e inutile.
    🙂

    Ora una ultima curiosita, come puoi vedere ora funziona pero il link non prende tutto lo spazio, in pratica asolo la parte superiore mentre io vorrei coprire tutto lo spazio occupato dal div menu.

    sicuramente ho sbagliato qualcosa nell'usare la proprieta display, ma quale?

    Ancora grazie.
    🙂

    0
  • K
    Super User •

    Allora , c'è qualche errore nel layout. 🙂

    Partiamo dal principio e in particolare quanto riguarda il tuo problema del menù.

    Aggiungi questi valori:
    [HTML]
    .menu{
    ...
    margin:0;
    padding:0;
    }
    .menu , .menu *{
    height:100%;
    float:left;
    }
    .menu a{
    ...
    display:block;
    }
    [/HTML]

    così dovrebbe andare penso di non aver dimenticato niente.
    Togli la proprietà display:block; agli identificatori e aggiungila solo ai link come ti ho scritto poco sopra.

    Ho dei dubbi però perchè non capisco come mai tu abbia usato uno span vuoto contenente un'immagine al lato sinistro del menù.
    Se era per creare uno spazio laterale modifica la proprietà padding a .menu e da padding:0; metti:
    padding:0 0 0 **npx;

    **Dove **npx **sta per la dimensione del padding sinistro.

    Inoltre ci sono molti errori XHTML.
    Per risolvere questo problema sia monitoraggio layout e xhtml ti consiglio di scaricare le due risorse free:
    *Firebug *e Html Validator per Firefox.
    Strumenti essenziali e soprattutto di una certa utilità.

    ciao!

    0
  • K
    Super User •

    Grazie ora sono al lavoro dopo a casa provo.

    gli errori li so ma nn mene importa molto validare il codice non e una necessita.
    🙂

    provo dopo se ho problemi posto.
    grazie

    0
  • K
    Super User •

    ciao karedas prima ho scritto in modo veloce ora sono in pausa pranzo,possoo spiegarmi meglio.
    🙂

    Quell'immagine a sinistra fa parte del layout non potevo metterla ocme immagine di sfondo perche se guardi bene si collega con l'immagine nel logo, si tratta di un layout in photoshop che il cliente preferisce cosi, ecco perche nn mi interessa molto validare il codice.
    ora qua nn ho i file su cui lavorare, pero provo appena arrivato a casa e ti faccio sapere, il fatto e che i link li voglio accentrare per questo nel selettore menu a ho messo
    padding-top:8px;
    per far si che i link siano centrati rispetto al menu l'immagine inserendola senza lo span scende sotto, ecco il perche purtroppo sto layout esportao con photoshop mi ha creato un bel po di rogne ma d'altronte i llciente l ovuole cosi io hsto cercando di cambaire le tabelle in div.
    Cmq grazie per l'aiuto dopo a casa faccio le prove e ti faccio sapere.
    😄

    0
Effettua l'accesso per rispondere