allineare testo è immagini

**Manuel.s** · 24-09-2006, 11:37

ciao a tutti
io ho una cosa del genere:

codice:

<div id="articolo">
			<div id="imgarticolo">[img]img.jpg[/img]</div>
			<div id="bodytext">testo testo testo</div>
</div>

vorrei fare in modo che l'immagine si disponesse in alto a destra, e il testo a sinistra per tutta l'altezza dell'immagine, superata la quale prosegue anche sotto... spero di essermmi spiegato :-)

nel css ho messo questo:

codice:

div#imgarticolo {
	float:right;
	margin:3px 3px 3px 3px;
}

funziona ma solo su IE. come posso fare perchè funzioni almeno anche su firefox?

grazie 1000

**Freax** · 24-09-2006, 14:07

Originariamente inviato da Manuel.s
ciao a tutti
io ho una cosa del genere:

codice:

<div id="articolo">
			<div id="imgarticolo">[img]img.jpg[/img]</div>
			<div id="bodytext">testo testo testo</div>
</div>

vorrei fare in modo che l'immagine si disponesse in alto a destra, e il testo a sinistra per tutta l'altezza dell'immagine, superata la quale prosegue anche sotto... spero di essermmi spiegato :-)

nel css ho messo questo:

codice:

div#imgarticolo {
	float:right;
	margin:3px 3px 3px 3px;
}

funziona ma solo su IE. come posso fare perchè funzioni almeno anche su firefox?

grazie 1000

allora hai necessità di avere una immagine con le seguenti proprietà:

> float:right [l'immagine si pone a destra e viene 'incorniciata' nel testo]
> margin-top:0 [0 margine dal top , ovvero l'immagine risulterà disposta nel punto più alto possibile]

vedo che però o hai capito male i nomi dei tag o hai scelto dei nomi fuorvianti e poco adatti per i tuoi elementi , in ogni caso hai sbagliato a dare le proprietà corrette per quello che vuoi realizzare . La struttura che hai è :

div#articolo
|
|-----div#imgarticolo----img
|
|-----div#bodytext

non hai fatto altro che conferire le proprietà che volevi dare all'img al div con l'id imgarticolo anziché all'immagine stessa .
Nel CSS devi scrivere:

div#imgarticolo img{
float:right;
border:3px;
border-top:0;
}

questo se vuoi applicare le proprietà solo ai tag img ( quindi le immagini ) che sono contenute nel div imgarticolo , altrimenti se vuoi applicare il tutto a tutte le immagini della pagina scrivi semplicemente:

img{
float:right;
border:3px;
border-top:0;
}

ti consiglio di ripassarti l'uso dei selettori e di usare id o classi con nomi che rendano meno complicato il lavoro

**Freax** · 24-09-2006, 14:12

altra cosa , se non ho capito male quello che vuoi ottenere hai sbagliato anche nello scrivere l'HTML perché è inutile il div#imgarticolo , bastava semplicemente :

codice:

<div id="articolo">
<div id="contenuto">[img]img.jpg[/img]testo testo testo</div>
</div>

l'immagine non va in un altro div ma va semplicemente nello stesso div del testo

**Manuel.s** · 24-09-2006, 14:35

ciao
ti ringrazio per l'aiuto ma forse mi sono perso qualcosa... ho corretto il codice come mi hai detto, per l'html ho tolto il div che conteneva l'immagine (ora ti metto i veri nomi degli ID senno facciamo confuzione, non far caso ai tag TMPL_VAR). i div hometext e bodytxt preferirei tenerli devo differenziare i due blocchi di testo:

codice:

<div id="mainarticle">
<img title="<TMPL_VAR NAME=TITLE>" alt="<TMPL_VAR NAME=TITLE>" src="/articoli/img/medium/<TMPL_VAR NAME=IMG>" />
			<div id="hometext"><TMPL_VAR NAME=HOMETEXT></div>
			<div id="bodytext"><TMPL_VAR NAME=BODYTEXT></div>
		</div>

per il css

codice:

div#mainarticle img {
	float:right;
	margin-top:0p;
	margin:3px 3px 3px 3px;
}

continuo ad avere l'effetto desiderato solo su IE, firefox lo ignora proprio...

**Freax** · 24-09-2006, 15:11

creati una cartella IMG e mettici dentro una immagine di nome esempio.jpg e prova questo codice :

HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<title>Prova su float img</title>
<link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
<div id="contenuto">
    [img]img/esempio.jpg[/img]
	

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
</body>
</html>

CSS

codice:

html , body{
border:0;
padding:0;
}

img{
float:right;
margin:5px;
}

l'ho provato con IE , FF e Opera e va sempre ; adattalo alle tue esigenze ed hai risolto

**Manuel.s** · 24-09-2006, 15:35

il codice che mi hai fornito funziona. nel mio caso però deve esserci dell'altro, forse per via di alcuni DIV annidati. Io credo sia un problema di accesso all'elemento, piu che di allineamento, questo perchè su IE funziona.
ho anche provato a dare un border 1px solid #000000 alla img con lo stesso risultato: lo vedo solo su IE...

Discussione: allineare testo è immagini

Strumenti discussione

Ricerca discussione

Visualizza

allineare testo è immagini

Re: allineare testo è immagini

Permessi di invio