Newsgroup: it.comp.www.html
Titolo: [css] posizionamento 2 immagini

Ho un div con 2 immagini all'interno. Il div ha dimensioni in percenuale.
Vorrei posizionarne una a sinistra e una a destra. Usando una tabella mi
basterebbe metterci 2 colonne e allineare il contenuto della prima a
sinistra e della seconda a destra. Come posso fare con i css? Vorrei evitare
il posizionamento assoluto perchè non voglio riferire lo scostamento
rispetto al body, ma rispetto al div "header".
Ecco il codice html:
<div id="header"><img src="layout/logo.gif" width="515" height="73"
class="headsx" /><img src="layout/headfoto.jpg" width="323" height="73"
class="headdx" /></div>
Qualcuno può aiutarmi?
Grazie!
--
Wildchild
Openoffice.org: l'alternativa gratuita (e buona) a MS Office.
http://it.openoffice.org

WildChild ha scritto:
| Ho un div con 2 immagini all'interno. Il div ha dimensioni in percenuale.
| Vorrei posizionarne una a sinistra e una a destra. Usando una tabella mi
| basterebbe metterci 2 colonne e allineare il contenuto della prima a
| sinistra e della seconda a destra. Come posso fare con i css? Vorrei evitare
| il posizionamento assoluto perchè non voglio riferire lo scostamento
| rispetto al body, ma rispetto al div "header".
| Ecco il codice html:
|
| <div id="header"><img src="layout/logo.gif" width="515" height="73"
| class="headsx" /><img src="layout/headfoto.jpg" width="323" height="73"
| class="headdx" /></div>
|
| Qualcuno può aiutarmi?
| Grazie!
Ciao WildChild,
    a volte la risposta è nella domanda. Per riferire il posizionamento assoluto
nell' header ti basta dichiararlo posizionato relativamente e i valori di top, left, bottom
e right si riferiranno all' header. Ecco un esempio:
<div style="position: relative; height: 150px">
    <div style="positon: absolute; top: 0; left: 0; width: 50%">
        <!-- contenuto del div, cioè l' immagine -->
    </div>
    <div style="positon: absolute; top: 0; right: 0; width: 50%">
        <!-- contenuto del secondo div, cioè l' immagine -->
    </div>
</div>
Da 
www.brainjar.com
 :
The containing block of an absolutely positioned element is defined
a little differently than it is for other elements. The containing block
for an absolutely positioned element is established by its closest,
positioned ancestor. That is, the nearest element outside it that has
a position of absolute, relative or fixed. If there is no such ancestor
element, the initial containing block (the browser window) is used.
Poi se si tratta di disporre solo immagini per il make-up del sito,
il discorso è diverso. Puoi sistemarle come background, o ci sono mille
altri modi.
Per esempio se vuoi un immagine sulla sinistra in alto e una a destra in
basso dell' header, senza usare i posizionamenti questo è un modo molto
elegante per farlo senza tra l' altro rompere il flusso normale degli elementi,
e permettendo scritte larghe al 100% sull' header. CSS:
div#header{
    background: #69c url("headleft.gif") no-repeat top left;
    color: #fc0
    }
div#header div#headbottom{
    background: transparent url("headleft.gif") no-repeat bottom right;
    }
e poi nell' html:
<div  id="header">
    <div id="headerbottom">
        <h1> WildChild Personal Site</h1>
    </div>
</div>
Dai uno sguardo ad un post del 7 Settembre
con subject "posizionamento". C'e' una mia risposta abbastanza esauriente,
credo che tra questo e l' altro mio post dovresti trovare un modo.
Fammi sapere!
Ciao,
    SantaKlauss

 posizionamento assoluto
[...]
Ciao,
forse sono un po' duro, ma non sono riuscito a risolvere il problema.
Comunque più studio i css, più mi rendo conto che chi fa i predicozzi
sull'abominevolezza delle tabelle... lo fa per abbracciare una ideoloia e
non la realtà.
In questo caso un effetto che con le tabelle si otterrebbe in 2 righe di
codice, qui si ottiene con molto di più, forse... visto che non sono ancora
riuscito.
Sempre più poi mi rendo conto che per ottenere layout carini si devono
innestare div dentro div... alla faccia di chi considerava orridi gli
annidamenti di tabelle nei layout fatti con dreamweaver.
Mah...
Grazie, se riesco a risolvere posto la soluzione.
Ciao!


Wildchild  ha scritto:
| Ciao,
| forse sono un po' duro, ma non sono riuscito a risolvere il problema.
| Comunque più studio i css, più mi rendo conto che chi fa i predicozzi
| sull'abominevolezza delle tabelle... lo fa per abbracciare una ideoloia e
| non la realtà.
| In questo caso un effetto che con le tabelle si otterrebbe in 2 righe di
| codice, qui si ottiene con molto di più, forse... visto che non sono ancora
| riuscito.
| Sempre più poi mi rendo conto che per ottenere layout carini si devono
| innestare div dentro div... alla faccia di chi considerava orridi gli
| annidamenti di tabelle nei layout fatti con dreamweaver.
| Mah...
| Grazie, se riesco a risolvere posto la soluzione.
| Ciao!
Ciao WildChild,
    ti dico solo di non mollare. Se non ricordo male sei un grafico e un
webmaster. Tutto quello che studi in materia css non è tempo perso,
soprattutto per il tuo lavoro. I css ormai sono una realtà ben consolidata,
e praticamente quasi tutto può essere fatto senza l' uso delle tabelle.
Una volta imparate bene tutte le proprietà elementari (che trovi ad es
su 
www.w3schools.com
 ) va fatto un salto: imparare bene il box model,
i posizionamenti e i float. E' un salto non facile, ma una volta fatto non
tornerai più indietro. Garantito, perchè con i css si riescono a fare cose
assolutamente impossibili con le tabelle.
Io il salto l' ho fatto grazie a 
www.brainjar.com
 .
Riuscire a fare praticamente tutto quello che ti viene da immaginare
con i css implica una conoscenza molto approfondita della materia.
Personalmente non ho mai letto un libro sui css, e tutto ciò che ho imparato
l' ho trovato in rete. Forse ad oggi leggere un libro sui css non mi è poi così
indispensabile, ma ci ho messo parecchio tempo ad imparare quello che so.
La rete richiede tempo, mentre un libro è completo e ci trovi tutto sotto
mano senza sentirti perso.
Questo è un link con un bel po' di recensioni fatte molto bene di libri sul
webdesign: 
http://japan-interface.co.uk/webdesign/books.html
In quanto ai div annidati, immaginati una pagina web come una grossa
scatola con tante scatole dentro. Con le tabelle le scatole le puoi disporre
solo in certi modi, mentre con i css le disponi come vuoi tu. E soprattutto,
ogni scatolina ha un' etichetta e un modo in cui si presenta..
In merito al tuo problema, se mi spieghi meglio cosa vuoi ottenere, posso
provare a risolverlo io (anch'io sono un po' duro a volte.. soprattutto a
capire le domande!).
Ciao!
    SantaKlauss

 soprattutto a capire le domande!).
Ma no, figurati, sei gentilissimo. E' solo che non è semplice nè spiegare,
nè capire. :)
Il problema in realtà è semplice: un box con all'interno due immagini,
piazzate una a destra e una a sinistra, alla stessa altezza (in alto). Non
le voglio piazzare come sfondo. Tutto qua.


 pulita rispetto al farlo con le tabelle.
il vincolo delle  colonna piu' lunga delle altre e' un vincolo troppo 
forte per i miei gusti. a questo punto se si deve *per forza* utilizzare 
il layout a 3 colonne ci si affida ad *una* tabella che fa da gabbia, si 
da un nome ad ogni cella (header, footer, sidebar, ecc.) e poi via
di CSS per applicare gli stili.
solo nei CSS3 c'e' il concetto di "column". fino ad ora si e' ricorso a 
trucchi.
cmq ho buttato giu' una mezza soluzione alternativa, via "3 float":
http://www.deelan.com/temp/3-float.html
il width di "main" e' fisso, altrimenti occorre specificare
la larghezza delle colonne in %, e li saltano fuori i casini.
certo, con IE5 bisogna star li a ricalcolarsi tutte le misure
e affidarsi a quelche hack per il box model, ma insomma, mejo
de niente.
provato solo con mozilla 1.4 e IE6.
ciao.
-- 
goldicus1970 AT 
yahoo.it
http://www.deelan.com