Re: Tabelle in grafica come fare?

"Artglass" <art.glass@tiscali.it> ha scritto nel messaggio
news:fbqt449spdfgij2607p1b5dm8f3dm7rb5a@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 ...).
> Ho fatto un esempio al volo per chiarire:
> http://artglass.altervista.org/tabbianca.html
> Mi servirebbe la stessa cosa però validata strict
>
>>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....
> Così se supero il margine della tabella in orizzontale si mischia
> tutto e poi (qui probabilmente ho sbagliato qualcosa) ho un margine di
> 1 px fra un div e l'altro con firefox.
> Non potresti fare un esempio pratico, sul web ne ho visti a centinaia
> ma nessuno validato e completamente compatibile con firefox, tks
>>


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
[ Auf dieses Posting antworten ]
Antworten

Artglass (11.06.2008 11:14)
Julik (11.06.2008 21:35)