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

**paololosco** · 29-02-2008, 16:43

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

**fcaldera** · 29-02-2008, 17:41

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?

**homezappa** · 29-02-2008, 18:16

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

**paololosco** · 01-03-2008, 15:14

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

**homezappa** · 03-03-2008, 10:16

Facciamolo più semplice:
Ci serve:
- Una classe css ("sopra") per abbassare l'immagine: la sua height sarà 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ù semplice, vero?

HTH
Zappa

**paololosco** · 03-03-2008, 12:00

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!

**homezappa** · 03-03-2008, 12:39

di nulla!

Zappa

**paololosco** · 05-03-2008, 18:49

... 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...

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

Strumenti discussione

Ricerca discussione

Visualizza

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

Permessi di invio