Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    [utopia???] float left - ma vorrei fosse anche sopra...

    sto facendo un sito (nella fattispecie una gestione di articoli dinamica in PHP) e vorrei poter impaginare l'articolo con più foto.

    Il problema è che vorrei che, spostando l'immagine in verticale, la parte di testo che rimane sopra l'immagine non subisse il float dato dal "margin"...

    è possibile o utopia?? allego l'immagine di quello che esce...

    vorrei che il testo scorresse anche nella parte sopra l'immagine (che ora è bianca!)

    idee???

    grazie in anticipo

    ah, ovviamente, non posso dividere il testo in più paragrafi, poichè essendo una pagina dinamica creata tramite php, prende il testo da un'unica cella del database...!!!

    grazie
    Immagini allegate Immagini allegate
    hasta siempre comandante Guevara!

    bisogna prendere la vita come viene...sperando che la vita non "prenda" te!!!

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    potresti dare un padding top all'immagine (che suppongo sia flottata)


    edit: sorry, ho capito male. Puoi postare la porzione di codice html relativo al testo e all'immagine?
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Meglio di così non mi viene....
    Studia un po', poi ci si risente
    codice:
    <html>
    <head>
    <style>
    #content {
        width:500px;
        height:400px;
        position: relative;
        top: 50px;
        border: 1px solid black;
        padding: 10px;
    }
    .image {
    padding: 10px 10px 10px 0px;
    width: 128px;
    height:128px;
    }
    .lW { float: left; clear: left; height: 15px; }
    .rW { float: right; clear: right; height: 15px; }
    </style>
    <title>Titolo</title>
    </head>
    <body>
    <div id="content">
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:140px;height:140px">[img]error.png[/img]</div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    <div class="lW" style="width:0px;"></div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero nulla, euismod nec, 
    laoreet a, pulvinar eu, tellus. Aliquam imperdiet enim eu enim. Suspendisse dignissim est. 
    Nunc imperdiet augue quis nulla. Nunc id nibh hendrerit elit porta hendrerit. 
    Morbi venenatis leo vitae purus. Maecenas sapien ipsum, venenatis in, imperdiet a, ullamcorper sit amet, diam. 
    Nam ac dolor. Sed justo lectus, dapibus euismod, convallis euismod, egestas sed, urna. 
    Duis turpis nisl, ultricies non, lacinia vitae, placerat eu, massa. 
    Praesent sit amet felis at sem sollicitudin eleifend. Sed id purus. 
    Ut vitae quam vitae risus blandit eleifend. Aliquam eros nunc, dapibus id, bibendum pharetra, laoreet quis, leo. 
    Praesent ut nibh. Proin nec nibh ut lorem pulvinar congue. 
    Pellentesque adipiscing ante quis urna. Donec varius lacus non magna scelerisque tincidunt. 
    In porttitor mi sit amet velit. Sed id quam. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero nulla, euismod nec, 
    laoreet a, pulvinar eu, tellus. Aliquam imperdiet enim eu enim. Suspendisse dignissim est. 
    Nunc imperdiet augue quis nulla. Nunc id nibh hendrerit elit porta hendrerit. 
    Morbi venenatis leo vitae purus. Maecenas sapien ipsum, venenatis in, imperdiet a, ullamcorper sit amet, diam. 
    </div>
    </body>
    </html>
    HTH
    Zappa
    Immagini allegate Immagini allegate
    [PC:Presario 2515EU][Cpu:P4@2.3GHz][Ram: 512M][HDU:80G@5400 RPM]
    [Wireless:LinkSys][OS: Ubuntu 9.04 - Jaunty Jackalope]

  4. #4
    scusa ma il problema era al lavoro... poi non ho più avuto modo... lunedi tenterò, ti ringrazio perchè è esattamente quello che mi serve... !!! non ho mai avuto la necessità di farlo ma... quando mi ci sono ritrovato... non ho trovato proprio una mazza... beh, intanto ti ringrazio moltissimo, poi... lunedi ti farò sapere! ciao e grazie ancora
    hasta siempre comandante Guevara!

    bisogna prendere la vita come viene...sperando che la vita non "prenda" te!!!

  5. #5
    Facciamolo pi&ugrave; semplice:
    Ci serve:
    - Una classe css ("sopra") per abbassare l'immagine: la sua height sar&agrave; la distanza dell'immagine da sopra.
    - Una classe css ("immagine") per contenere l'immagine
    - Una classe css ("sotto") per far 'tornare' a sinistra il testo.
    Quindi:
    codice:
    <html>
    <head>
    <style>
    #content {
        width:500px;
        height:400px;
        position: relative;
        top: 50px;
        border: 1px solid black;
        padding: 10px;
    }
    .image {
    padding: 10px 10px 10px 0px;
    width: 128px;
    height:128px;
    }
    .sopra { float: left; clear: left; height: 100px; width: 0px;}
    .immagine { float: left; clear: left; width:140px; height:140px; margin: 5px; }
    .sotto { float: left; clear: left; width: 0px;}
    </style>
    <title>Titolo</title>
    </head>
    <body>
    <div id="content">
    <div class="sopra"></div>
    <div class="immagine">[img]error.png[/img]</div>
    <div class="sotto"></div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero nulla, euismod nec, 
    laoreet a, pulvinar eu, tellus. Aliquam imperdiet enim eu enim. Suspendisse dignissim est. 
    Nunc imperdiet augue quis nulla. Nunc id nibh hendrerit elit porta hendrerit. 
    Morbi venenatis leo vitae purus. Maecenas sapien ipsum, venenatis in, imperdiet a, ullamcorper sit amet, diam. 
    Nam ac dolor. Sed justo lectus, dapibus euismod, convallis euismod, egestas sed, urna. 
    Duis turpis nisl, ultricies non, lacinia vitae, placerat eu, massa. 
    Praesent sit amet felis at sem sollicitudin eleifend. Sed id purus. 
    Ut vitae quam vitae risus blandit eleifend. Aliquam eros nunc, dapibus id, bibendum pharetra, laoreet quis, leo. 
    Praesent ut nibh. Proin nec nibh ut lorem pulvinar congue. 
    Pellentesque adipiscing ante quis urna. Donec varius lacus non magna scelerisque tincidunt. 
    In porttitor mi sit amet velit. Sed id quam. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero nulla, euismod nec, 
    laoreet a, pulvinar eu, tellus. Aliquam imperdiet enim eu enim. Suspendisse dignissim est. 
    Nunc imperdiet augue quis nulla. Nunc id nibh hendrerit elit porta hendrerit. 
    Morbi venenatis leo vitae purus. Maecenas sapien ipsum, venenatis in, imperdiet a, ullamcorper sit amet, diam. 
    </div>
    </body>
    </html>
    Pi&ugrave; semplice, vero?

    HTH
    Zappa
    [PC:Presario 2515EU][Cpu:P4@2.3GHz][Ram: 512M][HDU:80G@5400 RPM]
    [Wireless:LinkSys][OS: Ubuntu 9.04 - Jaunty Jackalope]

  6. #6
    grazie tante!!!!

    è proprio quello che mi serve, senza contare che posso inserire foto sia a destra che a sinistra con questo metodo!

    grazie mille e saluti!
    hasta siempre comandante Guevara!

    bisogna prendere la vita come viene...sperando che la vita non "prenda" te!!!

  7. #7
    di nulla!

    Zappa
    [PC:Presario 2515EU][Cpu:P4@2.3GHz][Ram: 512M][HDU:80G@5400 RPM]
    [Wireless:LinkSys][OS: Ubuntu 9.04 - Jaunty Jackalope]

  8. #8
    ... riprendo il post... sperando ancora in una mano...

    sto sclerando!

    quando ti parlavo della possibilità di impaginare in questo modo foto a destra e sinistra, l'ho fatto con firefox e tutto ok... non mi sono accorto che su explorer è totalmente diverso!

    ho fatto varie prove, temendo di sbagliare i vari "float" e "clear" (credo proprio che il problema stia lì...) ma nulla...

    posto il codice, ma credo che sia inutile, perchè dopo tanti tentativi andati a male, non so più da che parte sono girato, la confusione regna sovrana...

    ecco il codice HTML:

    codice:
    <div id="testo">
    					<div class="sopra1"></div>
    					<div class="immagine1">
    						[img]images/home/art/logo_htmlit.gif[/img]
    					</div>
    					<div class="sopra2"></div>
    					<div class="immagine2">
    						[img]images/home/art/logo_htmlit.gif[/img]
    					</div>
    					<div class="sopra3"></div>
    					<div class="immagine3">
    						[img]images/home/art/logo_htmlit.gif[/img]
    					</div>prova testo... nel mio file ce n'è molto, visto che utilizzo 3 immagini<div align="right">&raquo;torna</div>
    e ecco il css

    codice:
    		
    		.sopra1 { 
    		float: left; clear: left; height: 0px; width: 2px;}
    		.image1 {
    		padding: 10px 10px 10px 0px;
    		width: 240px;
    		height:140px;
    		}
    		.immagine1{ float: left; clear:left; width:240px; 
    		height:140px; margin: 5px; 
    		}
    		.sopra2 { 
    		float: right; clear: right; height: 250px; width: 2px;}
    		.image2 {
    		padding: 10px 10px 10px 0px;
    		width: 240px;
    		height:140px;
    		}
    		.immagine2{ float: right; clear:right; width:240px; 
    		height:140px; margin: 5px; 
    		}
    		.sopra3 { 
    		float: left; clear: left; height:200px; width: 2px;}
    		.image3 {
    		padding: 10px 10px 10px 0px;
    		width: 80px;
    		height:80px;
    		}
    		.immagine3 {float: left; clear:left; width:80px; 
    		height:80px; margin: 5px; 
    		}
    non so come sia messo perchè come gia detto, al momento del mio post la stanchezza e la confusione regnano sovrane...
    hasta siempre comandante Guevara!

    bisogna prendere la vita come viene...sperando che la vita non "prenda" te!!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.