Ciao Mich_
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.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>
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
codice:<!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>

PS.Il font-size così lo ha voluto espressamente il capo...
Rispondi quotando