Come posso creare queste tabelle?

**makingweb** · 20-07-2009, 19.24.28

Salve,
Navigando per il web ho trovato questo sito LINK, realizzato con PHP-Fusion.
Volevo sapere come posso creare quelle tabelle trasparenti, che mostrano lo sfondo?

mi potreste aiutare cortesemente?

20-07-2009, 21.44.36

Un po' di css:

Codice PHP:


#div { opacity:0.3; filter: alpha(opacity=30); }

Ciauu! ^^

**makingweb** · 20-07-2009, 22.31.43

ok grazie....
un ultima cosa, ma quelle tabelle con gli angoli sumssati come le posso creare? sono de div in ajax?

20-07-2009, 23.16.58

Hai un pò di confuzione in testa...

Prima di tutto non vedo angoli arrotondati nel sito, se non negli adsense.

Secondo li puoi creare in diversi modi,tra cui Javascript (non Ajax) e CSS (con o senza immagini, anche se il senza immagini ha due modi, uno utilizzare tag "vuoti", la'ltro usare il CSS3 non supportato da tutti i browser se non da FF 3.5 e Opera 10).

21-07-2009, 02.31.25

Puoi semplicemente usare delle immagini come ho fatto io:
http://www.musicontheweb.org
Ho creato una tabella con 3 righe e tre colonne
le righe e le colonne centrali hanno come sfondo un'immagine trasparente o semi, mentre agli angoli ho creato immagini semi-trasparenti arrotondate seguendo la direzione dell'angolo

CIAO!

EDIT: ovviamente le tabelle senza spazi tra righe e colonne!

21-07-2009, 08.28.34

Con tutto rispetto ma che senso ha usare le tabelle?!

Al massimo usi i tag vuoti è hai un layout tableless, anche se sarebbe meglio usare i <div> annidati con immagini e CSS.

Angoli arrotondati senza immagini
Angoli arrotondati con l'uso di una sola immagine
Angoli Arrotondati con più immagini

21-07-2009, 13.46.14

La tabella l'avrei dovuta usare lo stesso per la struttura del sito...

21-07-2009, 13.48.34

Esistono i div e tanti altri tag per fare un layout.

Se guardi il mio sito in firma, la home e il forum sono tutti tableless

21-07-2009, 15.03.49

lo so lo so... però con i div mi trovo scomodo... con le tabelle riesco ad ottenere riquadri alle giuste distanze e delle giuste dimensioni... :D ho gia fatto altri 3 siti con i div ma è venuto molto disordinato... ognuno ha le proprie preferenze :D:D

21-07-2009, 18.46.02

Basta studiare e si ottiene quel che si vuole

21-07-2009, 19.55.48

no è semplicemente una questione di misura... :D

**makingweb** · 23-07-2009, 13.22.33

Scusate,

ma non co capito bene questo codice:

Codice PHP:


.rtop, .rbottom{display:block; }

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}

.r1{margin: 0 5px; background:#9BD1FA;}

.r2{margin: 0 3px; background:#9BD1FA;}

.r3{margin: 0 2px; background:#9BD1FA;}

.r4{margin: 0 1px; height: 2px; background:#9BD1FA;}

.contain{background:#9BD1FA;text-align:center;}

Come faccio a modificare le granzezze della tabellla? per l'altezza ho capito che devo modificare questa parte height: 2px; ma per la larghezza

....non mi è molto chiaro e link che mi avete postato non spiegha niente...

23-07-2009, 13.33.33

Non usare tabelle come ti ho detto, ma utilizza l'esempio postato nel blog.

Metti tutto quel codice dentro un <div> e assegni a quast'ultimo l'altezza (height) e la larghezza (width) che meglio preferisci

**makingweb** · 23-07-2009, 15.05.46

Scusami per il disturbo...ma devo fare cosi?

Codice PHP:


<div class="tabella1" alt="" width="392" height="2" class="border" />

.rtop, .rbottom{display:block; }

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}

.r1{margin: 0 30px; background:#9BD1FA;}

.r2{margin: 0 30px; background:#9BD1FA;}

.r3{margin: 0 20px; background:#9BD1FA;}

.r4{margin: 0 1px; width:100px; height: 2px; background:#9BD1FA;}

.contain{background:#9BD1FA;text-align:center;}

</div>

poi lo metto nel <head> e lo richiamo?

23-07-2009, 16.06.14

No!!

Devi fare così:

Codice HTML:

<style type="text/css">
.rtop, .rbottom{display:block; }
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 30px; background:#9BD1FA;}
.r2{margin: 0 30px; background:#9BD1FA;}
.r3{margin: 0 20px; background:#9BD1FA;}
.r4{margin: 0 1px; width:100px; height: 2px; background:#9BD1FA;}
.contain{background:#9BD1FA;text-align:center;} 
</style>

Questo va in head.

**makingweb** · 23-07-2009, 19.46.55

Ahhhhhh, ok poi dopo nel <body> faccio un <div> con l' altezza e la larghezza, aggiungo la righa che mette la transparenza, e dentro metto quello che voglio cosi:

Codice PHP:


<html>

<head>

      <title> TITOLO PAGINA </title>

<style type="text/css">

.rtop, .rbottom{display:block; }

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}

.r1{margin: 0 30px; background:#9BD1FA;}

.r2{margin: 0 30px; background:#9BD1FA;}

.r3{margin: 0 20px; background:#9BD1FA;}

.r4{margin: 0 1px;  height: 2px; background:#9BD1FA;}

.contain{background:#9BD1FA;text-align:center;} 

#div { opacity:0.3; filter: alpha(opacity=30); }  

</style>

</head>

<body>

<div class="contain" alt="" width="392" height="2">

CONTENUTO DELLA TABELLA

</div>

</body>

</html>

Scondo voi è giusto?

23-07-2009, 19.52.04

Si ma a cosa servono tutte quelle classi dichiarate se poi non le usi (.r1,r2,r3,r4)

Comunque è meglio evitare di usare attributi in html quando puoi utiilzzare il css (vedi width e height che hai scritto in <div>), aggiungile direttamente al css:

Codice:

.contain{ background:#9BD1FA; text-align:center; width: 392px; height: 2; }

Discussione: Come posso creare queste tabelle?

LinkBack

Strumenti discussione

Display

Come posso creare queste tabelle?

Regole di scrittura