Domanda teorica: tabelle e gestione CSS

[Valeria75_bis]

Ciao, un suggerimento: se voglio gestire le mia tabelle tramite CSS e le tabelle hanno oguna una dimensione diversa, mi conviene creare X differenti CSS... giusto?? E' impossibile gestire con lo stesso CSS piu tabelle?

Inoltre: come posso impostare una logica, nei CSS, in base alla quale un CSS ha una struttura del tipo NomeTabella.QualcheCosa
... per facilitare la lettura dei CSS delle varie tabelle...

Grazie!

[floyd46]

certo che puoi gestire con un CSS + tabelle; se hanno la stessa formattazione..... perchè no?
ma se hanno colore di bordo diverse, allora dovresti usare le classi.
Floyd

P.S. mi sorge un dubbio: :master:
non dovrai mica realizzare un layout, spero, con le tabelle, vero?

[Valeria75_bis]

Eccoti i links

Pagina

Immagine

Il problema si verifica solo con FF

Grazie

[salasir]

Leggi qui:

Logica e stile dei form html

E ricordati di utilizzare correttamente TUTTI i tag per i form (Form, fieldset, ecc)
E di inserire un DOCTYPE corretto.

[Valeria75_bis]

Grazie per il link, ho letto ma mi resta un dubbio: vorrei capire come gestire strutture del tipo

elemento.classe elemento {regole} come indicato nel link

Il CSS come deve essere strutturato? e l'HTML??

ci provo:
CSS
.elemento
{regole}

.classe
{regole}

(va bene usare il "." e non il "#")

HTML
<div id="elemento">
<div id="classe">

P.S. mi sorge un dubbio:
non dovrai mica realizzare un layout, spero, con le tabelle, vero?

No, mi sono spiegata male: se devo impostare <div> con width diversi, devo creare differenti CSS con diversi width? giusto???

Grazie per l'aiuto!

[salasir]

Prima un consiglio: utilizza i delimitatori [ code] .. [ /code] (senza spazi) per racchiudere il codice. Rimane + ordinato.

CSS
.elemento
{regole} 

.classe 
{regole}

(va bene usare il "." e non il "#")

HTML
<div id="elemento">
<div id="classe">

:master:

Mmm. Mi sembra che tu non abbia le idee molto chiare sui CSS.

"Elemento" e "classe" se associati ad un "id" devono essere dichiarati con "#" nei CSS, mentre se sono class, allora devono essere dichiarati come "."

CSS 
p {regole}

#idunivoco {regole} 

.classe {regole}

HTML 
<div id="idunivoco">


testo testo </p>
<div class="classe">
</div>
</div>

Per definire box di dimensioni diverse, non è necessario fare tanti CSS ma dare un "id" diverso ad ognuno e specificarne le caratteristiche. Certo se i box sono in pagine diverse appartenenti a sezioni diverse con caratteristiche proprie ed il sito è complesso, può venire comodo definire un CSS diverso per ogni sezione, racchiudendo magari le cose comuni in un apposito foglio di stile.

	<link rel="stylesheet" type="text/css" href="Style/stile-comune.css" />
	<link rel="stylesheet" type="text/css" href="Style/stile-sezione.css" />

Se non sono stato chiaro. chiedi pure.

[Valeria75_bis]

Sei stato chiarissimo! Con CSS intendevo un singolo foglio di stile e non il file ... ecco perchè non ci capivamo ... mio errore!! Quindi intendevo, con aree di dimensioni diverse dovrò creare differenti stili? anche se tutte le altre regole sono uguali.

Ora è chiara la gestione di ID e Class

Spesse volte, guardando esempi di fogli di stile, mi capita di trovare situazioni nelle quali viene realizzato un foglio di stile "gerarchico" con una struttura del tipo padre.figlio; in quali è consigliabile questa soluzione??
Esempio:
<div> Con intestazione di un'area
<div> Con sottotiolo dell'area
<div> Con contenuti
... questo è un semplice esempio per capire come potrei realizzare una struttura "padre.figlio" per facilitare la lettura dei vari elementi nel file CSS

[salasir]

Originariamente inviato da Valeria75_bis
Spesse volte, guardando esempi di fogli di stile, mi capita di trovare situazioni nelle quali viene realizzato un foglio di stile "gerarchico" con una struttura del tipo padre.figlio; in quali è consigliabile questa soluzione??
Esempio:
<div> Con intestazione di un'area
<div> Con sottotiolo dell'area
<div> Con contenuti
... questo è un semplice esempio per capire come potrei realizzare una struttura "padre.figlio" per facilitare la lettura dei vari elementi nel file CSS

Detto così è un po' generico. Di solito si suddivide il contenuto della pagina in blocchi logici contenuti in un <div> (header, menù, navigazione. news, contenuto, ...) il tutto contenuto in un contenitore (scusa il gioco di parole )

Se invece intendi una struttura del blocco con la definizione dei vari tag, tipo questa:

CSS 
#contenuto .news {
	width: 240px;
	height: 246px;
	background: #fff url(Image.jpg) no-repeat 0 0;
	float: left;
	margin: 30px 22px 0px 0px; 
	padding: 0 0px 0 2px;
}
#contenuto .news p { margin: 0px 13px 15px 15px;}
#contenuto .news h3 { margin: 14px 7px 7px 15px; color: maroon; border: none;}
(X)HTML 
<dic id="contenuto">
    <div class="news"> 
      <h3>titolo</h3>
      


           testo descrittivo .....
      </p>
    </div>
</div>

di solito si utilizzano per dare caratteristiche diverse dal resto della pagina, utilizzando sempre i tag semanticamente corretti.

Mi spiego meglio: solitamente si attribuiscono caratteristiche generiche a tutti i tag hx impostando la dimensione descrescente del font a partire da h1, h2, ... e una dimensione/carattere/... al tag

, validi per tutto il sito.

Se poi devo costruire un box come quello che ti ho indicato come esempio, utilizzerò sempre un tag hx per indicare il titolo e un tag

per contenere la descrizione. Ma le definizioni generali probabilmente non vanno bene come font, dimensione o colore.

Ecco allora che limito la descrizione del tag interessato solo a quelli contenuti nel box in questione ("news").

[nickponico]

se hai un pò di tempo da perderci dai un occhiata alle guide che sono presenti sul sito (css.html.it) troverai molte risposte alle domande che fai...

ciaooo

Enrico

[Valeria75_bis]

Originariamente inviato da salasir

CSS 
#contenuto .news {
	width: 240px;
	height: 246px;
	background: #fff url(Image.jpg) no-repeat 0 0;
	float: left;
	margin: 30px 22px 0px 0px; 
	padding: 0 0px 0 2px;
}
#contenuto .news p { margin: 0px 13px 15px 15px;}
#contenuto .news h3 { margin: 14px 7px 7px 15px; color: maroon; border: none;}
(X)HTML 
<dic id="contenuto">
    <div class="news"> 
      <h3>titolo</h3>
      


           testo descrittivo .....
      </p>
    </div>
</div>

Grazie per l'aiuto!! Un ultimo dubbio:

facendo

#contenuto .news

per usare questo stile dovrò usare class="news" all'interno di un div con id="contenuto"

quindi facendo solo id="contenuto", senza in div news non sto applico nessuno stile

corretto??

grazie