CSS-problemi di layout

[Sandrocchio_0.1]

Salve gente ,
ho un problema nella costruzione del nuovo layout per la mia homepage in CSS e Xhtml.
L'idea è quella di costruire un layout che mantenga una certa "elasticità" all'interno della finestra, un po come le tabelle. Insomma modificando la finestra del browser il layout si dovrebbe adattare mantenedo gli oggetti in determinate posizioni.
L'unico problema che non sono riuscito a risolvere è dei due bordi alle estremità, per intenderci quelli che si dovrebbero allungare verso il basso. Forse è meglio se a questo punto vi dò l'esempio, link, già se provate ad aprire i preferiti dovreste vedere di cosa sto parlando.
Comunque, ho provato a giocare un po sulle dimensioni delle gif usate (che nell'esempio sono valore 100%) , ma non ho ottenuto nessuno risultato. Forse perchè il "div" che le contiene è di 400px, ma se lo cambio in % mi da dei problemi nella visualizzazione...

Vi mostro anche un pò di codice sperando che qualche buon anima mi aiuti a risolvere questo problema.
X-html

<div id="body">
		[img]immagini/index_17.gif[/img]
		[img]immagini/index_18.gif[/img]
		[img]immagini/header_02.gif[/img]
		[img]immagini/header_01.jpg[/img]
		[img]immagini/marina01.jpg[/img]
			<div id="text_home_top"><font class="text">It's a sign that.... ....elt and enjoy the trip.</font>
			</div>
			
			<div id="body_margin_bottom">
			[img]immagini/index_21.gif[/img]
			[img]immagini/index_22.gif[/img]
			</div>
  		</div>

CSS

#body {
	position:absolute;
	width:100%;
	margin: 0;
	padding: 0;
	color: #99CC33;
	top: 92px;
	border: 0;
	background-color: #99CC33;
	height: 500px;
}

/* Body Margin Components2*/
#left_margin2 {
	position:absolute;
	left:0px;
	height: 100%;
}

#header_page {
	position:absolute;
	left:35px;
	top: 10%;
}

#right_margin2 {
	position:absolute;
	right: 0px;
	height: 100%;
}

/* Body Margin bottom*/
#body_margin_bottom {
	width:100%;
	height: 11px;
	margin: 0;
	padding: 0;
	color: #99CC33;
	border: 0;
	background-color: #99CC33;
	top: 100%;
	position: absolute;
}

/* Body Margin Components bottom*/
#left_margin_bottom {
	position:absolute;
	left:0px;
	height: 100%;
}

#right_margin_bottom {
	position:absolute;
	right: 0px;

[Jerry Masslo]

non lo fa sempre, dipende dai calcoli che fa ie per rendere le percentuali che non gli corrispondono ai pixel.

puoi provare così; dividi il layout in tre zone, sopra sotto e centro, dai a tutte il colore di sfondo e i bordi come li hai solo al centro, poi nelle due zone estreme aggiungi uno sfondo non ripetuto posizionato a destra che riproduca il bordo arrotondato mancante e infine piazzi in posizione assoluta a sinistra il rimanente angolo, tutto questo perché, sembra che sia a destra che sorgano i problemi con queste cose.

Il tutto non sarebbe granché logico, stai cercando di riprodurre un layout classico per tabelle senza tabelle.

[Sandrocchio_0.1]

grazie per il suggerimento, ma non mi è molto chiaro. Credo che la tecnica che mi suggerisci l'ho già applicata, e la puoi vedere funzionare se incominci a "schiacciare" il sito in senso orizzontale.
Io voglio creare la stessa cosa, ma in verticale.
Hai qualche altro suggerimento?
P.s. Lo sò che quello che sto chiedendo è una tipica funzione da tabella, ma sto provando a seguire i principi della W3C, che chiedono l'uso delle tabelle esclusivamente per l'utilizzo per cui sono state ideate e non per impostazoni di layout.
Va beh, fammi comunque sapere se hai qualche idea.
grazie

[Jerry Masslo]

sul w3c hai in parte ragione, nel senso che ok per non ricorrere alle tabelle ma se poi nei div infili elementi che servono per il layout di base siamo al punto di partenza, cioè per essere completamente aderenti nell'xhtml non dovrebbero starci elementi che non siano contenuto, comumque la virtù sta nel mezzo ma nel tuo caso la deviazione non è molto limitata.

Tornando al problema, cerco di essere più chiaro.

I problemi nascono perché la pagina è in percentuale e pare che ie nel calcolare la posizione di un elemento assoluto dentro uno relativo ridimensionando la finestra sia un po' approssimativo, per questo ti suggerivo di non mettere immagini a destra in posizione assoluta ma in quella zona usare l'immagine come sfondo ripetuto solo verticalmente e posizionato a destra, finita l'immagine andando da destra verso sinistra si comincia a vedere il colore di sfondo normale fino ad arrivare al bordo dove piazzi l'immagine in posizione assoluta, perché sembra che sia col right che ie cominci a confondersi, puoi anche non usare i bordi così non incappi anche in problemi di box model.

L'altro ighippo che c'è nel tuo layout è l'uso di elementi in pixel come le immagini dentro un contenitore in percentuale che in condizione di non avere capacità sufficiente fanno debordare l'elemento in pixel, almeno con opera succede così. Per questo puoi provare a usare anche le immagini in percentuale, sai come si fa? In questo caso i problemi sorgono coi caratteri che soffrono il ridimensionamento in percentuale quindi per il menù se vuoi usare quelle immagini dovresti usare il float per far saltare su un'altra linea le voci che non stanno più nella prima.

[Sandrocchio_0.1]

Ho afferato il concetto del secondo problema riferito al testo del menù; sarà la prossima cosa che farò.
Per il momento mi concentro su questi benedetti bordi. Ho fatto come mi hai detto, e in parte ho risolto il problema. Infatti la colonna di destra adesso va bene, link, ma quella di sinistra ancora non mi funziona come vorrei. Ho provato a settare le misure height sia del div che dell'immagine stessa su 100%, ma niente da fare.
Ti appiccico un po di codice, vedi se riesci capirci qualcosa.
Grazie ancora
Xhtml

<div id="body">
	 	[img]immagini/index_17.gif[/img]
		..........
		..........			</div>
			
			<div id="body_margin_bottom">
			[img]immagini/index_21.gif[/img]
			[img]immagini/index_22.gif[/img]
			</div>
		</div>

CSS

/* Body */
#body {
	position:absolute;
	width:100%;
	margin: 0;
	padding: 0;
	color: #99CC33;
	top: 92px;
	border: 0;
	background-color: #99CC33;
	height: 100%;
	background-image: url(immagini/index_18.gif);
	background-repeat: repeat-y;
	background-position: right top;
}

/* Body Margin Components2*/
#left_margin2 {
	position:absolute;
	left:0px;
	height: 100%;
}

[Sandrocchio_0.1]

Ormai ho gli occhi che mi escono dalle orbite
Mi piaceva un casino fare le cose fatte bene con un bel layout liquido....ma ca.....se dura.
Ho un altro quesito...
Come mai la barra inferiore del mio layout segue il testo e non l'insieme degli oggetti racchiusi in quel "div". Se si espande la finestra del browser al massimo, si nota che il bordo inferiore mi taglia le immagini all'interno del "div" a cui dovrebbe sottostare.
Bah.....ma questi CSS, non dovevano semplificare la vita?!?!

[Jerry Masslo]

I css semplificano se non si vogliono rifare cose che venivano facili con le tabelle senza tabelle altrimenti potrebbe diventare complicato mettere a punto quel tipo di layout, comunque il tuo non lo è particolarmente. Per il div che non segue le immagini, dipende dal posizionamento assoluto, anche se un relative lo assoggetta per la posizione lo stesso rimangono indipendenti per altre cose, comunque mi pare tu stia abusando del posizionamento assoluto, di solito le cose all'apparenza vengono più facili ma poi sorgono complicazioni, per posizionare quell'immagine dovresti usare un float.

Ripensandoci credo che dovresti fare così, intanto la gif con l'height al 100% non credo assicuri sempre efficienza, quello è un tipico espediente da tabella, poi per la parte centrale non c'è bisogno di immagini, basta un colore di sfondo e i due bordi, mentre per le parti superiori e inferiori dovresti fare al modo che ti avevo detto.

[ilduca69]

Un altro modo: crea un DIV contenitore in cui dai la dimensione in pixel;
il resto farà riferimento a queso DIV.

<div id="contenitore">
<div id="1">....</div>
<div id="2">....</div>
ecc ecc
</div>



div#contenitore {width: 800px}
div#1 {width: 100%}
div#2 {width: 75%}

puoi sempre applicare il box model hack per forzare Internet Exploder a mantenere le giuste dimensioni.

[Sandrocchio_0.1]

Dopo svariati tentativi ho abbandonato quel tipo di tecnica.
Adesso ci sto riprovando, questa volta però con lo stesso metodo indicato da ErDUCA59 .

Ho creato un box con background verde a sua volta contenuto in uno più grande di giallo. Ho poi modificato e sistemato le gif per gli angoli del box giallo (posizionati in absolute). Adesso però ho qualche difficoltà con quelli del box verde contenuto dal giallo
L'angolino verde si sinistra si è posizionato perfettamente nella posizione, ma quello di destra non ne vuole sapere (guarda un pò), probabilmente è lo stesso problema a cui Maslo mi aveva messo in guardia.
Il fatto è che non riesco ancora ad afferare come i CSS posizionino gli elementi all'interno del box. Ci sono diversi punti che non riesco a capire, uno su tutti quando usare absolute e quando relative, a cosa fa riferimento uno e cosa l'altro.
Poi un'altra cosa che mi lascia perplesso è l'anteprima di Dreamweaver; perchè a volte mi visualizza gli oggetti in posizioni diverse dal browser?? :master:

In dreamweaver mi mostra gli angoli inferiori in alto, mentre in EX sono al posto giusto, nel bordo inferiore.

clicca per confrontarlo

[Marcolino's]

http://www.alazanto.org/ a me sto sito fa morire e ed è tutto a layer.