Printable View
Ciao a tutti, in questo momento sto studiando il CSS ma nella modifica di un template per un sito a cui sto lavorando ho avuto dei problemi. Potete aiutarmi?
:arrow: E' possibile centrare una specifica immagine senza utilizzare cose come "Class", etc. ?
Io ho provato in diversi modi ma non ha funzionato. :roll:
Ho provato a cercare in giro ma non ho trovato niente che funzionasse come vorrei, spero che chiarirete ogni mio dubbio :lol:
Grazie.
Metodi possibili sono stati già discussi qua, un paio di giorni fa. Ricordati che questo forum ha una funzione cerca :wink:
:arrow: http://forum.it.altervista.org/html-...-immagine.html
Puoi assegnare il css direttamente ai tag html con l'attributo style="", ma è sporco. Non ci sono buoni motivi per non usare class="" ed un css pulito.
Sono consapevole che il forum ha una sezione cerca, ho dato un occhiata ma non ho trovato ciò che mi serve.
Io vorrei modificare il template ed anziché assegnare una classe all'immagine, richiamarla nel template e dargli le varie impostazioni direttamente lì, non so se hai capito :/
Ho provato diverse soluzione che credevo potessero andare, ma nessuna è andata bene.
PS: se vuoi ti posto la porzione di codice riguardante l'immagine.
Mi spiego meglio, io ho un immagine che si ripete in tutte le pagine,: in che modo posso far si che, senza dover modificare tutte le pagine per aggiungere la classe, l'immagine si allinei?
Beh, se nel codice è sempre nello stesso posto, puoi usare come selettori i tag stessi. Ad esempio questoandrebbe a prendere tutte le immagini che sono in un paragrafo, dentro un div, dentro un altro div, direttamente nel corpo della pagina.Codice:body > div > div > p > img { ... }
Se trovi una sequenza simile che identifica la tua immagine, sei a posto. Più semplice è, meglio. Occhio perché ">" non è supportato da alcuni browser non recenti.
Il sito della mia scuola (il sito in questione) ha l'immagine inserita in una tabella tra i tag <p>
Nella sequenza dovrei inserire anche la tabella?
Parti cone man mano aggiungi tag davanti finché la regola non si applica solo all'immagine che ti serve.Codice:IMG { border: 4px solid lime; }
Magari ti basta qualcosa del tipo
ma senza vedere il codice non ho idea di cosa ti serva esattamente.Codice:#header table img { ... }
edit: in più, l'idea che sia fatto a tabelle mi fa passare la voglia di applicarmi al problema :|
Si lo so... ma il sito della mia scuola non è gestito da una prof che ha fatto studi incentrati sull'informatica e sinceramente a riscrivere tutto il codice mi secco, quindi cerco di risolvere i problemi così.
Comunque la parte del codice interessato è questo:
La parte in rosso è l'immagine che vorrei spostare al centro usando il CSS in quanto e ripreso in ogni pagina.Codice:<table class="contentpaneopen">
<tr>
<td>
<p><strong>TESTI<br /></strong></p>
<p><strong>TESTO</strong></p>
<p><strong>TESTO</strong></p>
<p><strong>TESTO</strong><strong>TESTO</strong></p>
<p><img src="/images/stories/liceo.jpg" border="0" width="472" height="238" /></p>
</td>
</tr>
</table>
PS: comunque se non potete aiutarmi niente, vuol dire che mi armerò di molta pazienza e riscriverò il codice sia HTML che CSS in modo da rendere il sito più gestibile, facile da modificare ma soprattutto bello esteticamente.
Mi viene in mente ora che puoi raggiungerla direttamente con il selettore per attributo, così:Questo funziona nella maggior parte dei browser, incluso da IE7 in avanti.Codice:img[src="/images/stories/liceo.jpg"] { ... }
Per centrare l'immagine orizzontalmente prova con:
Codice:img[src="/images/stories/liceo.jpg"] { margin: 0 auto; }
Ti ringrazio, ma vorrei sapere una cosa: scrivendo questo codice
L'immagine viene centrata nel punto in cui voglio io, se un utente visualizza la pagina con una diversa grandezza dello schermo, vede l'immagine sempre centrata o gli "sballa"?Codice:img[src="/images/stories/liceo.jpg"] { margin-left: 25px; }
Scusa per la domanda che può sembrare idiota.
PS: in parole povere: le distanze, proporzioni,... restano invariate o questo codice può creare errori di visualizzazioni (magari facendo vedere l'immagine più a sinistra/destra di come la vedo io)?
Di nuovo, dipende dal resto della pagina, che a quanto pare è segreto militare :mrgreen:
Prova a ridimensionare la finestra del browser e vedi cosa succede. Sopra avevo scritto 0 auto, che dovrebbe metterlo al centro sempre, ma in effetti ci mancava un pezzo:
Codice:img[src="/images/stories/liceo.jpg"] { margin-left: 0 auto; display: block; }
Ok.. comunque il tuo codice non funziona xD
Codice, ci serve il codice, ce lo vuoi dare sì o no? Anche l'indirizzo della pagina è bene accetto, anzi, è meglio.
LINK PAGINA
So che il codice fa pena (almeno questa è la mia valutazione), appena finisce la scuola vedrò di riscriverlo anche perché è stato scritto da una prof che non ha fatto studi particolari di informatica.
Argh, perché ho fatto copia e incolla della riga sbagliata :| E' margin, non margin-left, perché deve settare entrambi i margini destro e sinistro su auto:Citazione:
Originalmente inviato da mathis
Codice:img[src="/images/stories/liceo.jpg"] { margin: 0 auto; display: block; }
Grazie 1000 ora funziona ;) comunque sopra c'è il link del sito, comunque non è completo mancano alcuni collegamenti, infatti lo sfondo è diverso ecc.. ma per quello che devo modificare io mi va benissimo così ;)Citazione:
Originalmente inviato da dreadnaut
Tranquillo, nessuno ti giudica per i file che editi :wink: