layout elastico in funzione della dimensione della finestra del browser

**X_Ch4n_** · 04-09-2008, 17:23

Salve a tutti,
sto cercando di realizzare un template per joomla che si ridimensioni in base alla dimensione della finestra, ma mi sono fermato al solo header....

L'header che sto creando parte da un'immagine unica, che io ho spezzato in 2 parti(lato destro e lato sinistro). Ho piazzato le 2 immagini all'interno di un unico div solo che un'immagine ha float left e l'altra right. Il problema sta nel mezzo, vorrei utilizzare una sorta di pattern (una immagine larga 1 px e alta quanto le altre 2) ripetuta su x all'interno di un div annidato nel primo, e li si pianta tutto, non riesco ad andare avanti.... sigh!!

quando sono riuscito a visualizzare il pattern il risultato e' stato che me lo sono ritrovato come sfondo dell'intero div principale....
ma meglio far parlare il codice:

Codice PHP:


<div id="header">

     [img]immagine_sx.png[/img]

     <div class="center" style="float:left;">

          

     </div>

     [img]immagine_dx.png[/img]

</div>

Codice PHP:


#header { 

    min-width:800px;

    max-width:100%;

}



.center { background:url(pattern.png) repeat-x; }

Cosa potrei fare per risolvere? purtroppo e' il committente che mi ha chiesto sta cosa e come tale devo sbattermi per farlo... solo che nn so + dove sbattere.

Ciaoooo

**Mich_** · 04-09-2008, 17:56

Abracadabra ... Occhio al trucco

codice:

<body>
  <div id="header">
    <div class="center">
      [img]immagine_sx.png[/img]
         &amp;nbsp;
     [img]immagine_dx.png[/img]
    </div>
  </div>
  ...
</body>

Con CSS:
html, body {
  width: 100%;
}
.center {
  width: 100%;
  background: url(pattern.png) repeat-x;
}
.center:after {
  clear: both;
  /* ... vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}

Questo naturalmetne se le due immagini devono essere in primopiano. Se invece la semantica le vuole come sfondi, il codice va cambiato.

**X_Ch4n_** · 04-09-2008, 18:04

e' perfetto, se non per un piccolo particolare di mia colpa:
le 2 immagini png hanno delle minime trasparenze e quindi viene visualizzato il pattern dietro queste trasparenze .....

**Mich_** · 05-09-2008, 08:35

Ma ti serve proprio la trasparenza? Non potresti toglierla?

Altrimenti la soluzione e`:

codice:

    <div class="center">
      <div class="sx">

</p></div>
         

</p>
     <div class="dx">

</p></div>
    </div>

CSS:
.center {
  width: 100%;
  background: url(pattern.png) repeat-x;
}
.center:after {
  clear: both;
  /* ... vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}

.center .sx {
  background: #fff url(immagine_sx.png) no-repeat;
  float: left;
  width: ...px;
  height: ...px;
}
.center .dx {
  background: #fff url(immagine_dx.png) no-repeat;
  float: right;
  width: ...px;
  height: ...px;
}

In cui ho messo le immagini come sfondi (e` cambiato il significato semantico !!)

**X_Ch4n** · 05-09-2008, 12:03

Perfetto!!

La trasparenza non la posso togiere perche' il layout grafico prevede un'immagine di sfondo sul body che e' allineata in alto col margine superiore del body stesso, ma ho trovato cmq un modo per poter ovviare....

Grazie tante davvero, non so come avrei fatto altrimenti!!

Discussione: layout elastico in funzione della dimensione della finestra del browser

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto con layout elastico in funzione della dimensione della finestra del browser

Permessi di invio