Newsgroup: it.comp.www.html
Titolo: [css] immagini agli estremi di un div

Ciao, vorrei realizzare un header "liquido", con a sinistra un logo, a
destra un banner.
Come posso fare per allineare le due immagini, l'una al margine destro, e
l'altra al margine sinistro?
Ecco l'html:
<div id="header">
<img src="layout/logo.gif" class="headsx" />
<img src="layout/banner.jpg" class="headdx" />
</div>
Non sono riuscito a definire headdx e headsx in modo da ottenere l'effetto
voluto...
Grazie!
--
Wildchild
Openoffice.org: l'alternativa gratuita (e buona) a MS Office.
http://it.openoffice.org

 Wildchild
Prego. Ciao
Enrico
<HTML>
<HEAD>
<TITLE>Prova div</TITLE>
<style>
.div1 {
 position: relative;
 width: 60%;
 height: 100px;
 background-color: #ccc;
 border: 1px black;
 margin: 10px;
 padding: 10px;
 border: 5px solid #000;
 text-align: center;
}
.span1 {
 float: left;
 width: 100px;
 height: 100px;
 background-color: #eee;
 text-align: center;
 line-height: 100px;
 color: #000;
 margin: 0px;
 padding: 0px;
 border: 0px solid #000;
}
.span2 {
 position: absolute;
 right: 10px;
 top: 10px;
 width: 100px;
 height: 100px;
 background-color: #eee;
 text-align: center;
 line-height: 100px;
 color: #000;
 margin: 0px;
 padding: 0px;
 border: 0px solid #000;
}
</style>
</HEAD>
<BODY>
<div class="div1">
 <span class="span1">ciao</span>
 <span class="span2">enrico</span>
</div>
</BODY>
</HTML>

Wildchild ha scritto:
| Ciao, vorrei realizzare un header "liquido", con a sinistra un logo, a
| destra un banner.
| Come posso fare per allineare le due immagini, l'una al margine destro, e
| l'altra al margine sinistro?
Molto semplicemente:
div#header{
    background: #fff url("banner-left.gif") no-repeat top left
    /*puoi impostare anche un altro colore di sfondo*/
    }
div#header h1{
    height: 120px; /*l' altezza qui va impostata come quella delle due immagini*/
    background: transparent url("banner-right.gif") no-repeat top right
    }
E l' html:
<div id="header">
    <h1></h1>
</div>
Nota che nell' header puoi anche aggiungere testo se ti serve.
Ciao!
    SantaKlauss

Wildchild ha scritto:
| Ciao, vorrei realizzare un header "liquido", con a sinistra un logo, a
| destra un banner.
| Come posso fare per allineare le due immagini, l'una al margine destro, e
| l'altra al margine sinistro?
Molto semplicemente:
div#header{
    background: #fff url("banner-left.gif") no-repeat top left
    /*puoi impostare anche un altro colore di sfondo*/
    }
div#header h1{
    height: 120px; /*l' altezza qui va impostata come quella delle due immagini*/
    background: transparent url("banner-right.gif") no-repeat top right
    }
E l' html:
<div id="header">


Wildchild ha scritto:
| Ciao, vorrei realizzare un header "liquido", con a sinistra un logo, a
| destra un banner.
| Come posso fare per allineare le due immagini, l'una al margine destro, e
| l'altra al margine sinistro?
Molto semplicemente:
div#header{
    background: #fff url("banner-left.gif") no-repeat top left
    /*puoi impostare anche un altro colore di sfondo*/
    }
div#header h1{
    height: 120px; /*l' altezza qui va impostata come quella delle due immagini*/
    background: transparent url("banner-right.gif") no-repeat top right
    }
E l' html:
<div id="header">


Wildchild ha scritto:
| Ciao, vorrei realizzare un header "liquido", con a sinistra un logo, a
| destra un banner.
| Come posso fare per allineare le due immagini, l'una al margine destro, e
| l'altra al margine sinistro?
 [...code CUT...]
Ciao WildChild,
    l' alternativa al background (anche se personalmente preferisco la prima
soluzione che ti ho presentato) usando il tag img:
<div style="border: 1px solid #000">
    <img src="logo.jpg" style="float:left">
    <img src="banner.jpg" style="float:right">
    <div style="clear: both"></div>
</div>
Se ritieni che il div che dà il clear sia superfluo a livello di markup
e vorresti toglierlo dall' html (io sì) ti basta attribuire un' altezza
all' header:
<div style="border: 1px solid #000; height: 120px">
    <img src="logo.jpg" style="float:left">
    <img src="banner.jpg" style="float:right">
</div>
Ritornando al codice che hai postato:
<div id="header">
    <img src="layout/logo.gif" class="headsx" />
    <img src="layout/banner.jpg" class="headdx" />
</div>
Ecco gli stili:
div#header{border: 1px solid #000; height: 120px}
img.headsx{float: left}
img.headdx{float: right}
Ora le soluzioni ci sono tutte.
Ciao,
    SantaKlauss

 Ciao WildChild,
[...]
Ciao, la tua soluzione con il background funziona e fa al caso mio. L'unica
cose che non me la fa gradire al massimo tale efficace soluzione è
l'impossibilità di caricare dinamicamente l'immagine di background. ma per
ora non è una necessità che ho.


Wildchild ha scritto:
| Ciao, la tua soluzione con il background funziona e fa al caso mio. L'unica
| cose che non me la fa gradire al massimo tale efficace soluzione è
| l'impossibilità di caricare dinamicamente l'immagine di background. ma per
| ora non è una necessità che ho.
Certo che puoi farlo, ti basta usare uno stile inlinea o ancora meglio incorporato
nell' html che fai scrivere a php lato server. Oppure imposti le immagini di background
lato client all' onload con javascript (e il codice javascript lo fai scrivere dal php).
| Grazie!
Figurati,
    SantaKlauss

| > Ciao WildChild,
| [...]
|
| Ciao, la tua soluzione con il background funziona e fa al caso mio. L'unica
| cose che non me la fa gradire al massimo tale efficace soluzione è
| l'impossibilità di caricare dinamicamente l'immagine di background. ma per
| ora non è una necessità che ho.
| Grazie!
.... o ancora meglio: fai scrivere direttamente a php alcune parti del foglio di stile,
non sono molto pratico ma da qualche parte ho letto che funziona.
Nell' head dell' html metti:
<link rel="stylesheet" type="text/css"  href="dynamicstyle.php">
Ovviamente il sorgente "dynamicstyle.php" non avrà i tag e gli header di una
pagina html, ma solo istruzioni php per generare e scrivere il foglio di stile.
Ciao!
    SantaKlauss

     SantaKlauss
Andrea

The DeerBear ha scritto
| A me non funziona... sob sob!
Evidentemente c'e' qualcosa che non va nell' asp. Prova prima a fare una semplice
pagina html con stile incorporato, senza usare asp. Vedrai che va.
Saluti,
    SantaKlauss

     SantaKlauss
Andrea