Link a immagine del template

[poastro]

Salve ragazzi,

avrei bisogno di mettere un link ad un'altro sito (con rispettiva frase quando ci si passa sopra con il mouse) solo per l'immagine che ho cerchiato in rosso (che é la page_center_gb). Ovviamente la cerchiata é un'immagine a se stante, non una porzione di immagine.

Trovate l'immagine al link: http://www.fabiogava.com/image.jpg


Una cosa importante:
se aprite la pagina http://www.fabiogava.com/migration/ riuscite a vedere per intero la testa che spunta sull'imamgine precedente o viene tagliata?

Grazie mille in anticipo!

[r-evolving]

Lo puoi fare lavorando (molto) sul CSS

A 1024x768 la testa... viene tagliata! 

[Alhazred]

Usando FF 3 ed IE7 1440x900 la testa si vede per intero.

Per quanto riguarda il link sull'immagine puoi fare così:
rendi l'immagine rettangolare se non lo è già
all'interno del div che contiene l'immagine metti un

Codice: [Seleziona]

<ul id="id1">
    <li id="id2"><a href="link_al_sito"><span class="alt">quello_che_voi_tanto_è_nascosto</span></a></li>
</ul>

poi nel css aggiungi quanto segue

Codice: [Seleziona]

ul#id1 {
margin:0;
padding:0;
list-style:none;
position:relative;
width:larghezzaimmagine_in_px;
height:altezza_immagine_in_px;
background:url("nomefileimmagine") no-repeat;
}
ul#id1 li {
display:block;
position:absolute;
margin:0;
padding:0;
}
li#id2 {
left:0px; /*left e top gestiscili secondo le dimensioni del div */
top:0px;
width:larghezzaimmagine_in_px;
height:altezza_immagine_in_px;
}

#id1 .alt { display:none }

#id1 a {
display:block;
width:100%;
height:100%;
}
Ovviamente anche al posto di id1 e id2 puoi mettere quello che vuoi

[poastro]

Lo puoi fare lavorando (molto) sul CSS

A 1024x768 la testa... viene tagliata! 

Cavolo, lavorando solo con FF3 e IE 1440x900 (come dice Alhazred) non avevo preso in considerazione questa (grossa) pecca.
C'é qualche suggerimento perché la testa si veda anche alla risoluzione 1024x768? (a parte cambiare template?).

Magari restringendo il bianco del template dovrei farcela, no? In caso affermativo... come si fa?

Grazie mille ALhazred... se riesco a far vedere la testa a tutte le risoluzioni provo a fare come mi hai egregiamente spiegato!

[Alhazred]

Mi sa che solo riducendo il bianco non ci riusciresti comunque, il template è largo 960px e come minimo l'immagine sarà 110px il che vuol dire un totale di 1070px, il bordo bianco è 8px per lato, quindi guadagneresti 16px, il che non ti aiuta perché arriveresti a 1054px, inoltre calcola che non tutti i 1024px sono visibili, in parte se li mangiano i bordi del browser.

[poastro]

Ho provato un po' a vedere altri template e vorrei proprio mantenere questo...

Vedere immagine: http://www.fabiogava.com/image.jpg


Vorrei fare stare tutto (compresa la testa) in un 1024.

Ovviamente sono disposto a ridurre tutto, dalla testa all'immagine 1, ma anche a togliere il modulo che appare nella posizione user2.

Mi potete dare una mano sul dove agire nel css?

Graziee!

[Alhazred]

Il div che contiene il modulo "I più letti" si trova in

Codice: [Seleziona]

<div class="hwr-right">
   <div class="module">
      <div>
         <div>
            <div>
               <qui c'è la chiamata per inserire il modulo>
            </div>
         </div>
      </div>
   </div>
</div>
Quindi per eliminare proprio lo spazio che occupa dovresti cancellare nell'index.php tutto quello che ho riportato qui su.
N.B.: potrebbero non esserci tutti quei div senza niente specificato, non so se li genera il modulo o se sono parte del template.

Poi dovrai stringere il div che contiene il menu "In evidenza", cosa che puoi fare cercando nel css #newsflash e cambiando il valore di width.
Potrebbe essere necessario anche ridimensionare il div contenente il modulo "Ultime notizie" nel caso abbia una larghezza fissa (ma ne dubito), comunque lo fai sempre nel css cercando .hrwleft

Il div che contiene l'immagine che hai contrassegnato con 1, lo trovi nel css cercando .hleft

Se ti è necessario ridimensionare anche la colonna principale del template cerca nel css #maincolumn_full.

Penso dovrebbe bastare, se non fossero sufficienti queste modifiche scrivi i problemi che sono sorti o le cose che non sono a posto.

Prima di iniziare fatti un backup dei file index.php e template.css, così in caso di disastri puoi tornare alla situazione attuale.

[poastro]

Alhazred,
ringraziarti é poco!!

Ho seguito le tue istruzioni...

Ho ristretto il modulo dove appare "in evidenza", ma il testo del modulo non risponde alle dimesioni del titolo e fuoriesce...

Per il resto, dovró spostare la testa vicino all'immagine di sinistra e poi vedere se tutto entra nel 1024...

[Alhazred]

Non hai ridimensionato il newsflash.
Cerca #newsflash nel css e restringilo.
Anche .hright sfora le dimensioni del template, da ad entrambi una larghezza al max di 310px.
Se #newsflash ha una larghezza percentuale lascialo così (sarà 100%), restringi solo .hright dandogli una larghezza fissa.

[Alhazred]

Ho notato che hai risolto il problema, ti è rimasto però un div da ridimensionare, prima non l'ho visto perché coperto dagli altri.
Si tratta di #header_main, impostalo a 800px.

[poastro]

Su #header_main solo trovo questo nel css



#header_main {

   margin: 0;

   padding: 0;

}


Nessuna indicazione di width...


Dovrai darmi un link ad un tuo sito o un credit tuo per ringraziarti!

[Alhazred]

Allora controlla #hearder_rbg, imposta questo a 800px.

[poastro]

Perfetto, ora ho fatto tutto... mi manca solo controllare se con 1024 la testa non viene tagliata.

Beh, ora volevo rendere "linkabile" la testa.
L'immagine si chiama "page_center_bg" ma nell'index php non c'é traccia di questa...

[Alhazred]

A 1024x768 ora non dovresti aver problemi, il tutto è largo 910px.

Per l'immagine: dove e cosa hai modificato per spostarla da dove era prima e metterla più a destra?

[poastro]

L'immagine é grande, ed é questa che allego (la testa é solo parte di essa).

[allegato eliminato da un amministratore - Il file era vecchio]

[Alhazred]

Mi sa che ho capito e sarà un po' complicato allora, dovresti provare a fare quanto ti ho spiegato nell'altro post inserendo il link nel div con id page_bg, in ul#id1 e li#id2 come dimensioni metti width:110px e height:200px, poi in li#id2 c'è anche la parte difficile, impostare i valori giusti per top e left, sarà difficile perché il div è quello principale che si adatta alle dimensioni della finestra del browser e dimensioni variabili con posizioni assolute non vanno daccordo, potresti ritrovarti l'area cliccabile in posti diversi a seconda della risoluzione alla quale visualizzi la pagina.

A questo punto però puoi provare una strada diversa:
creati una nuova immagine della sola testa di dimensioni 275x110, poi nell'index.php prima del div con id header_bg metti

Codice: [Seleziona]

<a href="indirizzo_dove_vuoi_che_punti_l_immagine"><img src="percorso_all'immagine_che_hai_creato></img></a>


[poastro]

Ciao Alhazred,
ci ho provato solo oggi... niente da fare!

Senza complicarmi molto, ho pensato che potrei rendere linkabile l'immagine "topmenu_bg.png", ovvero quella rettangolare dove appare "Alberto Dan, candidato ecc...."

Anche in questo caso, chiedo aiuto sul da farsi.
Devo solo lavorare sull'index.php o anche su altro?




Ad ogni modo, per ringraziarti del tuo aiuto volevo almeno mettere un link o qualcosa che ti sponsorizzi.
Fammi sapere via pvt o da qui.

[Alhazred]

Devi fare la stessa cosa tramite link sull'index.php + modifiche al css che ti ho descritto su, questo perché l'immagine è impostata come sfondo sul css, non è inserita nell'index.php in un tag <img src=...>. In questo caso left e top puoi metterli entrambi a 0px se l'immagine occupa tutto il div in cui è contenuta (dovrebbe essere 800x30).

Per il link non ti preoccupare, non ho siti miei, per ora ho realizzato solo un sito commissionato da una associazione... ancora da finire tra l'altro.

[poastro]

Oggi sono finalmente migrato ufficialmente a joomla 1.5.

Una domanda sul template:

in alto a destra (immagini "i piú letti" e "in evidenza") nella loro parte destra non sono smussate, come invece sono se andiamo a vedere l'immagine che sta sotto (newsflash_h3.png).

Come devo lavorare sul codice nel template.css affinché l'immagine newsflash_h3 esca com'é in realta?

Ora come ora il codice é questo:


#newsflash h3 {

   font-family: Tahoma, Arial, sans-serif;

   width: 286px;   

   color: #fff; /*color: #4CAFC6;*/

   font-size: 13px;

   height: 26px;

   text-decoration: none;

   text-align: left;

   padding: 0 0 0 10px;

   background: url(../images/newsflash_h3.png) top left no-repeat;

   font-weight: bold;

   line-height: 24px;

   margin: 0

}