Css al posto delle tabelle

[gianlucaweb]

Ciao

Vorrei per il mio nuovo sito sostituire l'uso delle tabelle per impaginare i contenuti con i css.
Premetto che sono ancora agli inizi nello studio dei fogli di stile, ma qualcosa la so fare.
Ho capito come gestire gli attributi delle tabelle con i fogli di stile (esterni o incorporati) ma adesso vorrei passare definitivamente ai css.
Non ho capito però precisamente cosa fare.

Al posto delle tabelle devo usare i div per posizionare i contenuti sullo schermo o cosa?

Come si fa poi a ordinare i contenuti come facevo con le celle delle tabelle ad esempio?

Mi servono almeno delle delle indicazioni all'inizio

Ad esempio devo ordinare in uno spazio complessivo di 800px un menu a sinistra ( di circa 250px) e un corpo della pagina (per il resto dello spazio) a destra come mi dovrei comportare?

Grazie anticipatamente.

il CSS diciamo che serve per posizionare le tabelle, non puoi far prendere il post delle tabelle dal CSS

Se proprio non vuoi usare le tabelle, usa i <div>

[gianlucaweb]

il CSS diciamo che serve per posizionare le tabelle, non puoi far prendere il post delle tabelle dal CSS

Se proprio non vuoi usare le tabelle, usa i <div>

ma infatti intendevo proprio sostituire le tabelle.
Il problema è che non saprei come ottenere l'imginazione.
A quanto pare bisogna creare dei div e agire sugli attributi dal css...se ho capito bene.

E per le "celle" (delle voci del menu ad esempio) che ho dei dubbi.

Grazie

Ti linko un post su html.it che ti spiega come puoi agire con i <div>

http://forum.html.it/forum/showthrea...3#post11055403

Poi studia il paramentro float del css!

[dementialsite]

Hai già provato a leggerti la "bibbia" per quanto riguarda i layout in CSS?
http://css.html.it/guide/leggi/3/gui...iti-con-i-css/

Stammi bene...

Ad esempio devo ordinare in uno spazio complessivo di 800px un menu a sinistra ( di circa 250px) e un corpo della pagina (per il resto dello spazio) a destra come mi dovrei comportare?

Nel caso del tuo esempio puoi fare in due modi: o fai si che il menù ed il content siano posizionati in punti precisi oppure semplicemente posizioni il menù a sinistra con un certo margine dal bordo left e right ed il corpo della pagina a sinistra sempre con una specifica larghezza.
Io ti consiglio la seconda opzione.

Nell'HTML della pagina crei i due div:

<div id="menu">qui inserisci il contenuto del tuo menù</div>
<div id="content">qui inserisci il contenuto della pagina</div>

Nel CSS invece metti:

#content {
        width:500px;
        float: right;
        margin:10px;
        height: auto;
}

#menu {
        width:250px;
        float: left;
        margin:5px 10px 5px 10px;
}

Utilizzando il float posizioni automaticamente il tuo menù a sinistra ed il contenuto a destra (del tuo menù).
Margin è la distanza che sta attorno al div, in seguenza c'è il margine dal top, da destra, da bottom e sinistra.
Questo è un esempio, poi puoi completare il tutto definendo il padding, il background, il colore del testo, il bordo, ecc...

Se devi aggiungere altri div (come il footer, l'header, ecc...) puoi farlo benissimo, però diventa un attimino più complicato, basta studiare per bene le guide che trovi in rete e soprattutto fare delle prove con il tuo editor.

Comunque ho visto che nel tuo sito utilizzi i frameset, prova a guardare invece il php...

[araim]

molte cose dinamiche da IE non vengono interpretate, per cui un 100% come dimensione, non verrebbe interpretato da IE, o almeno non viene interpretato in maniera corretta... ç_ç

[gianlucaweb]

Nel caso del tuo esempio puoi fare in due modi: o fai si che il menù ed il content siano posizionati in punti precisi oppure semplicemente posizioni il menù a sinistra con un certo margine dal bordo left e right ed il corpo della pagina a sinistra sempre con una specifica larghezza.
Io ti consiglio la seconda opzione.

Nell'HTML della pagina crei i due div:

<div id="menu">qui inserisci il contenuto del tuo menù</div>
<div id="content">qui inserisci il contenuto della pagina</div>

Nel CSS invece metti:

#content {
        width:500px;
        float: right;
        margin:10px;
        height: auto;
}

#menu {
        width:250px;
        float: left;
        margin:5px 10px 5px 10px;
}

Utilizzando il float posizioni automaticamente il tuo menù a sinistra ed il contenuto a destra (del tuo menù).
Margin è la distanza che sta attorno al div, in seguenza c'è il margine dal top, da destra, da bottom e sinistra.
Questo è un esempio, poi puoi completare il tutto definendo il padding, il background, il colore del testo, il bordo, ecc...

Se devi aggiungere altri div (come il footer, l'header, ecc...) puoi farlo benissimo, però diventa un attimino più complicato, basta studiare per bene le guide che trovi in rete e soprattutto fare delle prove con il tuo editor.

Comunque ho visto che nel tuo sito utilizzi i frameset, prova a guardare invece il php...

interessante!

ma per il menu se lo devo ripartire in più sezioni orizzontali devo usare div dentro div. Fammi capire, per piacere.


ps: il mio sito che hai visto con i frame è molto vecchio e l'ho sempre utilizzato per fare delle prove in linea di massima.
Adesso lo vorrei aggiornare e il prossimo userà il php e i css.

Puoi annidare i div che vuoi, non ci sono limiti

Come dice jcdesign puoi annidare i tag div dentro altri div.
Prova a descrivere un po' come dovrebbe essere il tuo menù, possibilmente non c'è bisogno di utilizzare altri div.
Ad esempio:

Menù principale

• Home
• Contattami
• Blog

Menù Sport

1. Calcio
2. Formula 1
3. Tennis

Menù Tempo Libero

• Barzellette
• Musica
• Frasi d'amore

In questo esempio di menù i titoli delle varie sezioni sono di un altro colore, di un altro size e hanno il bold rispetto al resto del menù.
Per evitare di inscatolare ogni cosa sotto un div:

<div id="menu">
<div id="titolosezione">Menù principale</div>
Home
Contattami
Blog
<div id="titolosezione">Menù Sport</div>
Calcio
Formula 1
Tennis
...
</div> <!-- fine menù -->

Puoi ad esempio fare:

<div id="menu">
<h4>Menù principale</h4>
Home
Contattami
Blog
<h4>Menù sport</h4>
...
</div> <!-- fine menù -->

e quindi poi andare a modificare il CSS ad esempio così:

h4 {
color: orange;
font-size:16px;
}

[gianlucaweb]

grazie ancora per la disponibilità ragazzi.

Volevo aggiungere 2 cose.

Il div di sinistra non dovrebbe essere proprio un menu' di navigazione (che ho messo nell'header) ma pensavo di creare 3 sezioni o celle ,2 dei quali dovrebbero ospitare un modulo, per la registrazione alle newsletter ecc ecc, ecco perchè con le celle delle tabelle mi sembrava più facile per me la cosa....ma se mi dite che si può fare ugualmente....


secondo.

Il div di sinistra dovrebbe avere una dimensione fissa (ci inserisco le tre celle-sezioni con i moduli e basta
Il div "content" centrale dovrebbe ospitare codice e dati richiamati dal database e quindi la lunghezza a secondo dei casi può variare.

Vorrei quindi che il div sinistro rimanesse delle stesse dimensioni e il div centrale dovrebbe invece "allungarsi" secondo le necessità.
Cosa devo fare e cosa mi consigliate di fare per non stravolgere il layout della pagina.

Grazie

Nel div di sinistra gli puoi mettere quello che ti pare, il menù, il modulo, dei semplici link, il guestbook, un'immagine, un banner pubblicitario, ecc...
Il tag div in ogni caso è sempre meglio delle tabelle e quindi delle varie celle.
Puoi creare dei vari div, metterli uno sotto l'altro e far si che stiano tutti a sinistra, ma secondo il mio parere a questo punto sarebbe meglio creare un div generico che sarebbe la colonna di sinistra e poi annidare altri div contenenti il modulo della registrazione, l'altro modulo, ecc...
Comunque sia la colonna di sinistra che la colonna di destra (ovvero il content) andrebbero ad allungarsi automaticamente in base alla lunghezza del loro contenuto.

[gianlucaweb]

Nel div di sinistra gli puoi mettere quello che ti pare, il menù, il modulo, dei semplici link, il guestbook, un'immagine, un banner pubblicitario, ecc...
Il tag div in ogni caso è sempre meglio delle tabelle e quindi delle varie celle.
Puoi creare dei vari div, metterli uno sotto l'altro e far si che stiano tutti a sinistra, ma secondo il mio parere a questo punto sarebbe meglio creare un div generico che sarebbe la colonna di sinistra e poi annidare altri div contenenti il modulo della registrazione, l'altro modulo, ecc...
Comunque sia la colonna di sinistra che la colonna di destra (ovvero il content) andrebbero ad allungarsi automaticamente in base alla lunghezza del loro contenuto.

Grazie.
Incomincio a fare delle prove e magari vi faccio sapere.
'Notte!!

[gianlucaweb]

Ciao

Sto provando un po' ragazzi e il lavoro sembra venire bene....se uso Firefox (il mio browser)

Mi sono accorto però che con IE 6 (non so le altre versioni e gli altri browser)
i div (sia quello con gli elementi di cui parlavo prima sia addirittura l'intera pagina) invece che centrati sono allineati a sinistra e nemmeno le distanze tra essi corrispondono.


Ho letto nel frattempo alcuni articoli e sembra che il browser di casa microsoft (e ti pareva) non rispetta alcuni standard W3C.


Ma cosa posso fare?

Grazie

Magari se fai vedere una pagina di prova...