css sfondi e tabelle

[smaicol]

Ciao a tutti e a chiunque potrà darmi un consiglio!

Sto sviluppando un sito e non riesco a venire a capo di un problemino. Uso un css per impostare il layout e le caratteristiche degli oggetti. In particolare ho una pagina che presenta uno sfondo diviso in due, metà nero da un lato e metà bianco sull'altro lato, vorrei che il testo che vado a scrivere risultasse di colore opposto allo sfondo, ovvero nero quando sfondo è bianco e viceversa, ma non riesco a realizzarlo come vorrei. Ho provato a creare una tabella e ad utilizzare i tag colgroup e col con span=2 e mettendo le caratteristiche stilistiche di sfondo e testo come desiderato ma tali tag funzionano solo su i.e. e ad ogni modo non realizzano ciò che vorrei...qualcuno può aiutarmi? avete suggerimenti? vi ringrazio
smaicol

[miki.]

usa le classi.
Se usi le tabelle, ti conviene fare una tabella dove all'interno ci metti altre 2 tabelle, una di sinistra e l'altra di destra. Poi applichi 2 classi diverse alle 2 tabelle.

.classe1{
background:#000;
color:#fff;
}
.classe2{
background:#fff;
color:#000;
}

<table class="classe1" [...]>

[marco_c]

se puoi/vuoi usare una tabella è semplice.
nel css fai una classe "cella_sinistra" che ha sfondo nero e testo bianco e un'altra class "cella_destra" con sfondo bianco e testo nero e poi la tabella sarà una cosa tipo

<table>
<tr>
<td class=cella_sinistra>
 dfsadsa
</td>
<td class=cella_destra>
 dsafg
</td>
</tr>
</table>

un consiglio. sempre con i css puoi mettere tutti i margini del tag body a 0 così la tabella riempie esattamente tutto lo sfondo

[smaicol]

Grazie! il mio problema è che il testo non è diviso sulle due colonne ma una stessa frase o capoverso si dovrebbe estendere sopra entrambi gli sfondi bianco e nero, ed essere di colore nero o bianco a seconda dello sfondo, ed è questo che non riesco a realizzare.

sono riuscito con due classi a creare gli sfondi e definire il colore di testo opposto, ma quando vado a scrivere del testo non riesco a far sì che cambi colore quando passa sopra l'altra metà dello sfondo di colore opposto....

Avete idee? ho provato ad usare colgroup e col ma niente....e nemmeno le classi fino ad ora mi hanno aiutato...

grazie!

[Jerry Masslo]

se non ho capito male l'unica cosa che mi viene in mente è scrivere due volte lo stesso testo, bianco e nero, e sovrapporli con position:absolute sfalsandoli di un px, tempo fa avevo fatto un esempio, te lo cerco, il risultato non è granché però

http://www.gommalayout.mondoquarto.o...on/Gelion.html

[smaicol]

OTTIMO GRAZIE!! Con il trucco dei layer ho risolto e viene un risultato accettabile....ora mi si pone un altro problema....
ho un layout fatto di header, due colonne( una menu a sinistra e una centrale per i contenuti dove vado ad inserire il testo bicolore..) e il footer.

Usare livello per il bicolore con posizionamento assoluto nella sezione centrale mi fa perdere il posizionamento del footer che prima era giustamente in fondo alla pagina. Con posizionamento relative dei livelli non funziona il bicolore ma il footer tornerebbe al suo posto....com posso risolvere?

non vorrei fare tutta la pagina in posizionamento assoluto perchè per le risoluzioni dei browser non è il massimo....
un consiglio?

grazie mille
smaicol

[Jerry Masslo]

usane uno solo di absolute, ne fai uno con relative e gli annidi l'absolute con width:100% e sempre sfalsandolo

[smaicol]

ti mando il css che sto usando...è la prima volta ke uso i liveli in questo modo se puoi dirmi come fare ad annidarli ti ringrazierei molto fino ad ora non mi è riuscito di sistemare il problema...

grazie moltissimo!
smaicol

/*stili per il layout fisso */

html,body {
padding: 0;
}

body {
font-family: Verdana, sans-serif;
font-size: 76%;
voice-family: "\"}\""; voice-family:inherit;
background-image: url(immagini/sfondo.gif);
background-repeat: repeat-y;
width: 1024px;
margin: 0 auto ;
}

div#top {
background-image: url(immagini/top.gif);
text-align: center;
height: 99px;
}

div#left {
background-color: transparent;
float: left;
width:140px;
top: 99px;
display: block;
}

div#right {
background-color: #000000;
float: right;
width:140px;
top: 99px;
display: block;
}

div#middle {
background-color: transparent;
text-align: justify;
width: 80%;
margin:0px 144px 0px 142px;
}

div#piedipagina {
background-color: #000000;
clear: left;
width: 100%;
font-family: verdana, sans-serif;
font-size: 9px;
height: 20px;
}


div.immagine {
padding:0px;
margin:1px 1px 1px 1px;
float:left;
}

div.immagine img {
display:block;
}

img.immagine2 {
margin:1px 2px 1px 2px;
float: left;
}

div {
text-align: center;
}

li {
text-align: left;
}

p {
text-align: justify;
}


li.numero {
list-style-type: decimal;
text-align: justify;
}

p.piedipagina {
position: relative;
top: 3px;
text-indent: 2px;
text-align: center;
color: #ffffff;
margin: 2px;
padding: 1px;
font-weight: bold;
}

.menu {
text-align: left;
display: block;
}

.menu a {
font-family: verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #ffffff;
text-decoration : none;
background-color: transparent;
width: 135px;
padding: 4px;
display: block;
}

.menu a:hover {
font-family: verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #1e90ff;
background-color: #ffffff;
background-color: transparent;
width: 135px;
display: block;
}

.menu2 {
text-align: left;
display: block;
padding: 4px;
}

.menu2 a {
font-family: verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #ffff00;
text-decoration : none;
background-color: #ffffff;
background-color: transparent;
width: 135px;
display: block;
}

.menu2 a:hover {
font-family: verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #1e90ff;
background-color: #000000;
background-color: transparent;
display: block;
}

.titolo {
text-align: left;
color: #000000;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px 2px 1px 2px;
}

.titolo1 {
text-align: left;
color: #ffffff;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px 2px 1px 2px;
}

.livello1 {
position: absolute;
top:101px;
left:143px;
color:white;
}

.livello2 {
position: absolute;
top:102px;
left:144px;
color:black;
}

[Jerry Masslo]

annidare significa infilarne uno dentro l'altro e va fatto nello html, col solo css ci potrei fare poco, ti posto un esempio:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {font-family:monospace}
.relativo {background:silver;
position:relative;
color:navy;
width:50%;
}
.assoluto {position:absolute;
top:1px;
left:1px;
color:aqua;
width:100%;
}
</style>
</head>
<body>
<div class="relativo">
Testo qualsiasi per vedere l'effetto dello sfalsamento
<div class="assoluto">Testo qualsiasi per vedere l'effetto dello sfalsamento</div>
</div>
</body>
</html>


quello che succede è che l'absolute prende a riferimento il relative in cui è annidato così basta dare un top:1px e left:1px per avere lo sfalsamento voluto, inoltre, il relative a differenza dell'absolute sposterà in basso un eventuale footer che è quello che ti interessa