inserire 4 img in un <div>

[microcip]

Dovrei inserire 4 immagini in un blocco ''liquid'' secondo questo schema:

le img 1,2 e 3 sono ''fisse'' mentre la 4 e una img di 1x100px che si ripete sull'asse x dall'img1 alla 2.
idee sul codice da adottare?
grazie.

[Mich_]

Anzitutto una nota di semantica:
le immagini che hanno un contenuto (cioe` che portano informazione) VANNO inserite con il tag <img>, le immagini di abbellimento VANNO inserite come sfondi.
Questo per vari motivi:
1. chi legge la pagina con browser speciali, si rende subito conto come deve comportarsi (gli sfondi vengono ignorati)
2. i motori di ricerca sanno classificare le immagini, mentre ignorano gli sfondi
3. chi non carica le immagini puo` saltare gli sfondi, mentre per le <img> legge il testo alternativo (attributo alt="..." di <img>)
4. gli sfondi non vengono stampati (se serve stampare la pagina)

Supponendo che le tue immagini 1, 2, 3 siano di contenuto e la 4 sia di sfondo, il codice potrebbe essere:

<div>
  [img]img1.gif[/img]
  [img]img3.gif[/img]
  [img]img2.gif[/img]
</div>

Con CSS:

div {
  width: ....;
  background: url(img4.gif) repeat-x;
}
#img1 {
  margin: 0 auto 0 0;
}
#img2 {
  margin: 0 0 0 auto;
}
#img1 {
  margin: 0 auto;
}

[microcip]

Anzitutto ti ringrazio della risposta(mi permetto di darti del tu spero non ti dia fastidio )
Le immagini vanno a comporre il logo/header di un forum il quale ha un layout liquid;l'idea era quindi quella di mette 3 immagini con posizionamento fisso (align="left/right/center") e di inserire un modulo di 1x1px che si ripete in modo da seguire il layout del sito in base alla risoluzione dell'utente.
Intanto provo con il codice consigliatomi.
grazie.

[microcip]

ok;ho provato cosi:
PHP

<div align="center" style="margin: 0px;" id="logo"><a href="{$mybb->settings['bburl']}/index.php">








</div>

CSS

#logo {
#logo_sfondo{
 repeat-x;
}
#img1 {
  margin: 0 auto 0 0;
}
#img2 {
  margin: 0 0 0 auto;
}
#img3 {
  margin: 0 auto;
}

ma sembra non funzionare a dovere...ecco cosa mi restituisce.


l'elemento grafico di destra non so perchè ma scala in basso mentre la texture da un px in questa maniera non si ripete; ma lo fa se imposto

  background: url(logo_sfondo.png) repeat-x;

il problema è che cosi mi fa tutta la pagina e non solo lo spazio compreso tra le due immagini di destra e sinistra.
come posso risolvere?
grazie.

[Mich_]

Ci credo che non funziona, e` pieno di errori.
Il codice ha una sua sintassi che devi rispettare, non puoi inventarne una nuova.

Prima di tutto sistema l'HTML, togliendo la formattazione (altrimenti i CSS fanno quello che vogliono) e togliendo gli stili in linea, che complicano la vita. Inoltre devi togliere lo sfondo, come ti avevo suggerito:

<div id="logo"><a href="...">
  
  
  
</div>

Poi devi sistemare il CSS:

#logo {
  width: ...; /* devi specificarlo */
  margin: 0 auto;   /* per centrare nel blocco superiore */
  background: url(http://www.mysite/logo_centro.png) repeat-x;
}
#img1 {
  margin: 0 auto 0 0;
}
#img2 {
  margin: 0 0 0 auto;
}
#img3 {
  margin: 0 auto;
}

Gli allineammenti si fanno con i margini, non con gli attributi HTML

Nota che la cosa funziona nei browser standard (e in IE se la DTD e` XHTML Strict), ma il blocco che contiene il tutto deve avere larghezza definita.
Per sistemare in IE (quirks mode) occorre aggiungere altre cose, ma prima deve fuzionare negli altri brwoser.

[microcip]

forse mi sono espresso male io....
riprovo:
Come faccio a dare una grandezza definita al blocco se poi questo si deve ingrandire o rimpicciolire in base alla risoluzione dello schermo dell'utente?
Avevo eliminato la larghezza proprio perchè non ne ho una definita.....
per l'html ora sistemo.
editotrei usare width: x%;?

[microcip]

allora ho sistemato il tutto con i codici corretti ma per qualche motivo il logo centrale viene caricato a sinistra mentre le due laterali vengono caricate ma accanto al logo centrale e non agli estremi del blocco.

link al sito che forse riusciamo a capirne qualcosa di più.

ps:scusami la niubbiaggine ma con php e html sono autodidatta;porta un filino di pazienza

[Mich_]

In quella pagina ho notato formattazioni realizzate con attributi HTML: se vuoi far funzionare i CSS, devi eliminarle tutte, altrimenti i browser interpretano a modo loro e non riesci a fare una cosa cross-browser.

Io pero` non vedo nella pagina il pezzo di cui stiamo parlando. Cioe` nel codice vedo il pezzo, ma non riesco ad individuarlo nella pagina. E` vero che non ho caricato i cookie, ma spero non ci sia necessita` dei cookie per vedere il logo della pagina.
Se il logo centrale e` la scritta "cooling Technique", allora ci sono problemi di altro tipo, dato che il logo e` inserito in un <a> ma non vedo il link (il mouse non cambia forma e non appare l'indirizzo in fondo alla pagina).

La larghezza puoi esprimerla nella unita` che vuoi. le % vanno bene, ma in tal caso il contenitore deve avere larghezza definita, e ricorsivamente fino al body (che dovra` avere width: 100% - in qualche browser e` diverso dalla finestra, definita dall'oggetto <html>)

Tieni anche presente che il codice che ti ho dato presuppone che il contenitore sia un blocco, e che le immagini siano inline; se ci metti un <a> (che di default e` inline), devi farlo diventare blocco e dargli dimensioni 100% (sia in x che in y), altrimenti la cosa non funziona.

[microcip]

Ci ho lavorato sopra un po stamane e devo dire che con un po di caffeina e un pizzico fortuna ho tirato fuori qualcosa di decente
Il codice che ho scritto attualmente funziona in maniera egregia;il logo viene centrato nel mezzo lo sfondo è corretto e sia ie che firefox che opera lo leggono allo stesso modo.
Ne deduco di conseguenza che non ci dovrebbero essere errori sostanziali.
ora il ''problema'' riguarda i due laterali che vengono si affiancati correttamente ma li sovrappone allo sfondo.
ho provato con i margini ma sembra non funzionare.....idee?

css usati fino ad ora:

#logo {
  width: 95%; 
  margin: 0 auto;   
  background: url(http://www.mysite/logo_centro.png) repeat-x;
}
#img1 {
  margin-right: 0 auto 0 0;
float:left;
width: 18px;
}
#img2 {
  margin: 0 0 0 auto;
float:right;
width: 18px;
}
#logo-centro {
  margin-right: 18px;
margin-left: 18px;
}

edit:risolto pure il problema dell'<a href>.