Aiuto in costruzione layout

**nomade_k** · 22-09-2010, 00:12

Buona sera,

mi trovo nuovamente a domandare il Vostro aiuto, per quanto vorrei farne a meno (non per Voi ma perché preferire fare da solo).

Ho un "div" contenitore di 950px all'interno del quale dovrei ottenerne altri due, di cui, uno a sinistra del contenitore principale costituito da una fascia larga 250px e lunga quanto necessario (nel senso che vorrei si allungasse con, l'eventuale, scorrere verticale della pagina) e l'altro con i contenuti, posizionato a destra della fascia.
In seguito vorrei aggiungere un logo, fisso ai piedi della barra (che scorra in giù con l'andare della pagina).

Mi domandavo quale fosse il modo migliore per procedere.

Per chiarimenti sui dubbi o sul layout, sono, ovviamente, a Vostra disposizione.

Segue sorgente pagina e Css, allo stato attuale.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
	<head>
		<title>
			Lorem Ipsum
		</title>
		<meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget sapien ipsum, a placerat lorem. Nam vel elit sed odio auctor elementum a at nisi. Etiam pulvinar fringilla augue nec rhoncus. Morbi rhoncus mollis tellus, ut vulputate mauris lobortis nec. Suspendisse potenti. Pellentesque vehicula vulputate erat id mattis. Pellentesque facilisis varius suscipit.">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="keywords" content="Lorem,ipsum,dolor,sit,amet,consectetur,adipiscing,elit">
		<meta name="language" content="en-GB">
		<meta name="title" content="Lorem Ipsum">
		<meta name="robots" content="all">
		<meta name="googlebot" content="noarchive">
		<meta name="reply-to" content="Lorem IpsumATIpsum Lorem.com">
		<meta name="author" content="Lorem Ipsum">
		<meta http-equiv="content-language" content="en-GB">
		<meta http-equiv="Window-target" content="_self">		
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="pragma" content="no-cache">

		<link rel="stylesheet" type="text/css" media="screen" href="styles/index.css">
		<link rel="stylesheet" type="text/css" media="print" href="styles/print.css">
		<link rel="stylesheet" type="text/css" media="aural" href="styles/aural.css">	
	</head>
	<body>
		<div>
			<div id="blue">
				<p id="logo">
					Rr
				</p>
			</div>
			<div id="content">
				<ul>
					[*]
						<h2>
							Lorem
					
					[*]
							Ipsum
						</h2>
					
				[/list]
			</div>
		</div>
	</body>
</html>

codice:

@charset "UTF-8";

html body			{
	  				background-color:	#000;
					height:			100%;
					text-align:		left;
					font-family:		"Century Gothic", Arial, Helvetica, sans-serif;
					font-size:		12px;
					padding:		0;
					margin:			0 auto;
					color:			#fff;
					font-weight:		bold;
					letter-spacing:		1px
	  			}

div				{
					overflow:		hidden;
					height:			100%;
					max-width:		950px;
					width:			950px;
					background-color:	#000;
					line-height:		20px;
					text-align:		left;
					border:			1px solid #fff;
				}

body>div			{
					min-height:		auto;
					height:			100%;
					max-width:		950px;
					width:			950px;
					margin:			0 auto;
					padding:		0
				}
					
div#blue			{
					
					position:		relative;
					left:			-100px;
					max-width:		250px;
					width:			250px;
					height:			650px;
					background-color:	#00f;
					margin:			0 5px 0 100px
				}

div#content			{
					dispaly:		inline;
					float:			right;
					max-width:		750px;
					width:			750px
				}

h3,a:link,a:visited,a:active	{
					background:		#000;
					color:			#fff;
					padding:		2px;
					font-size:		15px;
					width:			55%
			
				}

h2				{
					background:		#000;
					color:			#fff;
					padding:		2px;
					font-size:		25px;
					width:			55%
			
				}

a:hover 			{
					text-decoration:	underline
				}

Grazie mille di tutto.

**Mich_** · 22-09-2010, 08:59

Hai introdotto degli errori logici e strutturali, che permettono ai browser di fare quello che gli pare.

Un blocco non puo` essere inline, primo perche` non e` piu` un blocco (erorre semantico) e poi perche` un oggetto inline non puo` contenere altri oggetti di tipo blocco (<ul> e[*] sono di tipo blocco).

pertendo dal tuo HTML, il CSS deve essere del tipo:

codice:

html body	{
	background-color:	#000;
/*	height:			100%;			/* non conviene metterlo */
	width: 			100%;			/* questo conviene */
	text-align:		left;
	font-family:		"Century Gothic", Arial, Helvetica, sans-serif;
	font-size:		12px;			/* questo e` pericoloso: potrebbe venir sovrascritto */
	font-size:		100%;			/* default del brwoser */
	padding:		0;
/*	margin:			0 auto;			/* non serve qui - e` gia` largo 100% */
	color:			#fff;
	font-weight:		bold;
	letter-spacing:		1px;
}

/* div			{					/* questo non lo analizzo - forse ti serve per altri div interni */

body>div	{						/* non e` sbagliato ma alcune versioni di IE non lo capiscono
									   meglio usare un id per definire il contenitore /*
	min-height:		100%;			/* vicevarsa di come lo avevi impostato */
	height:			auto;
	max-width:		950px;
	width:			auto;			/* meglio lasciare che si stringa se il browser e` piu` stretto */
	margin:			0 auto;
	padding:		0;
	background:		url(sfondo_bicolore.gif);	/* img 950x1px di cui 255px blu e il resto dello sfondo del content */
}	
body>div:after	{
	clear: both;
	/* ecc - vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
				
div#blue		{
	position:		relative;				/* non serve per questo layout (ma forse ti serve per i blocchi interni) */
	float:		left;					/* per affiancare i due blocchi */
/*	left:			-100px;				/* non ha molto senso */
/*	max-width:	250px;*/
	width:		250px;
/*	height:		650px;				/* meglio non metterlo - non puoi sapere la altezza del contenuto*/
/*	background-color:	#00f;		/* va usata la tecnica delle "false colonne" */
	margin:		0 5px 0 100px;		/* questo porta la larghezza totale a 355 px */
}

div#content	{
/*	dispaly:		inline;				/* questo e` sbagliato */
	float:		right;				/* ci puo` stare, anche se sarebbe piu` semplice float:left */
/*	max-width:	750px;*/
	width:		750px
}

Nota che la larghezza dei blocchi interni supera quella del contenitore, per cui i due non possono stare affiancati.
Anche eliminando i 100px di margin left nel #blue, questo rimane comunque di 255 px, che sommati ai 750 del content fa 1005px. Devi ridurre qualcosa.

**nomade_k** · 22-09-2010, 12:22

Chissà quando riuscirò ad imparare questi linguaggi come vorrei. Non pensavo di aver fatto, ancora, simili e tanti errori.

Armiamoci di pazienza.

Prima di tutto grazie infinite per avermi risposto.

Poi...

01) Perché non conviene mettere "height: 100%;"? Avevo preso spunto da qui showthread.php?s=&threadid=1423564.
02) Perché conviene, invece, "width: 100%;"? Devo specificare che va utilizzato il 100% dello spazio messo a disposizione?
03) "font-size: 12px;". Potrebbe venire sovrascritto?
04) "font-size: 100%;". Rappresenta il default del brwoser ma perché metterlo allora? E se volessi modificare il valore standard del browser?
05) "margin: 0 auto;". Non serve perché abbiamo impostato prima "width: 100%", ma perché è meglio un modo piuttosto che l'altro? Inoltre il "margin: 0 auto" non serve anche per centrare il contenuto?
06) "min-height: 100%;". "Viceversa di come lo avevi impostato"?
07) "width: auto;" E' meglio lasciare che si stringa in automatico, d'accordo, ma come faccio quindi a dire al parser quanto è largo il "div" contenitore?
08) "background: url(sfondo_bicolore.gif);" Quindi mi vuoi dire che è meglio usare un'immagine?
09) "body>div:after". Non dicevi ch'è meglio evitare queste sintassi? Oppure ho frainteso?
10) Mi puoi spiegare meglio il perché della Pillola? Ovviamente devo leggerla e informarmi meglio sul "clearing", ma vorrei qualche informazione in più.
11) "Tecnica delle false colonne"? Nel senso che in realtà colonne non sono perché trattasi di un'immagine?
12) "margin: 0 5px 0 100px;". "Questo porta la larghezza totale a 355 px". Avevo notato che modificava la larghezza, ma non ho capito il perché.

Ti ringrazio di nuovo per l'aiuto dato e per quello che spero mi darai e scusa la quantità di domande.

**Mich_** · 22-09-2010, 12:52

1. Se metti height:100% al body, il contenuto non supera l'altezza della finestra. A questo punto puoi effettivamente usare l'overflow in un oggetto interno, ma io preferisco lasciare lo scroll nel body. Personalemnte preferisco un bel
min-height:100% per far estendere il body (e html) a tutta altezza.

2. perche` altrimenti il body non si allarga al massimo e non ha poi senso centrare

3,4. Non puoi decidere tu quanto sono grandi i px dell'utente, quanto e` distante dal monitor, la qualita` del suo schermo e la sua acutezza visiva.
E comunque i browser (credo che ora lo possano fare tutti) possono sovrascrivere tale imposatazionie, forzando una misura minima. Quindi definire la dimensione del font e` come minimo fuorviante

5. Il margin 0 auto; serve per centrare un oggetto dentro un altro. Non ha senso nel body (che in alcuni brwoser coincide con la finestra) e assolutemente non serve nel html che coincide sempre con la finestra

6. il mio "viceversa" si riferisce a height e min-height

7. hai gia` fissato max-width. Non credo devi settare anche width

8,11. La tecnica si chiama "false colonne". E` stata affrontata molte volte e ci sono autorevoli articoli (vedi ad es. tra i "link utili"). Fa riferimento a quella tecnica.

9 ho lasciato il tuo body>div perche` non so come vuoi chiamare il tuo contenitore.

10. E` argomento molto trattato. per info vedi i molti thread sull'argomento

12. Vedi il capitolo "box model" di qualsiasi guida CSS.

**nomade_k** · 22-09-2010, 13:45

Ti ringrazio, specialmente per la pazienza.

Ti chiederei un'ultima cortesia, libero di mandarmi al diavolo

, se riaffronto il css dall'inizio, posso sottoporti i vari passaggi in modo da non creare pasticci?

**Mich_** · 22-09-2010, 15:05

Va bene. Non so se io, ma qualcuno nel forum c'e` sempre (quasi) che da` una mano.

Comunque al prossimo passo posta un link (anche in un indirizzo di prova e senza simboli del tuo sito vero, se preferisci - vedi consigli nel "regolamento" del forum): e` piu` semplice aiutare quando si vede tutta la pagina.

Inoltre dovresti fare un'analilsi sui brwoser in cui ti interessa che il layout funzioni (in pratica devi ripondere alla domanda: ti interessa che funzioni anche in IE6?).

**nomade_k** · 22-09-2010, 15:43

Stavo lavorando al css.
Mi domandavo una cosa che spero non sia così ovvia a Voi.

Se un valore predefinito di un browser, va bene per il risultato che si vuole ottenere, si deve specificare ugualmente, nel foglio di stile, nel caso gli utenti o le case produttrici degli altri browser abbiano impostato valori personalizzati?

**Mich_** · 22-09-2010, 15:49

Ciascun brwoser ha i suoi default, che possono anche variare da una versione all'altra.

Quindi e` meglio non fidarsi.

**nomade_k** · 22-09-2010, 17:27

Test. Che c'è di sbagliato?

**nomade_k** · 22-09-2010, 19:07

Non potendo editare, ne creo uno nuovo, di messaggio.

Se io ho un "div" contenitore e uno, interno, per i contenuti, perchè se agisco sul secondo, interviene su tutto?

Discussione: Aiuto in costruzione layout

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto in costruzione layout

Permessi di invio