tableless: div innestati in altri div, ma qualcosa nn quadra...

[TheClue/Nash]

salve ragazzi, vi espongo rapidamente il problema. sto cercando di migrare al layout di tipo tableless, e quindi mi sto cimentando con tutti gli inghippi del posizionamento dei div mediante css. non posso non ammetterlo: e' davvero poco intuitivo. vi espongo il problema:

ho un layout in cui ho un div di classe "header-fla", sotto il quale ho un div di classe "container", all'interno del quale ho due ulteriori div che mi fungono da menu' laterale (classe "left", contenente a sua volta altri div) e da "corpo" del testo (un div di classe "corpo", sempre contenitore per ulteriori div). senza che mi metto a postar codice, la pagina e' tranquillamente accedibile da www.studio-blue.it e il foglio di stile utilizzato e' su www.studio-blue.it/blue.css

dovendo aggiungere una piccola barra di menu' in flash sotto il contenuto testuale della pagina ero certo che sarebbe bastato aggiungere un altro div di classe "header-fla" (o qualcosa di simile, chiamiamolo "footer-fla") a valle del </div> di chiusura di container.

invece ho scoperto che il comportamento del mio layout nn e' come quello che avevo previsto. aggiungendo un po' di bordi per capire meglio i "limiti" dei miei div ho scoperto che il div "container" è alto una sola riga. Esso contiene semanticamente i div "corpo" e "left", ma questi lo "scavalcano".

Mi spiego con un esempio. supponiamo che "corpo" (il cui testo e' dinamico e quindi non posso saperne a priori l'altezza) misuri 200px in altezza, allora il mio footer-fla deve essere posizionato 200px sotto l'inizio di "corpo". Invece, cosi' non è: footer-fla viene posizionato sotto container, ma container non è alto 200px, cioe' container non uniforma la sua altezza a quella del div corpo di 200px che lo contiene. Indipendentemente dall'altezza di corpo, container rimane della stessa altezza (quella di un div vuoto, cioe' una riga di caratteri) e quindi footer-fla va a sovrapporsi a corpo.

in un layout a table quando andavo ad inserire un qualunque elemento in una tabella, la TD uniformarva la sua altezza, cosi' un elemento dopo il </table> di sicuro finiva a valle del contenuto soprastante. come mai con i css non sono riuscito nell'intento?

vi ringrazio molto di tutto l'aiuto, sto veramente impazzendo!

[serialkiller]

senza leggermi il css, immagino che i due div "left" e "corpo" siano in float, quindi, molto probabilmente non ha ripulito i flottaggi nel tuo nuovo div a chiusura.

quindi:

#footerFla {clear:both;height:40px;}

tutto dovrebbe andare al suo posto

fammi sapere

[TheClue/Nash]

avevo provato, con clear, ma non cambia nulla...evidentemente ho sbagliato qualcosa nel layout sovrastante. ecco cmq gli stili coinvolt, qualora possano servirti a capire meglio la situazione:

div.container {
height: auto;
position: relative;
margin: 0 auto;
width: 770px;
text-align: left;
}

div.left {
position: absolute;
top: 0px;
left: 0px;
width: 280px;
}
div.corpo {
position: absolute;
top: 0px;
left: 281px;
width: 479px;
text-align: justify;
padding: 10px 0px 10px 10px;
}

provando a togliere il position: relative dal container succende un pastrocchio assurdo...e questa e' un'altra cosa che ancora nn sono riuscito a spiegarmi (container finisce sopra header-fla)

[serialkiller]

dunque, c'è un po' un casotto, comunque....

il codice css, mettilo tutto in blue.css.

Se ho capito...blue.css diventa

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #ededed;
	margin: 5px 0px 0px;
	padding: 5px 0px 0px;
	text-align: center;
	font-size: 75%;
	color: #444;
}

div#header-fla {
	background:#004A74 url(img/sfondohome01.jpg) repeat-x left top;
	text-align: center;
	margin: 0;
	padding: 0;
	height: 360px;
}

div#container {
	position: relative;
	margin: 0 auto;
	width: 770px;
	text-align: left;
}
div.subcol {
	padding: 20px;
}
.citazione {
	font-size: larger;
}
div.left {
	float:left;
	width: 280px;
}
div.corpo {
	float:left;
	width: 479px;
	text-align: justify;
	padding: 10px 0px 10px 10px;
}
.enfatizzato {
	font-weight: bold;
	font-variant: small-caps;
	color: #000;
}

div#left-home-col {
	height: 40px;
	background-color: #004A74;
}
#subcol-home {
	font-size: larger;
		color: #004A74;
}
div#corpo-home {
	border: 1px solid #CCC;
	padding: 10px;
}


div#footerFla {clear:both;height:40px;margin:0 auto;border:1px solid black;}

e la pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="blue.css" rel="stylesheet" type="text/css" />
<title>Studio Blue - Soluzioni Multimediali</title>
</head>
<body>
<div id="header-fla">
<object type="application/x-shockwave-flash" data="home.swf" width="770" height="360" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="home.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ededed" />
</object>
</div>

<div id="container">
  <div class="left">
		<div id="left-home-col"></div>
	   	<div class="subcol" id="subcol-home">
	   		<div>
			"Amiamo la dinamite delle idee nuove, dei fatti prodigiosi, dei nuovi colori e delle nuove immagini"
			</div>
			<div style="text-align: right; padding-top: 11px">Filippo Tommaso Marinetti</div>
		</div> 
			
  </div>

  <div class="corpo">
	<div id="corpo-home">
		

<span class="enfatizzato">Studio
		  Blue</span> nasce a Salerno nel 2005 con l'obiettivo di fornire soluzioni creative avanzate per l'e-business e l'immagine aziendale secondo i pi&ugrave; elevati standard qualitativi di design multimediale e di tecniche di advertising tradizionali nelle fasi di consulenza, sviluppo e gestione.</p>
		

<span class="enfatizzato">Studio Blue</span> pone come obiettivi primari la ricerca creativa in sinergia con la costante innovazione tecnologica, nel rispetto e in piena collaborazione con il cliente e affinch&egrave; ogni lavoro raggiunga i massimi livelli tecnici ed estetici che le tecnologie sono in grado di fornire. </p>

	</div>
  </div>
  
  <div id="footerFla">io sono un footer</div>
  
</div>
</body>
</html>

Nel div che contiene l'animazione flash, ho fatto alcune modifiche, non potendo testare, dovrebbe funzionare senza usare una classe e un id per ottenere la medesima cosa, idem per altre situazioni che non ho controllato.

[serialkiller]

Aggiungo:

Il tuo filmato flash è sensibile agli ultimi aggiornamenti di IE, ti consiglio di sistemarlo, alcuni link

spiegazione e una delle soluzioni:
http://www.magnificaweb.it/flashobject/

Soluzione Adobe:
http://www.adobe.com/support/flash/downloads.html

[TheClue/Nash]

sto sistemando i div secondo la tua soluzione che funziona perfettamente...ti ringrazio molto! (ma dove era il mio errore?)

non appena termino do una occhiata a quei link. il punto e' che manco ce l'ho IE...dopo che la pagina era stata validata piu' di tanto avevo smesso di preoccuparmi...

[serialkiller]

ho aggiornato un po' il css....

se non ci sono motivi logici, è inutile fare una classe e un id per lo stesso div.

tipo:

div.left {
float:left;
width: 280px;
}

e

div#left-home-col {
height: 40px;
background-color: #004A74;
}

ha senso solo se div left, lo userai per altri div che avranno le stesse proprietà e con l'id potrai gestire, come hai fatto, il colore di sfondo o altri paramentri, altrimenti, tanto vale usare solo l'id e unire il tutto.

Per il discorso di IE, io lo uso per testare, ed ho notato la cosa, visto che sei ancora in fase di lavorazione, ti cosiglio di attuare una delle soluzioni.

scappo

[TheClue/Nash]

cio' e' davvero curioso...

dopo aver modificato il codice secondo i tuoi consigli e aver testato il tutto con la volpe, mi ritrovo un safari che fa i capricci. semplicemente IGNORA gli stili contenuti in blue.css, con prevedibili grotteschi risultati....

ho controllato tutti i codici...nn vedo dove possa essere l'errore...

[TheClue/Nash]

cosi' come era apparso cosi' l'errore e' scomparso riavviando safari. forse il foglio di stile era nella cache (anche se l'avevo gia' svuotata un paio di volte). bon tanto meglio