pos. relativo dei DIV... errore

[FreeManX]

Ciao,
ho un problema che mi sta facendo imbufalire e' non riesco a risolverlo.

ho la seguente regarchia:

<div id="bodyPage">
  <div id="CVMenu">
  </div>
  <div id="CVBody">
  </div>
</div>

Con associati i seguenti fogli di stile:

#bodyPage {
	position: absolute;
	left: 2.5%;
	top: 180px;
	width: 95%;
	height: auto;
	z-index: 7;
}
#CVMenu {
	position: relative;
	left: 0%;
	top: 0px;
	width: 30%;
	height: auto;
	z-index: 8;
}
#CVBody {
	position: relative;
	left: 30%;
	top: 0px;
	width: 70%;
	height: auto;
	z-index: 9;
}

Ora quello che voglio ottenere da tutto cio' e avere due div affiancati, uno che faccia da menu e l'altro da contenuto (come si faceva con le due colonne e una riga delle tabelle).

Il problema sta che con dreamwear (vedi fig1) li vedo correttamente affiancati dentro il frame bodyPage, ma se li apro con IE,Firefox,Mozilla,Opera li vede come in figura (vedi fig2).

Perche dove sbaglio???


Allego figura 1 (nell'altro post figura 2)

[FreeManX]

risultato in ie

grazie

[Mich_]

Credo che l'effetto sia dovuto al fatto che la somma di 30% + 70% e` maggiore di 100% (per qualche strano effetto di arrotondamento). Non mi stupirebbe se l'effetto sparisse se allarghi o resstringi la finestra del browser.
E magari IE interpreta le percentuali rispetto al body, anziche` rispetto al blocco che li contiene.
Se usi HTML 4 o XHTML con DTD corretta l'errore dovrebbe sparire anche da IE 6.

La cosa consigliata dai guru del CSS mi pare sia questa:

#bodyPage {
	left: 2.5%;
	top: 180px;
	width: 95%;
	height: auto;
}
#CVMenu {
	top: 0px;
	width: 30%;
	float: left;
	height: auto;
}
#CVBody {
	top: 0px;
	width: 100%; /* oppure non mettercelo */
	float: left;
	height: auto;
}

Se poi devi metterci un nuovo blocco sotto ai due, devi mettere clear:left; a tale blocco.

[floyd46]

ciao
ho messo in rete la pagina che ti interessa, sempre che tu nn abbia già risolto; la puoi vedere al seguente indirizzo:
http://www.extrowebsite.com/prove.htm
L'ho provata su IE 6.0; Opera e Firefox.
Se posso darti un consiglio: non "fossilizzarti" su quello che vedi in Dreamw e quello che ottieni nei browser. Meglio se ti scrivi il CSS con il notepad e correggi il codice in base a quello che ti interessa. Altrimenti non ne esci +.
Saluti

[nickmadison]

dreamveawer nn visualizza correttamente il layout come è impostato nei CSS, ti conviene usare un editor testuale e tenere aperta la pagina sul browser nel quale farai un semplice "refresh" per vedere di tanto in tanto le modifiche che stai apportando.

[FreeManX]

Prima di tutto grazieee a tutti!
i CSS li scrivo con topstyle ancora non li conosco molto bene, percui mi servono degli strumenti che scrivono roba per me

In parte avevo risolto, utilizzando gli absolute, che se annidiati (i div) a quanto pare mi funzionano come i relative
Ma questo porta ad un altro casotto, in quanto o la necessita che un livello stia attaccato alla fine della pagina, indifferentemente dalla lunghezza, ma cio non riesco ad ottenerlo! ora dopo il post mi rimetto a provare!

Mich_ cosa significano i due attributi float e clear???? (cmq il risultato era uguale anche con Firefox )

grazie a tutti per ora non ho altro da dire mi sembra

[lleffe]

Originariamente inviato da FreeManX

Mich_ cosa significano i due attributi float e clear???? (cmq il risultato era uguale anche con Firefox )

float è l'equivalente CSS dell'align. più o meno. anzi meno che più, ma tantè

clear lo usi per ripristinare l'allineamento degli oggetti successivi all'oggetto con proprietà float. altrimenti anche tali oggetti avranno l'ereditarietà del float

[FreeManX]

Originariamente inviato da lleffe

float è l'equivalente CSS dell'align. più o meno. anzi meno che più, ma tantè

clear lo usi per ripristinare l'allineamento degli oggetti successivi all'oggetto con proprietà float. altrimenti anche tali oggetti avranno l'ereditarietà del float

danghiu!!!!

Come finisco l'impaginazione ve la posto cosi dite cosa ne pensate! dato che e' la prima che realizzo completamente con CSS e DIV, mandando a casa le tabelle!

[FreeManX]

Ho un altro problema la struttura che sopra mi avete indicato e' di altezza fissa, ma io voglio che si espanda dinamicamente, dato che ci puo stare testo +/- lungo
Ma non ci riesco, o meglio riesco ad espandere il livello CVBody ma bodyPage non segue!

Come si fa???

grazie per la pazienza

[floyd46]

Originariamente inviato da FreeManX
Ho un altro problema la struttura che sopra mi avete indicato e' di altezza fissa, ma io voglio che si espanda dinamicamente, dato che ci puo stare testo +/- lungo
Ma non ci riesco, o meglio riesco ad espandere il livello CVBody ma bodyPage non segue!

Come si fa???

grazie per la pazienza

ciao
se ti riferisci al layout che ti ho postato io, puoi fare delle prove ad inserire in una colonna + testo e nell'altra meno.
elimina, dal CSS, l'altezza in px e vedi cosa viene fuori.
saluti
-Floyd-