Newsgroup: it.comp.www.html
Titolo: Float?

Si prenda la seguente pagina (l'ho rifatta para para così anche i + pigri 
non devono fare alcuna fatica):
<html>
<head>
<style>
	.Testo {
		text-align: justify;
		color: black;
		width: 100%;
		position: relative;
		border: medium dashed Black;
		padding: 15px;
	}
	.Titolo {
		background: blue;
		color: white;
		border: 1px solid Black;
		top: -8px;
		left: 8px;
		position: absolute;
	}
	.Img {
		border: 1px solid Red;
		right: 8px;
		top: -25px;
		position: absolute;
		float: right;
	}
</style>
<title>Prova</title>
</head>
<body>
<DIV class=Testo>
<DIV class=Titolo>
TITOLO</DIV>
<DIV class=Img><img src="*.gif" alt="" width="66" height="72" 
border="0"></DIV>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
</DIV>
</body>
</html>
Se i volessi che il testo girasse intorno all'img, senza andarci sotto, 
mantenendo l'impostazione corrente (Img e Titolo a metà del bordo 
superiore), cosa devrei fare? Perchè float:right non funge?
Impossibile con position:absolute? Soluzioni?
Grazie
-- 
Guglielmo
Vorrei provare! 
"Chiedo solo di poter dimostrare che avere tanto denaro non porta la 
felicità".

Guglielmo ha scritto:
| Si prenda la seguente pagina (l'ho rifatta para para così anche i + pigri
| non devono fare alcuna fatica):
LOL quel "si prenda la seguente pagina" mi ricorda tanto le lezioni all' università!
La fatica c'è comunque: aprire l' editor, copia-incollare, salvare, visualizzare :-)
....e poi senza codice come ti si potrebbe aiutare?
[...codice CUT...]
| Se i volessi che il testo girasse intorno all'img, senza andarci sotto,
| mantenendo l'impostazione corrente (Img e Titolo a metà del bordo
| superiore), cosa devrei fare? Perchè float:right non funge?
| Impossibile con position:absolute? Soluzioni?
..
Ti giuro che, anche se ho copia-incollato il codice e visualizzato la pagina,
non ho capito bene cosa vuoi ottenere, dato che non so quanto sia grande
l' immagine, e se questa deve disporsi come il titolo e restare a metà sul bordo
oppure iniziare un po' sopra il bordo e continuare sotto.
Comunque, sono quasi ormai certo che posizionamenti e float di uno stesso
elemento non possano andare insieme. Ti dovrebbe bastare lavorare con
i margini negativi:
div.testo div.imagecontainer{
    float: right;
    margin-top: -25px;
    margin-right: 8px
    }
Anche se ritengo che racchiudere l' immagine in un div è superfluo.
Se poi vuoi che il paragrafo non si disponga anche sotto l' immagine, supponendo
che questa sia larga 100 pixels:
div.testo p{
    margin-right: 105px
    }
alcuni consigli:
- metti i tag in minuscolo, è + leggibile ed è una buona abitudine che ti troverai utile
  se passerai all' xhtml
- I nomi di classi e i div nell' html sarebbero meglio in minuscolo, e vanno racchiuse
  tra virgolette  nell' html, es:  <div class="testo">
- evita di usare nomi di classi uguali ai nomi di tag html, tipo "img" oppure troppo
  generici tipo "testo" o "titolo"
Fammi sapere se ho capito bene il problema. Ciao,
    SantaKlauss

 Fammi sapere se ho capito bene il problema. Ciao,
Speriamo mi sia spiegato meglio ora, però ti assicuro che se visualizzi il 
codice è molto + semplice.
Ciao e grazie


SantaKlauss ha risposto e Guglielmo ha replicato:
| > Ti giuro che, anche se ho copia-incollato il codice e visualizzato la pagina,
| > non ho capito bene cosa vuoi ottenere, dato che non so quanto sia grande
| > l' immagine,
|
| *c'è scritto, width="66" height="72"
Ah ok, scusami. Il fatto è che sono abituato all' html strict e cercavo le
dimensioni nel css.
| >e se questa deve disporsi come il titolo e restare a metà sul bordo
| > oppure iniziare un po' sopra il bordo e continuare sotto.
|
| La seconda che hai detto, ma io col codice che ho fatto la visualizzo
| perfettamente... Non mi dire che non hai nemmeno provato?! Pigrizia
| assoluta! :)
Certo che ho provato! Ma non avevo letto le dimensioni dell' immagine
e non avendo capito bene la domanda. Ora mi è chiaro cosa vuoi ottenere:
l' immagine che inizia sopra il bordo e resta float: right in modo da consentire
al paragrafo di fluttuare anche sotto la stessa.
L' idea che ti ho postato prima:
| > div.testo div.imagecontainer{
| >     float: right;
| >     margin-top: -25px;
| >     margin-right: 8px
| >     }
Funziona più o meno. Con ie 5.5 si vede solo metà dell' immagine, la parte che
sborda sopra viene nascosta. Bene in Opera e Mozilla. Ma ci sarà sicuramente
una soluzione che va bene anche per ie, ci penso su e ti faccio sapere.
| Non voglio che testo *e* immagine siano a -25 (metà del bordo superiore),
| ma solo l'img
Nota che non ho messo una virgola, questa è la definizione di una sola regola
espressa gerarchicamente, o "genealogicamente" se mi è consentito il termine.
Viene definito "descendant selector". In particolare la regola riguarda solo
i div con classe "imagecontainer" contenuti in div con classe "testo".
E' un mio modo di codificare css, e credo sia una buona abitudine.
| Speriamo mi sia spiegato meglio ora, però ti assicuro che se visualizzi il
| codice è molto + semplice.
Ora ho capito, ma il codice l' avevo testato e visualizzato anche prima!
| Ciao e grazie
Figurati! Ciao,
    SantaKlauss

 Ora ho capito, ma il codice l' avevo testato e visualizzato anche prima!
ok, non dubitavo della tua buona volontà e cmq c'era lo smile (è la terza 
volta che ribadisci che hai testato il codice!) Mica era un'offesa, pensavo 
che come matrix vedendo il codice ti immaginassi la struttura <g>
Grazie ancora
Ciao 
-- 
Guglielmo
Postulato del parcheggio:
Non appena hai deciso di parcheggiare a due chilometri di distanza, quattro 
posti si libereranno simultaneamente sotto casa.

Divagazioni tra SantaKlauss e Guglielmo sul descendant selector:
div.testo div.imagecontainer{
    float: right;
    margin-top: -25px;
    margin-right: 8px
    }
| > Nota che non ho messo una virgola, questa è la definizione di una sola regola
| > espressa gerarchicamente, o "genealogicamente" se mi è consentito il termine.
| > Viene definito "descendant selector". In particolare la regola riguarda solo
| > i div con classe "imagecontainer" contenuti in div con classe "testo".
| > E' un mio modo di codificare css, e credo sia una buona abitudine.
|
| *Mi riferivo proprio a questo... Dov'è che hai messo la virgola?
| Non ho mica capito sai? Perchè metti insieme testo e imagecontainer? Così
| facendo le istruzioni sotto non dovrebbero riferirsi ad entrambi?
| Soprattutto il margin top, perchè fa salire solo l'img?
Infatti ho detto: nota che non ho messo la virgola. La regola che ho scritto
sopra è scritta usando il descendant selector.
E riguarda *solo* i div con classe "imagecontainer" contenuti nell' html in div
con classe "testo". Non riguarda i div con classe "testo". Mi viene difficile
spiegarlo con altre parole... queste sono le più semplici che mi vengono
in mente.  Ti copio-incollo un esempio che ho postato tempo fa:
div#menu{
    /*ecc*/
    }
div#menu a{
    /*tutte i link inseriti nell' html all' interno
     del div con id="menu" verranno presentate con lo stile definito qui*/
    }
Dai uno sguardo qui per capire meglio:
http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors
| > Ora ho capito, ma il codice l' avevo testato e visualizzato anche prima!
|
| ok, non dubitavo della tua buona volontà e cmq c'era lo smile (è la terza
| volta che ribadisci che hai testato il codice!) Mica era un'offesa, pensavo
| che come matrix vedendo il codice ti immaginassi la struttura <g>
Magari mi fosse possibile *<|:-)
| Grazie ancora
| Ciao
Figurati! Ciao,
    SantaKlauss

 Channing Pollock