Newsgroup: it.lavoro.professioni.webmaster
Titolo: Tabelle in grafica come fare?

Per fare delle tabelle grafiche e fluide al posto di quelle bruttine
fatte con i css, voi come fate? Ovvimente devo essere validate
strict,mi sapete indicare un metodo  pratico ed efficace , in pratica
vorrei avere la classica tabella fluida ma con i bordi della grafica
che imposto io... bhè spero di essere stato chiaro in caso contrario
posto un esempio
Grazie

 posto un esempio
posta un esempio, grazie :)
-- 
Giacomo
  np: Foobaris spento

posta un esempio, grazie :)
http://www.develmedia.com/portfolio_printo.asp
tipo quella dove c'č scritto portfolio, ma validata strict,
compatibile firefox, fluida anche in orizzontale e non solo in
verticale.


La "tabella" chiamiamola cosi, è fissa, viene solo allineata al centro 
rispetto alla finestra del browser, nulla di particolare.
Cooper 


wrote:

Si è fissa in orizzontale ma fluida in verticale
Forse mi  spiego male, vorrei una tabella grafica che si comportasse
come una tabella normale che si adatta al testo.
Ad esempio, senza css, per fare una tablella GRAFICA FLUIDA come la
intendo io, ovvero che si adatta al testo senza doverla rifare ogni
volta che si sfora il margine, io facevo così:
Da  photoshop disegnavo l'immagine della tabella e la dividevo in 9
parti:
4 angoli  fissi per il bordo (inseriti come immagini fisse)
4 lati con un fondo ripetuto all'interno delle 2 riga e delle 2
colonne
Poi scrivevo nel centro e impostando come sfondo un pixel del colore
della tabella disegnata con photoshop
Ottenevi una tabella grafica con gli angoli fissi e con lo sofndo
ripetuto che allargava e stringeva il margine a seconda della quantità
di testo necessaria.
Ora volevo sapere come fate voi per farla validata strict e ottenere
lo stesso effetto con i css, tutto li.

 ha scritto nel messaggio 
news:4cht44pvhcvs6m86h...@4ax.com...

Se ho capito bene e vuoi fare una tabella grafica con i bordi arrotondati 
sopra e sotto ci sono vari tutorial sul web (cerca 'rounded box' o qualcosa 
di simile ...).
Cmq io farei così, ti dico questo perchè io preferisco i DIV con i bordi 
classici (solid, dashed, inset, outset ...) o senza bordi ma con background 
impostato:
Ti servono tre DIV
1 - il DIV superiore con width e height impostati in px (le stesse 
dimensioni dell'immagine di sfondo) e con background l'immagine con i bordi 
superiori arrotondati, se vuoi impostare un titolo metti anche il padding 
top e left e right in modo da non sovrascrivere sopra i bordi arrotondati:
2 - il DIV centrale con width impostato in px (le stesse dimensioni 
dell'immagine di sfondo in larghezza) con background l'immagine con i bordi 
sx e dx con repeat-y e con padding left e padding right impostato in modo da 
non inserire il testo nella posizione dei bordi, in questo DIV non imposti 
la height in maniera che diventa fluido, ossia più testo inserisci e più 
lungo diviene il DIV;
3 - il DIV inferiore con width e height impostati in px (le stesse 
dimensioni dell'immagine di sfondo) e con background l'immagine con i bordi 
inferiori arrotondati, anche in questo caso se vuoi inserire del testo metti 
il padding left e right per non sovrascrivere sopra i bordi arrotondati, un 
padding top, può essere richiesto in modo che l'eventuale testo non sia 
troppo appiccicato al testo inserito nel DIV centrale.
Ciao Julik 

Ciao Julik 
Ciao 

>
Ecco un layout monocolonna come da tuo esempio:
Tieni presente che ho impostato le immagini grafiche di background come se 
misurassero 760x60 e ovviamente ho dato dei nomi fittizi, se hanno 
dimensioni diverse effettua il resizing con il tuo programma di grafica e 
modifica i vari width e height che trovi nel codice CSS qui sotto. Ho messo 
anche i vari padding, modificali secondo la tua necessità.
Ecco il codice del CSS che ho chiamato style2.css
* {
 margin: 0 auto;
 padding: 0;
}
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 background-color: #CCC;
}
#content {
 width: 760px;
 background-color: #FFF;
}
#su {
 height: 60px;
 background-image: url(bg_bordo_superiore.jpg);
 background-repeat: no-repeat;
 padding: 0px 10px 0px 10px;
}
#centrale {
 background-image: url(bg_bordo_sx_dx.jpg);
 padding: 10px 10px 10px 10px;
}
#inferiore {
 height: 60px;
 background-image: url(bg_bordo_inferiore.jpg);
 background-repeat: no-repeat;
 padding: 0px 10px 0px 10px;
}
Ecco il codice HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" lang="it">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
  <title>Prova</title>
  <link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
  <div id="content">
     <div id="su">sopra</div>
     <div id="centrale">centrale<br />
     <br />
     <br />
     <br />
     </div>
     <div id="inferiore">inferiore</div>
  </div>
</body>
</html>
Usalo come esempio di partenza, cmq l'NG dedicato all'HTML è 
news:it.comp.www.html
Ciao Julik

Ciao Julik
Ciao


Probabilmente le soluzioni ci sono (come 3 DIV verticali di cui quello in 
mezzo con width in percentuale mentre tutte le height espressi in px tipo 
1200px lunghezza effettiva immagine di sfondo , ecc , ecc)
I DIV con i bordi arrotondati vengono per lo più utilizzati per piccoli box 
o titoli di sezioni o news o categorie, credo che il codice CSS e HTML 
necessario venga adattato di volta in volta secondo le esigenze, non è che 
su ogni sito si propone la stessa impaginazione, io ad esempio non ho una 
porzione di codice specifica per ogni situazione...
Intanto ti sottopongo questo link, dovrebbe essere width fluido, prima 
mostra un tutorial con il programma di grafica per creare i bordi 
arrotondati e poi mostra il codice CSS e una pagina dimostrativa 
http://blog.josh420.com/archives/2007/11/how-to-create-fluid-width-div-layers-with-rounded-corners.aspx
Vedi se può fare al caso tuo.
Come chiave di ricerca in Google ho usato 'rounded box fluid' ma puoi usare 
anche 'rounded box width fluid', ecc. ecc...
Grazie della cortesia, ma piace anche a me risolvere se possibile situazioni 
nuove ...
Ciao Julik 


Ciao e non so veramente come ringraziarti
p.s. Cmq sto strict è veramente na palla mi sa che finisco sta
faticaccia come sega mentale e poi torno al  mio bel transitional.
Nelle mie ricerche di tabelle validate sono incappato nel sito
dell'università di bari, guardate che fior di validazione AAA
http://campus.lex.uniba.it/
....senza ritegno! Manco il css hanno fatto giusto, passi che
insegnano  girurisprudenza e non  informatica, ma fare gli sboroni
pure con la tripla A mi pare troppo!! ;-)))


Ok, sono contento che hai trovato la soluzione giusta alle tue esigenze.
Ma vedo dal tuo codice HTML che ti ostini ad usare le Tabelle per il layout, 
probabilmente retaggio dello slicing di Photoshop (vedi questo tutorial 
http://css.html.it/articoli/leggi/1688/da-photoshop-al-sito-xhtmlcss/5/
 ), 
ma non č preferibile usare un DIV container di larghezza 760 px o 990 px 
ecc, ecc... cosě vedi subito il comportamento delle tue pagine web al 
cambiamento della risoluzione del monitor di un tuo visitatore?
Ciao Julik 


L'ho editato al volo con un editor visuale era solo per verificare
prima se funzionava correttamente tutto li ;-)