Foto allineata a testo "fluido"

[Luca_pluatrco]

Ciao,

voglio posizionare in un contenitore un'immagine e del testo a fianco. Il testo può essere molto lungo, ma in ogni caso non deve andare sotto l'immagine (quindi devono sembrare come due colonne alte 100%). E questo lo avrei anche risolto settando opportunamento la width del container del testo (a dx dell'immagine).

Essendo il codice per un template, nello stesso contenitore l'immagine potrebbe anche non esserci, ma con il codice che ho attualmente, anche se il testo va (giustamente) a posizionarsi tutto a sx dove prima c'era la foto, tuttavia non occupa TUTTO lo spazio (come se avesso width:100%).

Ho anche applicato i consigli su un intervento di questo forum, ma senza successo.

E' possibile ottenere una sorta di "incolonnamento" di testo e immagine, che tuttavia mantenga il testo completamente fluido?

Qui il codice:

Dialog
{
	position: relative;	
	top: 150px; 	
	background-color: White;
	border:1px solid Black;
	z-index:30 !important;	
	width: 600px;
	margin: 0 auto;
	font:9pt Calibri;
}


/* -- float.clear -- force containment of floated elements */
.DialogHeader:after, .DialogBody:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
	min-height:0;
}

.DialogBody
{
	clear:both;
	float:left;
	padding:10px;
}

.DialogBodyIcon
{
	float:left;
	display: inline;
}
	
.DialogBodyContent	
{      float:left;
	width:87%;	
	padding-top:5px;
	display: inline;
}

.DialogFooter{	clear:both; }


<div class="Dialog">
     <div class="DialogBody">
	    <div class="DialogBodyIcon">
		  [img]target.jpg[/img]
	    </div>
	    <div class="DialogBodyContent">
				This is just a prompt message as example....

		<div class="DialogFooter">
			This is the footer (optional)
		</div>
     </div>
</div>

Grazie mille come sempre!!

[Mich_]

Io pero` userei una marcatura diversa:

<div class="Dialog">
    <div class="DialogBody">
	[img]target.jpg[/img]
	<p class="DialogBodyContent">
		This is just a prompt message as example....
	</p>
	<p class="DialogFooter">
		This is the footer (optional)
	</p>
    </div>
</div>

Ho lasciato i due blocchi Dialog e DialogBox, anche se cosi come sono non hanno molto senso (due blocchi innestati esatatmente uno nlell'altro nonservono), pensando che forse c'e` qualche altro elemento opzionale che qui non si vede.

Dopo di cio`, il CSS dovrebbe essere di questo tipo:

Dialog { /* va bene, tranne il font che e` troppo piccolo. */ }
DialogHeader:after, .DialogBody:after { /* OK */ }
.DialogBody {
	/* clear:both; - non serve */
	/* float:left; - non serve */
	padding:10px;  /* non mi piace perche` rende in modo diverso in IE */
}
.DialogBody img {
	float:left;
	/* display: inline;  - e` pleonastico - puo` servire per IE se ci sono margini */
}
.DialogBody p {
	float:left;
	width:87%;	/* forse e` un po' troppo */
	padding-top: 5px;
	/* display: inline;   pleonastico */
}

Se definisci un font in px, devi sapre che i browser possono sovrascrivere tale misura: io conun font di 9 px non leggo nulla: il mio font standard e` 14px, con un font minimo di 12px (vuol dire che tutti font piu` piccoli vengono forzati a 12)

[Luca_pluatrco]

Ciao Mich_

Io pero` userei una marcatura diversa: codice:
<div class="Dialog">
<div class="DialogBody">
[img]target.jpg[/img]
<p class="DialogBodyContent">
This is just a prompt message as example.... </p>
<p class="DialogFooter">
This is the footer (optional) </p>
</div>
</div>

Hai ragione, ho esposto male in quanto era solo un esempio. A parte qualche (raro) caso, nel dialogBody ci vanno controlli asp.net (nn noti a priori) o altro codice HTML complesso, per questo ho pensato di usare un div, per racchiudere questa sezione.

Per il CSS, di nuovo hai ragione, nel senso che ho "eliminato" le parti nn salienti, quindi risulta con un "senso" diverso.

In particolare la width:87% mi era sembrato un buon compromesso per ottenere l'effetto "2 colonne", cioe' per evitare che il testo fluisse sotto l'immagine se piu' lungo dell'altezza di questa (e così funziona).
Tuttavia lo stesso codice deve essere usato in un altro contesto dove l'immagine non c'è e il contenuto deve occupare TUTTA la larghezza.

Dopo qualche tentativo, ho visto che potrei risolvere ciò creando una seconda classe per il DialogBody che sovrascriva il comportamento di default e che possa essere applicata usando il concetto delle classi multiple. Ti pare abbia senso?

Qui ti posto TUTTO il codice, dove ho messo dei commenti sui problemi ancora aperti (spero nn sia troppo prolisso, ma così è possibile fare subito copia/incolla per vedere il problema in IE) PS.Il font-size così lo ha voluto espressamente il capo...

Grazie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DIALOG-PROMPT</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

/*Makes the background darker and no selectable*/
.DialogBack
{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;    /*PROBLEMA:  Se necessita lo scroll verticale lo sfondo termine a fine pagina!!!*/
	/*background: Transparent url(header_bkg.png) top left repeat;   */
	z-index: 29 !important;	
}

.Dialog
{
	position: relative;	
	top: 150px; 	
	width: 600px;
	margin: 0 auto;	
	background-color: #ffffff;
	border:1px solid #000000;
	z-index:30 !important;	
	font:9pt Calibri;
}


/* -- float.clear -- force containment of floated elements */
.DialogHeader:after, .DialogBody:after, .Dialog:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
	min-height:0;
}

.DialogHeader
{
	/*float:left;*/      /*Fa visualizzare bene l'header in IE (altrimenti titolo nns ivede e immagine fuoriesce), ma in FF si stringe tutto a sx (e con width:100% fuoriesce dato che c'è padding)*/      
  	padding:8px 8px 3px 8px;
	margin:0;
	background-color: #3E8BFF;
    border-bottom:1px solid Silver;	
	color:#ffffff;
	font-weight:bold;
	font-size:11pt;
}

.DialogTitle
{	
	width:80%;
	float:left;
}

.DialogMenu{	float:right;}

.DialogBody
{	
	clear:both;     /*Altrimenti in IE la img nel DialogBody rimane sulla dx*/
	padding:10px;    
}

.DialogBodyIcon
{
	float:left;
	margin-right:10px;
}
	
.DialogBodyContent	
{
    float:left;
	width:87%;
	padding-top:5px;
}

.DialogFooter
{	
	clear:both;
	margin-top:5px;
	padding:5px;
	background-color: Silver;
}

.DialogButtons{	float:right;}


.DialogButtons input
{
	margin-top:15px;
}

/*------------------------------------------------------------------------------------*/


</style>
</head>
<body>

<div class="DialogBack">
	<div class="Dialog">
	
		<div class="DialogHeader">
			<span class="DialogTitle">The Dialog's title here</span>
			<div class="DialogMenu">
				[img]close.gif[/img]		
			</div>
		</div>
		
		<div class="DialogBody">
			<div class="DialogBodyIcon">
				[img]target.jpg[/img]
			</div>
			<div class="DialogBodyContent">
			
			This is just a prompt message as example....
			(Copiare ripetutamente la riga per vedere che il testo rimane incolonnato)
			
			</div>
			
			<div class="DialogButtons">				
				<input type="submit" value="Ok" />
				<input type="button" value="Cancel" />				
			</div>						
		</div>
		
		<div class="DialogFooter">
			This is the footer (optional)
		</div>
			
	</div>
</div>
</body>
</html>

[Mich_]

Credo che per un progetto nuovo dovresti usare la DTD XHTML 1.0 strict: e` molto piu` proiettata al futuro (e ad IE8).

Per le due-colonne / una-colonna, credo che potrebbe bastare togliere la larghezza:
se c'e` l'immagine (ma non deve essere racchiusa in un suo <div> personale) si prende il suo posto, se manca o se e` piccola lo spazio viene lasciato all'altra colonna.
MA ...
ma devi usare marcatura semantica, altrimenti tutti (o forse solo parte di) questi discorsi cadono.

Un testo inserito direttmente in un <div> non e` semanticamente corretto.
L'immagine inserita in un <div> non ha senso (e crea poi problemi nel CSS).

Come dire: make it simpler ... you'll have less problems.

E dato che ci siete, potreste dare uno sguardo all'accessibilita`: fare una pagina accessibile non costa di piu`, ma occorre impostare la cosa correttamente all'inizio, altrimenti poi rendere accessibile costa.
Il primo passo (a costo zero assoluto) e` usare XHTML Strict; il secondo e` seguire i 22 requisiti della legge 4/04. Per il resto occorre piu` esperienza e comunque non e` cosi` importante, una volta che i 22 requisiti sono rispettati.

[Luca_pluatrco]

Un testo inserito direttmente in un <div> non e` semanticamente corretto. L'immagine inserita in un <div> non ha senso (e crea poi problemi nel CSS).

hai ragione, ma il mio codice HTML costituisce un template, per cui non so a priori cosa ci sarà dentro quel div.
In alcuni casi del puro testo, ma in altri dei controlli asp.net o altro codice HTML, per questo motivo pensavp di usare un div.

Purtroppo se tolgo la larghezza al DialogBody, nel caso ci sia testo lungo questo si posiziona sotto l'immagine e questo non è voluto. Penso quindi ptero' per una classe che imposto width:auto quando necessario (ovvero quado non c'è l'immagine).

Sapresti dirmi come posso invece risolvere il problema del DialogHeader? Se lo imposto a float, in IE si sitema bene, mentre in FF si restringe tutto a sx e se imposto width:100% poi fuoriesce dato che uso del padding (necessario direi) per l'header.

Grazie

[Mich_]

Attenzione che la semantica e` importante: una semantca errata penalizza il posizionamento nei motori, come pure certi errori di sintassi.
Occorre che lavori sul template. lato server (o che cambi gestore del template - CMS).
Un <div> in piu` non da` problemi, un codice errato si`.

Sapresti dirmi come posso invece risolvere il problema del DialogHeader? Se lo imposto a float, in IE si sitema bene, mentre in FF si restringe tutto a sx e se imposto width:100% poi fuoriesce dato che uso del padding (necessario direi) per l'header.

Non e` risolvibile direttamente, ma puoi impostare il div al 100% e poi usare il margin nel blocco interno. Nota che uno <span> usato in quel modo e` errato: il testo deve stare dentro un

o nel tuo caso dentro un <hX>, dato che il tuo testo e` un titolo.

[Luca_pluatrco]

Grazie mille dei suggerimenti preziosi!

Li esporro' al boss...poi ti farò sapere la risposta (se non altro per curiosità)

[Luca_pluatrco]

Allora l'idea del tag <hX> è stata accettata, mentre per il testo nel DialogContent ha voluto mantenere la soluzione attuale in quanto altrimenti avrebbe richiesto troppo tempo.

Grazie comunque dei consigli!!