2 immagini nell' introduzione articolo

[ilbaro]

come potrei fare per inserire 2 immagini nell'introduzione degli articoli tipo:


immagine1; testo; immagine2;


Ho provato a creare una tabella, però ho diversi problemi come la larghezza della tebella che varia e cambia il layout incorrispondeza della risoluzione schermo con cui si visualizza il sito.


ho cercato anche un estensione, tipo global news, però permette una sola immagine.

[thewebsurfer]

come potrei fare per inserire 2 immagini nell'introduzione degli articoli tipo:


immagine1; testo; immagine2;


Ho provato a creare una tabella, però ho diversi problemi come la larghezza della tebella che varia e cambia il layout incorrispondeza della risoluzione schermo con cui si visualizza il sito.


ho cercato anche un estensione, tipo global news, però permette una sola immagine.

se ho capito bene è solo una questione di css

Codice: [Seleziona]

<style>div.wrapper{
width:100%}
img.classe_immagine_1,
img.classe_immagine_2,
div.testo_centrale{
width:33%}
</style>
html

Codice: [Seleziona]

<div class="wrapper"><img class="classe_immagine_1" src="img.jpg"><div class="testo_centrale">bla bla</div><img class="classe_immagine_1" src="img.jpg"></div>

[ilbaro]

scusa. ma non sono esperto fino a questo punto.


Il codice html lo copio nell'introduzione dove voglio inserire le 2 immagini, ed il codice CSS che uso ne devo fare? devo creare un file .css?

[thewebsurfer]

scusa. ma non sono esperto fino a questo punto.


Il codice html lo copio nell'introduzione dove voglio inserire le 2 immagini, ed il codice CSS che uso ne devo fare? devo creare un file .css?

il sito è già online?

[ilbaro]

stò facendo delle prove su altervista, prima di spostare tutto nel dominio ufficiale.

[thewebsurfer]

e posta il link di altervista   (se il sito funziona)

[ilbaro]

ti ho mandato il link in mp

[adottauncane]

Ciao ilbaro,
per introduzione dell'articolo intenti la parte prima del leggi tutto? E vuoi la foto a sinistra, il testo in mezzo e una foto a destra?
Se sì lo fai semplicemtente con l'editor. Scrivi il testo, metti il cursore prima del medesimo, inserisci la prima foto con un float:left; (lo gestisci dall'icona che usi per l'inserimento) e il suo padding.
rimetti il cursore nello stesso punto di prima, inserisci la seconda immagine ma con il float:right;

[ilbaro]

Ciao ilbaro,
per introduzione dell'articolo intenti la parte prima del leggi tutto? E vuoi la foto a sinistra, il testo in mezzo e una foto a destra?
Se sì lo fai semplicemtente con l'editor. Scrivi il testo, metti il cursore prima del medesimo, inserisci la prima foto con un float:left; (lo gestisci dall'icona che usi per l'inserimento) e il suo padding.
rimetti il cursore nello stesso punto di prima, inserisci la seconda immagine ma con il float:right;

ho provato, però dovevo fare tante intruduzioni di questo tipo e il layout cambiava a seconda della lunghezza del testo, io volevo che le posizioni delle immagini rimanessero nello stesso punto a differenza del testo.

[ilbaro]

Vorrei ringraziare :
thewebsurfer
che mi ha dato una mano e molti consigli, ragazzo molto competente e disponibile.

[ilbaro]

Io ho questo elemento in basso a destra, come modifico il codice perchè sia spostato in basso però al centro?

Codice: [Seleziona]

div#zt-mainframe a.readmore  {
background: url(../images/readmore-bg.png) no-repeat 100% -37px;
display: inline-block;
float:none;
height: 37px;
line-height: 30px;
padding: 0 15px;
color:#fff}

div#zt-mainframe a.readmore:hover {
background-position: right 0;
color:#fff
}

[adottauncane]

Ciao ilbaro,
come già scritto, serve un link al sito.

[ilbaro]

Ciao ilbaro,
come già scritto, serve un link al sito.

www.stebibi.altervista.org


Il pulsante "leggi tutto" degli articoli e stato aggiunto  con il codice che ho inserito nel post precedente, creato prendendo spunto dal pulsante leggi tutto che cè nei moduli neri in basso , però quelli sono in basso al centro, mentri il pulsante delle introduzioni è in basso a destra. Io vorrei tutti in basso al centro.

[adottauncane]

Per come è fatta l'immagine e posizionata con i css dovresti mettere un margin-left:80px; e togliere il float:rigth;

però questo va bene solo per quella lunghezza di testo.

Una cosa più giusta potresti ottenerla così:

Codice: [Seleziona]

div#zt-mainframe a.readmore {
    background: url("../images/readmore-bg.png") no-repeat scroll 50% -37px rgba(0, 0, 0, 0);
    color: #FFFFFF;
    display: inline-block;
    height: 37px;
    line-height: 30px;
    text-align: center;
    width: 100%;
}

div#zt-mainframe a.readmore:hover {
    background-position: center 0;
    color: #FFFFFF;
}
ma devi rivedere l'immagine, se non la vuoi così lunga.

[ilbaro]

Grazie!
E' possibile modificare il carattera inserendone unp leggermente più grosso oppure in grassetto?

che codice dovrei inserire? ma sempre in quel pezzo di codice?




P.S. scusa una domanda, ma cosa usi per modificare il codice e vedere il risultato? firebug?

[adottauncane]

Sì, sempre lì:

Codice: [Seleziona]

div#zt-mainframe a.readmore {    background: url("../images/readmore-bg.png") no-repeat scroll 50% -37px rgba(0, 0, 0, 0);    color: #FFFFFF;    display: inline-block;    font-size: 14px;    font-weight: bold;    height: 37px;    line-height: 30px;    text-align: center;    width: 100%;}
font-size: 14px; => per la dimensione
font-weight: bold; => per il bold


sì uso Firebug con Firefox.

[sudoku]

e sì...una domanda un post...