Struttura sito e CSS

[orenoren]

Ciao a tutti,
ho creato un'immagine che spiega come si dovrebbe strutturare un sito che sto facendo, ora, per prima cosa, vorrei "trasformarla" in css...

La pagina dovrebbe essere larga 900px, di lunghezza variabile (a seconda di quanti sono i contenuti), senza margini.

Limmagine è qui: http://provaperilsito.altervista.org/

Potete aiutarmi a creare questa struttura?

Grazie

[orenoren]

Vedo che il mio layout non vi entusiasma

Provo così: al nuovo indirizzo http://provaperilsito.altervista.org/index2.html trovate la pagina suddivisa nei settori di cui vi parlavo:

Ho utilizzato dei "div" per dividere le sezioni, tutte contenute in un div "container"... potete dare uno sguardo se fin qui va bene? Altra cosa: il container dovrebbe non avere margini all'inizio e alla fine... è possibile?

Qui c'è il codice CSS, quello html dovreste desumerlo dalla pagina, no?

Grazie in anticipo

/* /* ID Styles */

#container {
	width: 900px;
	margin: 0 auto;
}

#spazio_1 {
}

#logo {
}
#intermezzo_1 {
	height: 183px;
}
#corpo_pagina {
}
#intermezzo_2 {
	height: 183px;
}
#footer {
}

/* Class Styles */
	
.bodyText {
	font:12px Arial, Helvetica, sans-serif;
	color:#000000;
	line-height:20px;
	letter-spacing:1px;
	text-align: justify;
	vertical-align: top;
	}
	
.bodyTextDx {
	font:12px Arial, Helvetica, sans-serif;
	color:#000000;
	line-height:20px;
	letter-spacing:1px;
	text-align: justify;
	vertical-align: top;
	}
	
.pageName{
	font:22px Arial, Helvetica, sans-serif;
	color: #D90000;
	line-height:20px;
	letter-spacing:1px;
	border-bottom: 1px solid #D90000;
	padding: 3px 0px 2px 0px;
	}
	
.pageNameDx{
	font:22px Arial, Helvetica, sans-serif;
	color: #D90000;
	line-height:20px;
	letter-spacing:1px;
	border-bottom: 1px solid #D90000;
	padding: 3px 0px 2px 0px;
	}
	
.columnHeader {
	font: 11px Arial, Helvetica, sans-serif;
	color: #FF080E;
	line-height:18px;
	letter-spacing:.05em;
	}
	
.subHeader {
	font:bold 11px Arial, Helvetica, sans-serif;
	color: #FF080E;
	line-height:18px;
	letter-spacing:.1em;
	}

.smallText {
	font:11px Arial, Helvetica, sans-serif;
	color:#000000;
	text-align: center;
	}
	
.navText {
	font:11px Georgia, Times New Roman, Times, serif;
	color: #1F2669;
	line-height:16px;
	text-decoration: none;
	}

.headerSx {
	font:11px Arial, Helvetica, sans-serif;
	color:#000000;
	vertical-align: top;
	padding-top: 30px;
	padding-left: 40px;
	height: 240px;
	}

.headerDx {
    font:11px Arial, Helvetica, sans-serif;
	color:#000000;
	line-height:22px;
	margin-top:0px;
	letter-spacing:0.1em;
	}
 */

[codencode]

Consiglierei l'uso di un foglio di stile di reset (http://meyerweb.com/eric/thoughts/20...eset-reloaded/) da inserire come primo css per azzerare tutti i margini e settare le impostazioni iniziali di tutti gli elementi.
In alternativa, per quello che richiedi tu

* {
     margin:0; 
     padding:0;
}

Dando poi uno sguardo al tuo css, io lo semplificherei evitando di duplicare le regole simili per i diversi selettori. Ad esempio, invece di

.pageName{
	font:22px Arial, Helvetica, sans-serif;
	color: #D90000;
	line-height:20px;
	letter-spacing:1px;
	border-bottom: 1px solid #D90000;
	padding: 3px 0px 2px 0px;
	}
	
.pageNameDx{
	font:22px Arial, Helvetica, sans-serif;
	color: #D90000;
	line-height:20px;
	letter-spacing:1px;
	border-bottom: 1px solid #D90000;
	padding: 3px 0px 2px 0px;
	}

sarebbe meglio mettere

.pageName, .pageNameDx {
	font:22px Arial, Helvetica, sans-serif;
	color: #D90000;
	line-height:20px;
	letter-spacing:1px;
	border-bottom: 1px solid #D90000;
	padding: 3px 0px 2px 0px;
}

[orenoren]

Ok grazie. Stabilito questo, vorrei sapere:

- Il colore dello sfondo come lo imposto?
- Nel div "logo", come si vede nell'immagine del layout, io devo inserire a sx in alto il logo vero e proprio e in basso a dx un'immagine che cambia di pagina in pagina: ora, la mia domanda è: devo inserire una tabella nel div "logo" o questi due elementi si gestiscono sempre con i div?
Lo stesso problema mi si pone nel div "corpo pagina" poichè avrò dei titoli, del testo, delle immagini incolonnate a dx...

[codencode]

Per il colore dello sfondo, nel css associ al selettore dell'elemento (o alla sua classe)

background: #ffffff; /*questo è il bianco, tu inserisci il colore che vuoi*/

Se invece vuoi un'immagine di sfondo

background: url('img.jpg'); /*l'immagine che vuoi*/

Per la seconda domanda, niente tabelle; queste vanno usate solo per dati tabellari. Nel div logo inserisci due immagini, il logo e l'immagine variabile, e le posizioni con il css. Stesso discorso per il div corpo pagina.
La logica è quella di usare i tag HTML più opportuni in base al tipo di contenuto da inserire: h1...h6 per i titoli, p per i paragrafi, ul/ol per gli elenchi, ecc. e poi formattare il tutto con i css.

[orenoren]

Altra cosa:

 
<div id="corpo_pagina">
    <h1>Benvenuti!</h1>
  </div>

Per modificare l'estetica della scritta "Benvenuti!" ora posso associare la classe "pageName", ad esempio, no?

Se proprio di fianco a "Benvenuti!" io volessi scrivere "Novità" (con il medesimo riferimento alla classe "pageName") come posso fare?

[codencode]

Puoi associare la classe "pageName" agli h1

<h1 class="pageName">...</h1>

e riferirti ad essa nel css

h1.pageName {...}

oppure riferirti direttamente nel css agli h1 figli del div "corpo_pagina"

div#corpo_pagina h1 {...}

[orenoren]

Ok ci sono. Grazie.

Nel div "logo" io ho inserito due immagini: il logo e l'immagine che cambia (come si vede nel layout): ora per posizionarle così come si vede nel layout devo associare al logo e all'immagine due classi che ne dirigano la posizione, giusto? E poi agire sui margini, ad esempio.

Oppure, se, nello stesso div "corpoPagina", di fianco a "Benvenuti!" io volessi scrivere "Novità", oppure inserire un'immagine come posso fare? Non credo che si possa dividere il div in due, quindi?

Grazie

[orenoren]

Dunque ho provato a fare quello che ho spiegato nel post precedente per dividere il div "corpoPagina" in due:

<div id="corpo_pagina">
   <div class="split2">
    <div>
        <h2>Paragrafo 1</h2>
        

Testo del paragrafo 1..</p>
    </div>
    <div>
        <h2>Paragrafo 2</h2>
        

Testo del paragrafo 2..</p>
    </div>
    <div class="clearer"></div>
</div>     
  </div>

div.split2 div{
    float: left;
    width: 450px;
    width: 900px;
    width: 450px
    }

div.clearer{
    float: none; clear: left
    }

Il problema è che: la parte a sinistra (Paragrafo 1) dovrebbe essere larga 580px con margine sinistro di 40px; poi ci deve essere uno spazio di 30px; ed infine una parte a destra (Paragrafo 2) largo 290px con margine destro di 40px... per un totale di 900px

[orenoren]

Dunque ho provato a modificare un codice css/html per adattarlo al mio layout ... eccolo
Potete dare uno sguardo? Non riesco, ad esempio, a modificare il menù di navigazione o a "centrare" le colonne del corpo pagina...

Grazie