in un div ho del testo e delle immagini. come posso fare per far sì che il testo scontorni le immagini? ora mi esce del testo, poi una immagine con spazio vuoto affianco, poi altre righe di testo e poi ancora una immagine con spazio vuoto affianco....
grazie
Non so come siano ora le tue immagini. Da come descrivi sembra che siano state definite con display:block; o che siano state inserite in un blocco.
Le immagini essere posizionate direttamente dentro il
, assieme al testo che le deve contornare; inoltre nel CSS devono avere il float (destro o sinistro).
Puo` essere necessario un clear, da applicare a tutti i
.
Se hai dubbi posta il codice HTML e CSS del paragrafo e delle immagini, oltre alla DTD usata.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
ciao, grazie per l'intervento.Originariamente inviato da Mich_
Non so come siano ora le tue immagini. Da come descrivi sembra che siano state definite con display:block; o che siano state inserite in un blocco.
Le immagini essere posizionate direttamente dentro il
, assieme al testo che le deve contornare; inoltre nel CSS devono avere il float (destro o sinistro).
Puo` essere necessario un clear, da applicare a tutti i
.
Se hai dubbi posta il codice HTML e CSS del paragrafo e delle immagini, oltre alla DTD usata.
le immagini le ho messe all'interno del
ma il risultato è quello che dicevo prima... il testo non scontorna l'immagine....
posto il codice (che però è semplicissimo....)
<body>
<div align="center" id="testata">
[img]logo.gif[/img]
</div>
<div align="center" id="nav">
<ul id="nav">
<li id="active">Home
[*]pagina 1[*]pagina 2
[*]pagina 3
[*]pagina 4
[/list]
</div>
<div id="corpo">
Procedimento:
Si macinano le mandorle al tritacarne, aggiungendo ogni tanto un cucchiaino d'acqua per non far asciugare troppo le mandorle e perdere il loro olio.
Lo zucchero si mette in una casseruola al fuoco con un pò d'acqua (circa gr. 300) per poter fare il "giulebbe", e quando sta per filare, dopo circa 10 minuti, (prendendo una goccia tra pollice e indice si vede che fa il "piccolo filo") si versano le mandorle macinate.
[img]foto1.jpg[/img]Per fare questa preparazione senza bruciarsi è necessario prima bagnarsi le dita con un pò d'acqua fredda. Si cuoce la pasta di mandorle a fuoco lento, sempre girando per evitare che si attacchi al tegame.
Quando si nota che comincia a staccarsi dalla casseruola, si può considerare cotta e si toglie dal fuoco.
Si versa in un piatto e si lascia raffreddare.
Quando la pasta è completamente fredda, si lavora e s'impasta con le mani (provate ad impastarla con il caffè macinato), poi si può colorarla.
</p>
</div>
</body>
e questo è il foglio di stile
/* */
/* */
/* */
.testo_giustificato{text-align:justify}
a{text-decoration: none}
/* */
/* BODY */
/* */
body{font: 76%/1.3 Verdana,Arial,sans-serif;
text-align:center;
background-color: #ccc
}
/* */
/* TESTATA */
/* */
div#testata{
position:relative;
width: 720px;
height: 80px;
background-color: #fff;
border-top: solid 1px #333333;
border-right: solid 3px #333333;
border-bottom: solid 0px #333333;
border-left: solid 1px #333333;
padding: 0px 30px 0px 10px;
}
/* */
/* NAVIGAZIONE */
/* */
div#nav{
position:relative;
width: 760px;
height: 30px;
background-color: #fff;
border-top: solid 1px #333;
border-right: solid 3px #333333;
border-bottom: solid 0px #333333;
border-left: solid 1px #333333;
}
ul#nav{float: left;
width: 100%;
list-style: none;
border-bottom: 1px solid #D7D7D7;
margin: 0;
padding: 0
}
ul#nav li{float: left;
margin: 0 0.2em 0;
padding: 0 0 0 8px;
background: url(tab.png) no-repeat top left
}
ul#nav a{float: left;
padding: 0.4em 8px 0.4em 0;
background: url(tab.png) no-repeat top right;
color: #222
}
ul#nav a:hover{color: #184D8A}
ul#nav li#active{background: url(tab2.png) no-repeat top left}
ul#nav li#active a{background: url(tab2.png) no-repeat top right;
color: #184D8A
}
/* */
/* CORPO */
/* */
div#corpo{
position:relative;
width: 700px;
background-color: #fff;
color: #113355;
text-align:justify;
border-top: solid 1px #333333;
border-right: solid 3px #333333;
border-bottom: solid 2px #333333;
border-left: solid 1px #333333;
padding: 20px 30px 20px 30px;
h1 {font-size: 2.0 em;}
h2 {font-size: 1.6 em;}
h3 {font-size: 1.3 em;}
h4 {font-size: 1.0 em;}
h5 {font-size: 0.8 em;}
h6 {font-size: 0.6 em;}
}
Mancano gli stili per il
e le <img>.
Prova ad aggiungere al CSS:Se poi l'immagine sfora dalcodice:#corpo p { clear: both; } #corpo img { float: left; /* oppure right, se preferisci */ }
, devi aggiungere il clear alla fine del
, come spiegato nella discussione: [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
così funziona. grazie
però se le immagini sono due e le si vuole allineare una a sinistra e una a destra?
e poi come fare per lasciare un poco di spazio intorno all'immagine?
scusa per le domande, ma, come hai visto, non sono molto esperta...
ciao
così funziona. grazie
però se le immagini sono due e le si vuole allineare una a sinistra e una a destra?
scusa per le domande, ma, come hai visto, non sono molto esperta...
ciao
Una avra` float: left; e l'altra float: right;Originariamente inviato da chiarapr
però se le immagini sono due e le si vuole allineare una a sinistra e una a destra?
A quel punto occorre cambiare i selettori (vedi il capitolo sui selettori di qualsiasi tutorial CSS).
Lo spazio lo puoi regolare con i margini da assegnare all'immagine.
Esempio:Nota che gli id devono essere unici nel documento.codice:<div id="corpo"> ... [img]...[/img] testo testo ... </p> [img]...[/img] testo testo ... </p> </div> CSS: #corpo p { clear: both; } #corpo img { margin: 2px; } #soleRosso { float: left; margin-left: 0; } #lunaNera { float: right; margin-right: 0; }
Comunque ti conviene studiare bene i CSS: con un tutorial tipo quello presente in HTML.it non ti ci vuole troppo tempo, e sicuramente lo recuperi nel tempo in cui realizzi alcune pagine.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
grazie!
cmq hai ragione, stò già studiando...
ero riuscita a fare qualcosa usando "padding" invece che "margin"
es:
padding: 20px 20px 20px 0px; per la prima foto
padding: 20px 0px 20px 20px; per la seconda foto
ciao
Permessi di invio
Rispondi quotando