Sfondo tabella e pagina

**flabel** · 16-10-2008, 10:52

Ciao a tutti.
Vorrei creare una pagina web con un'immagine di sfondo.
Al centro di questa pagina dovrebbe esserci una tabella, posizionata in modo che esternamente ad essa l'immagine di sfondo sia visibile al 100% mentre all'interno della tabella l'immagine sia più opaca, meno visibile, insomma.
Il tutto però facendo in modo che il testo della tabella sia leggibile e non a sua volta opaco.
Come posso fare senza dover creare due immagini, una per lo sfondo pagina ed una più opaca per lo sfondo tabella?
Grazie a chi vorrà aiutarmi
Fla

**Mich_** · 16-10-2008, 11:04

Non mi risulta che sia possibile, o per lo meno non mi viene in mente una cosa semplice per farlo.

Ma non vedo perche` non puoi mettere un'immagine di sfondo nella tabella, un bianco semitrasparente. Ti basta un'immagine PNG 1px X 1px, che poi ripeterai in x e y, e che quindi non pesa in termini di KB.

**flabel** · 18-10-2008, 17:44

grazie Mich_, pensavo che il formato .png non fosse visibile da tutti i browser, per questo avevo optato per una soluzione con i css
ma se mi dici di usare questo metodo evidentemente sbagliavo
grazie ancora

**Mich_** · 20-10-2008, 10:08

pensavo che il formato .png non fosse visibile da tutti i browser

Hai ragione. Non viene digerito da IE6, mentre funziona in IE7 e in tutti gli altri browser piu` comuni.
Pero` cis ono dei filtri per far digerire le semitrasparenze dei png anche ad IE6.

In realta` le semitrasparenze si possono realizzare anche con i .gif (che peraltro e` uno standard proprietario, anche se ben supportato da tutti), pero` l'effetto non e` dei migliori: infatti con i .gif la semitrasparenza viene simulata tramite retinatura (un mix di px trasparenti ed opachi), e il risultato puo` essere brutto in qualche monitor.

Per come inserire i filtri per IE, trovi info mediante ricerca nel forum (bottone in alto).
Per i dettagli come realizzare le immagini, devi rivolgerti nel forum di grafica, dove sono sicuramente piu` esperti di me.

**flabel** · 22-10-2008, 22:49

Grazie! Mi metto alla ricerca!

**flabel** · 25-10-2008, 19:10

Rieccomi qua

Allora, ho seguito il consiglio di Mich_ e sono andato in cerca, trovando questo

Ho seguito tutto, e funziona su IE6.

Il problema ora è questo.

Ho dovuto posizionare il 'div' del filtro in una cella di una tabella. La stessa cella deve contentere, povero me, un'altra tabella in cui vorrei mettere un menu in CSS.

Il menu però utilizza l'id all'interno di un DIV. Morale, non funziona il menu. O meglio, funzionano (sono dunque link funzionanti) le ultime voci in basso del menu. Le prime no. A meno che non aggiungo un
subito dopo il DIV del filtro. Ad ogni
che aggiungo dopo il div del filtro, le voci del menu linkabili aumentano, dall'ultima in basso alla prima in alto....

Forse se posto il codice è meglio....

<html>
<head>
<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}
</style>
<link href="stile.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width='76%' height='100%'>
<tr><td valign="top"><DIV STYLE="position:relative; height:100%; width:100%; filter

rogid

XImageTransform.Microsoft.AlphaImageLoader (src='img/sf_tabella.png',sizingMethod='scale');">
<table width="100%" height="96%">
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td width="20%"><div id="navigation">
<ul>[*]Homepage[*]Dove siamo[*]Offerte[*]Link[*]Dove siamo[*]Contatti[/list]</div>
</td>
<td></td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
</body>
</html>

Questo il codice del CSS
#navigation {
width: 150px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #006510;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #006510;
border-right: 1px solid #006510;

color: #008000;
text-decoration: none;
}
#navigation li a:hover {
background-color: #006510;
color: #FDFF01;
font-weight:bold;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #006510;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {

color: #008000;
}
#navigation ul ul a:hover {
background-color: #006510;
color: #FDFF01;
}

Spero di aver postato bene. Magari per i più sarà una domanda stupida... ma purtroppo non sono molto pratico. Preferisco far la figura di chi non ne sa molto ma venir fuori dall'impiccio....

Grazie ancora a chi potrà e vorra aiutarmi.

Fla

**Mich_** · 27-10-2008, 11:07

Non hai postato bene: hai dimenticato di usare i tag VB (inseriti tramite i bottoni sopra l'area di inserimento), in particolare il codice va inserito tramite i bottoni # (code) o PHP, altrimenti si perde la formattazione e si fa fatica a seguire il flusso.

Ma comunque tabelle innestate sono segno di impostazione sbagliata: hai usato le tabelle per formattare, e questo da un lato e` un grave errore semantico, dall'altra complica parecchio la sistemazione del CSS.
Non val la pena sistemare una pagina con errori semantici: se anche si riesce a sistemare per un browser, poi occorre fare i salti mortali per sistemare cross-browser (a parte che un certo numero di persone che usano browser non standard non riuscira` a capire il senso del tutto).

Quindi il layout generale va ripensato daccapo: ci sono ottimi esempi in rete, alcuni sono citati nei link-utili di questo forum.

Discussione: Sfondo tabella e pagina

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo tabella e pagina

Permessi di invio