Tableless, questo sconosciuto.

[StegcO]

Ciao a tutti.

Fino ad ora ho sempre usato le tabelle per creare i miei siti/intranet, usando i CSS solo per impostare dei titoli (div con carattere e colore diverso dal normale) e uniformare carattere e grandezza a tutto il sito.

Ultimamente mi sono reso conto del ridicolo uso che ne faccio, e ho quindi provato a capire la struttura tableless.. non prendetemi per idiota.. ma non sono riuscito a entrare in questa mentalità.

Ho letto le guide proposte dallo sticky in questo forum, ma proprio non riesco a capire come riproporre le tabelle che uso io, esempio:

TABLE
   TR
      TD Immagine_Alto /TD
   /TR
   TR
      TD MENU /TD
   /TR
   TR
      TD Immagine_Basso /TD
   /TR
/TABLE

così facendo si crea un semplicissimo menu con un immagine in alto e una in basso a riquadrarlo, semplicissimo..ma coi CSS?

Leggendo vari CSS già fatti vedo che sono impostati colore di sfondo, carattere, padding ecc..


ma leggendoli e rileggendoli non riesci davvero a vedere/capire come funzioni il tutto.

Ovviamente mi riferisco a esempi come questo, per quando riguarda a due div uno sotto l'altro con scritto

ciao_1
ciao_2

penso di esserci arrivato, è proprio nel momento in cui voglio combinazioni di immagini con tabelle (quindi DIV in CSS?) figlie dentro ad altre ecc. ecc.


Spero di essermi spiegato, qualcuno di voi ha un'ennesima guida o due parole da spendere per farmi accendere la lampadina?

Grazi Mille

StegcO

[Myaku]

Originariamente inviato da StegcO

Spero di essermi spiegato, qualcuno di voi ha un'ennesima guida o due parole da spendere per farmi accendere la lampadina?

già dato uno sguardo a layout gala ?
se invece vuoi approdare ad un manuale cartaceo, potrebbe esserti utile "Lo zen e il design css" (e il relativo sito www.csszengarden.com). Il libro non è recentissimo, ma ci sono delle soluzioni interessanti



edit: ps. div e table vanno bene se queste ultime ti servono per dati "tabellari" (in corrispondenza riga/colonna)

[StegcO]

Innanzitutto grazie (e complimenti per il tuo sito) però ved, è proprio quello che dicevo io, quei 40 esempi PENSO di averli capiti, tipo:



presumo ce basti dire

div 1 a sinistra
div 2 in alto a destra
div 3 in basso a destra

ma se volessi qualcosa del genere, coi menu circondati da immagini per farne il bordo.. come nidifico (e soprattutto SE è giusto nidificare) il tutto?




Grazie e perdonate l'ignoranza

[Myaku]

Originariamente inviato da StegcO
ma se volessi qualcosa del genere, coi menu circondati da immagini per farne il bordo.. come nidifico (e soprattutto SE è giusto nidificare) il tutto?

eh, bella domanda sarebbe da vedere la grafica. hai la possibilità di postare uno screen del layout, così possiamo darti indicazioni su come procedere?

[StegcO]

esempio, una cosa di questo tipo



ha una struttura del genere



non vedo proprio come fare senza nidificare (ammesso che iosappia usare i DIV alla perfezione)

[Myaku]

Originariamente inviato da StegcO
esempio, una cosa di questo tipo

magari la prossima volta non così grande

ok, ora sono fuori, più tardi quando rientro ti do info precise. Comunque, per lo più ti basta usare "border"

[StegcO]

sisi ci mancherebbe

ecco questa storia del border l'ho capita, infatti l'ho usata per un mio progetto con effetto ombra

ma se per esempio i bordi non sono linee ma disegni (es. una rifinitura gotica)?


porca miseria era cosìfacile con le tabelle


EDIT:

alcuni esempi che non capisco

http://www.csszengarden.com/?cssfile...209.css&page=0
http://www.csszengarden.com/?cssfile...208.css&page=0
http://www.csszengarden.com/?cssfile...206.css&page=0

[Myaku]

Originariamente inviato da StegcO
ma se per esempio i bordi non sono linee ma disegni (es. una rifinitura gotica)?

nell'ipotesi più semplice, la rendi pattern, e quindi la applichi come sfondo con repeat. Così non sei vincolato ad una dimensione prestabilita dell'elemento in altezza o larghezza

http://www.csszengarden.com/?cssfile...209.css&page=0
http://www.csszengarden.com/?cssfile...208.css&page=0
http://www.csszengarden.com/?cssfile...206.css&page=0

di preciso, di questi layout cosa non ti è chiaro? la realizzazione dei box menu e righine varie?

[StegcO]

http://www.csszengarden.com/?cssfile...208.css&page=0

come circondano il tutto dai bordi arrontondati? e come fanno a dare una dimensione dinamica in altezza?

[Myaku]

Originariamente inviato da StegcO
http://www.csszengarden.com/?cssfile...208.css&page=0

come circondano il tutto dai bordi arrontondati? e come fanno a dare una dimensione dinamica in altezza?

usando una combinazione di sfondi applicati su più elementi (butta un'occhio al css, così vedi le immagini che sono state usate).
Se serve, anniderai gli elementi con i vari sfondi.

Al tuo link ho dato giusto un'occhiata, ma una soluzione che ho adottato io è stata:
div con un modulo ripetuto in verticale (così risolvo il problema dell'altezza variabile)
- al suo interno un elemento con l'immagine posizionata in alto e non ripetuta (può essere anche un elemento di testo, non necessariamente un div - risparmio codice)
- per come gestire il "bottom", valuto in base alla grafica

Se però sono semplici angoli arrotondati puoi anche cercare la soluzione "nifty corners"