Scuola forum (scuo.la) - Forum di discussione per le scuole

Scuola forum (scuo.la) - Forum di discussione per le scuole (https://www.scuolaforum.org/)
-   Informatica (https://www.scuolaforum.org/informatica/)
-   -   Allineare varie immagini uniformemente nell'header vBulletin (https://www.scuolaforum.org/informatica/14-allineare-varie-immagini-uniformemente-nellheader-vbulletin.html)

eleonora 06-12-2007 02:15 PM
Allineare varie immagini uniformemente nell'header vBulletin
 
Salve.
Nel mio forum vorrei aggiungere delle immagini nell'header, però allineate e distribuite uniformemente.
Adesso ho un solo logo a sinistra, se ne volessi mettere altri 3 in modo che siano 4 in tutto ben distribuiti, nell'intestazione per ogni dimensione di browser?
Praticamente un layout liquido..
Come si può fare?
Grazie
Eleonora

giuseppe 06-12-2007 04:17 PM
Puoi crearti il codice con un semplice editor html, tipo Dreamweaver.
Crei una tabella dandogli l'attributo width al 100%, poi inserisci le varie immagini e il tutto lo copi in:

Gestioni Stili>Stili e Modelli>Vai (a dx)>Header

Lì devi inserirlo tra :

<!-- logo -->

e

<!-- /logo -->

ciao
Giuseppe

elena 06-13-2007 12:21 PM
Se vuoi fare un layout liquido, basta mettere tutto in una tabella con width=100% e td allineate centralmente.

Usando i Css, cosa consigliata, dovresti creare un div, mettere i loghi ognuno in un suo div e gestire tutto via CSS settando l'allineamento centrale.

Inserisci il codice nel template del header e vedi quale è il risultato

Salvati sempre prima una copia di backup e poi vai avanti fino a che non raggiungi il risultato desiderato

Saluti
Elena

Jarno 10-10-2007 05:46 PM
Puoi crearti il codice con un semplice editor html, tipo Frontpage, Dreamweaver, etc.
Crea una tabella dandogli l'attributo width al 100%, dopodichè inserisci le varie immagini e lo inserisci in:

Gestioni Stili
Stili e Modelli
Vai (a dx)
Header

Il codice verrà tipo questo:

Quote:
<table width="100%" height="165" border="0" cellpadding="0" cellspacing="0" id="Tabella_01">
<tr>
<td width="25%" background="1.jpg"><img src="01.jpg" width="79" height="165" alt="p2psin.net - portale italiano del p2p" /></td>
<td width="33%" background="5_01.jpg"><img src="5_02.jpg" width="341" height="165" alt="p2psin.net - portale italiano del p2p" /></td>
<td width="57%"><img src="5_03.jpg" width="580" height="165" alt="p2psin.net - portale italiano del p2p"></td>
</tr>
</table>
Naturalmente questo è un esempio, con l'aggiunta del TAG "title", ma puoi modificare il codice come preferisci.

Nell'Header, devi inserirlo tra :

Quote:
<!-- logo -->

Qui

<!-- /logo -->

Belen 10-10-2007 05:50 PM
Usando i Css, cosa consigliata, dovresti creare un div, mettere i loghi ognuno in un suo div e gestire tutto via CSS settando l'allineamento centrale.

Es:

codice:
<style>
.contenitoreheader {width:100%; margin-left: auto; margin-right: auto; position: relative;}
.header {width:150px; display: inline; text-align: center margin-left: auto; margin-right: auto; position: relative;}
</style>

<div class="contenitoreheader">
<div class="header"><img src="indirizzoimmagine1.jpg" alt="" height="" width="" /></div>
<div class="header"><img src="indirizzoimmagine2.jpg" alt="" height="" width="" /></div>
<div class="header"><img src="indirizzoimmagine3.jpg" alt="" height="" width="" /></div>
<div class="header"><img src="indirizzoimmagine4.jpg" alt="" height="" width="" /></div>
</div>


Tutti gli orari sono GMT +2. Attualmente sono le 10:15 PM.