Problema con visualizzazione file png

**Mantax.net** · 20-12-2010, 12:52

Ciao a tutti. Ho un problema con una template grafica.
Non riesco a far apparire questo elemento grafico: [/CODE]

In allegato il campo modulo SEARCH nel quale dovrebbe apparire.

Di seguito la porzione di codice CSS relativa all'elemento grafico:

codice:

.search .button {
	float:left;
	text-indent:-9999;
	color:#280000;
	border:none;
	height:24px;
	width:31px;
	font-size:0;
	line-height:0;
	padding:0;
	background: transparent url(../images/search_btn.png) no-repeat top left;
}

.search .button:hover {
	color:#280000;
	background: transparent url(../images/search_btn.png) no-repeat top left;
}

Qualcuno sicuramente più ferrato di me in CSS riesce a capire se qualche proprietà è errata o mancante??

GRAZIE MILLE

**Prill** · 20-12-2010, 14:10

Ciao Mantax.net, sicuro che non si tratti di problema di percorso dell'immagine di sfondo?
(per inciso, specifica un'unità di misura dopo il valore del text-indent)

**Mantax.net** · 20-12-2010, 17:35

Ho provato a modificare sia quel valore, che altri ma niente... non appare

Nel dubbio ho temporaneamente eliminato (in realtà solo rinominato) tutti gli altri elementi visivi attorno al pulsante, supponendo che vi fosse un problema di ordine si sovrapposizione... ma niente ....

**Mich_** · 20-12-2010, 18:03

Dovresti anche dire:
1. che tipo di elemento e` quello che ha class="button" (meglio se posti il codice HTML)
2. in quali browser hai testato
3. quale DTD utilizzi nella pagina

**Mantax.net** · 20-12-2010, 18:46

Allora speriamo di aver estratto per voi le parti corrette di codice

...

[list=1] 1. Codice completo del #search nel file CSS:[/list=1]

codice:

#search {
	float:right;
	width:211px;
	height:24px;
	padding:0 6px 0 0;
}

.search {
	float:left;
	height:24px;
	width:201px;
	padding:0 0 0 10px;
	background: transparent url(../images/inputbox.png) no-repeat top left;
}

.search .inputbox {
	float:left;
	border: none;
	color: #7fa16d;
	font-size:11px;
	line-height:17px;
	height:19px;
	width:164px;
	padding:2px 6px 3px 0;
	background:none;
}

.search .button {
	float:left;
	text-indent:-9999;
	color:#280000;
	border:none;
	height:24px;
	width:31px;
	font-size:0;
	line-height:0;
	padding:0;
	background: transparent url(../images/search_btn.png) no-repeat top left;
}

.search .button:hover {
	color:#280000;
	background: transparent url(../images/images/search_btn.png) no-repeat top left;
}

2. DTD pagina:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

3. Classe modulo search (presumo!)

codice:

<body id="page_bg">
	<div id="bg">
		<div id="t_menu_bg">
			<div id="search"><jdoc:include type="modules" name="user4" /></div>
			<div class="clr"></div> 
			<div id="pillmenu">
			<?php if($mtype != "module") :
				echo $mainnav;
				else: ?>
				<jdoc:include type="modules" name="user3" />
			<?php endif; ?>
			</div>
		</div>
		<div id="header">
			<div class="logo"><h1><?php echo $mainframe->getCfg('sitename') ;?></h1></div>			
		</div>

4. Testato con Mozzila firefox, sia in locale che su server remoto...

**Mich_** · 21-12-2010, 09:21

Ho chiesto il codice HTML, non il sorgente lato server.

Probabilmente il punto evidenziato e` quello giusto, ma serve il codice HTML, altrimenti non sappiamo cosa viene formattato.
Devi andare nella pagina caricata nel browser, visualizzare il sorgente, individuare il pezzo interessato e postare quello.

**Mantax.net** · 21-12-2010, 11:09

Opss. chiedo venia

... eccolo nella prima parte di codice, essendo il modulo "cerca" nella testata della home page. Per dovere di cronaca, collegamenti e percorsi li ho verificati e sono corretti...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-it" lang="it-it" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="Site keywords" />
  <meta name="description" content="Site description" />
  <meta name="generator" content="Open Source" />
  <title>Titolo sito</title>
  <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />

  <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/templates/j15-166/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/j15-166/css/template.css" type="text/css" />
</head>

<body id="page_bg">
	<div id="bg">

		<div id="t_menu_bg">
			<div id="search"><form action="index.php" method="post">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Cerca" class="inputbox" type="text" size="20" value="cerca..."  onblur="if(this.value=='') this.value='cerca...';" onfocus="if(this.value=='cerca...') this.value='';" />	</div>
	<input type="hidden" name="task"   value="search" />
	<input type="hidden" name="option" value="com_search" />
	<input type="hidden" name="Itemid" value="1" />
</form></div>

**Mich_** · 21-12-2010, 11:28

Anzitutto riformatto il codice, in modo da renderlo piu` umanamente leggibile.

codice:

<div id="search">
  <form action="index.php" method="post">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" type="text"
			maxlength="20" alt="Cerca" class="inputbox"  size="20" value="cerca..."
 			onblur="if(this.value=='') this.value='cerca...';" onfocus="if(this.value=='cerca...') this.value='';" />	
	</div>
	<input type="hidden" name="task"   value="search" />
	<input type="hidden" name="option" value="com_search" />
	<input type="hidden" name="Itemid" value="1" />
  </form>
</div>

Anzitutto noto che usi nomi uguali per oggetti diversi. Anche se la sintassi lo permette (entro certi limiti), la cosa non e` saggia ne` salutare, per possibili confusioni da parte del programmatore e anche da parte di modificatori esterni all'HTML (es. Javascript). Esempi di nomi uguali: id="search" - class="search" / name="option" - <option>
E noto anche che manca un elemento per inviare il form, che quindi va inviato premendo il tasto "return/enter/invio" sulla tastiera (non e` saggio, dato che non tutti i browser hanno la tastiera collegata).

E torniamo alla domanda originale:

Non riesco a far apparire questo elemento grafico:

relativo all'elmento identificato con selettore:
.search .button {

Noto che non esiste nessun oggetto con class="option" all'interno dell'elemento con class="search".
Quindi quel selettore non serve in quella pagina (o per lo meno in quel pezzetto di codice).

**Mantax.net** · 21-12-2010, 13:34

Ho risolto il problema! Tutta colpa di un back-end amministrativo della template grafica di cui assolutamente ignoravo l'esistenza... Ecco ora come appare l'html:

codice:

<div id="search">
	<form action="index.php" method="post">
		<div class="search">
			<input name="searchword" id="mod_search_searchword" maxlength="20"
alt="Cerca" class="inputbox" type="text" size="20" value="cerca..."  onblur="if(this.value=='')
this.value='cerca...';" onfocus="if(this.value=='cerca...') this.value='';" />
<input type="image" value="Cerca" class="button" src="/images/M_images/searchButton.png" 
onclick="this.form.searchword.focus();"/>	
</div>

	<input type="hidden" name="task"   value="search" />
	<input type="hidden" name="option" value="com_search" />
	<input type="hidden" name="Itemid" value="1" />
</form></div>

Ad ogni modo grazie infinite a Mich_ , tra l'altro concittadino

Discussione: Problema con visualizzazione file png

Strumenti discussione

Ricerca discussione

Visualizza

Problema con visualizzazione file png

Permessi di invio