[CSS] sfondo "div"

Scusa lilafel se ti ho copiato la pagina ma prova a vedere le modifiche che ti ho fatto così riesci a capire cosa volevo dirti!!!

Ti mando il link via mp!

non mi è arrivato alcun mp... :-((((((((((((((

Poi... se io faccio l'immagine, esempio, 100x100 e poi la pagina è molto lunga... si ripete continuamente il gradiente in spazi piccoli (100x100), no?

Era lungo perchè ho scritto parecchio...

Comunque si, se l'immagine è stretta rispetto alla larghezza del div e la ripeti sia lungo l'asse x che y fa casino... La migliore cosa è creare un immagine sottile e larga quanto il div (quindi non usare le percentuali) e ripeterla lungo l'asse y oppure fai un'immagine altissima e strettissima da ripetere lungo l'asse x...(in questo caso se l'immagine è un gradiente non lo vedi bene fino a che il div non raggiunge l'altezza dell'immagine...

Insomma è un ragionamento casinoso e si farebbe prima a farlo che a spiegarlo...

Ciao

[Xsescott]

ihihihhihi sempre la solita ;)
dai su,convintaaaaaaaaaaaaaaaaaaaaaa :P

non mi è arrivato alcun mp... :-((((((((((((((

Poi... se io faccio l'immagine, esempio, 100x100 e poi la pagina è molto lunga... si ripete continuamente il gradiente in spazi piccoli (100x100), no?

se conosci la larghezza del campo (più probabile dell'altezza) potresti usare un gradiente verticale e non avere problemi di ripetizione

Il problema è che se il testo nel div cambia da pagina a pagina, è la lunghezza del gradiente che fa la differenza... Ovvero se l'immagine è altissima e il div basso si percepirà poco l'effetto!

[heracleum]

Se ho capito bene la questione (sfondo gradiente verticale in DIV che deve adattarsi -stretch- all'altezza del div determinata dal contenuto variabile), la soluzione c'è, in parole povere:
- un DIV contenitore con dentro..
- un DIV contenuto con il vero testo o altro (in primo piano)
- una IMG con l'immagine di sfondo gradiente (in secondo piano)
semplicemente la IMG da le dimensioni adattate (100% x 100%) al DIV contenitore.
A seconda di quanta roba c'è nel div con il testo il div padre viene allungato in altezza, ergo la IMG col gradiente viene anch'essa "strecciata" (stretched) risolvendo il problema.

Se non è questa la soluzione che vi interessava, peccato.
Se invece è proprio questa sarò ben lieto -alla conferma- di scrivervi direttamente il codice HTML/CSS visto che sarà l'ultimo mio post in questo forum:
sono mancato 3 giorni e rileggendo i nuovi post non ce n'era uno a cui potessi rispondere tranne questo (tecnico), non è un bel segnale, anzi pessimo...
e mette tristezza.

Congratulazioni a chi è finalmente riuscito a uccidere definitivamente il forum.
Ciao

ti consiglio di creare un pattern per lo sfondo.. son quasi le 2 di notte.. se ho capito bene tu hai un immgine di 1600px..... troppo grande.. sostituiscila con un pattern cosi il caricamento di dimezza e non hai problemi di visibilità.

vi consiglio questa interessantissima guida per capire e lavorare con i div :)

http://www.html.it/css/guida_css_15.htm

Stanotte ci si mette pure l'insonnia...

Faccio un annuncio ufficiale:

HERACLEUM SE TE NE VAI ANCHE TU, MI SUICIDO!!!

/me triste


cmq... spiegami un po' meglio la tua filippica (spiegamela, per cortesia, come se fossi una deficiente).

Fossi???

mi sono perso nelle spiegazioni, che servirebbero anche a me.

allora, il problema è: abbiamo un header, che deve essere un'immagine, o almeno avere un'immagine come sfondo.

in teoria basta il comando background:url(); nel css (per chi ne fa uso). almeno leggendo diversi codici, funziona. per es http://www.csszengarden.com

nella realtà dei fatti, a Lilafel che ha aperto la discussione e pure a me che sono muy bestia, la cosa non funziona.

suggerimenti: bisogna che il div header abbia scritto dentro qualcosa, e poi l'immagine di sfondo. oppure che il div header abbia le stesse dimensioni dell'immagine.

mi sembra di aver provato la seconda soluzione, che pure mi andrebbe bene, ma non dava risultati. non visualizzave. adesso magari ritento e poi se funziona giubilerò qui dentro, dicendo a tutti che la via è aperta.

ok, fatto! funziona! potete pure vedere il mio css a questo indirizzo http://bbll.altervista.org/css/nuovo.css

e nell'html ho usato un div vuoto (!) chiamato #cima, al quale ho dato come dimensioni

width:auto;
height:257px;

cioè la larghezza la trova da solo e alto come l'immagine che uso.

e funziona senza scrivere niente nel div!

Ma scusa, decidi l'altezza?
Ma nei div non lo fai... nel senso che è automatica a seconda di ciò che scrivi...

se vuoi che si veda bene l'immagine di sfondo è l'unico modo, altrimenti metti una tinta unita o un immagine piccola di ripetizione(10x10px)

Già che ci sono... approfitto.
Ho questo, nel mio css

A:LINK{
	text-decoration : none;
	color : #ffffff ;
	  }
	  
A:VISITED{
	text-decoration : none;
	color : #ffffff;
	     }
a:hover{
	text-decoration: overline underline;
	color : #ffffff;
	font weight : bold;
	     }

poi però vorrei che nel div testo, il color del font (dei link - visited - e hover) fosse #000000
Si può impostare nel div diverso dal body? perché io ci ho provato ma, ovviamente, non sono riuscita...

Se non è questa la soluzione che vi interessava, peccato.
Se invece è proprio questa sarò ben lieto -alla conferma- di scrivervi direttamente il codice HTML/CSS visto che sarà l'ultimo mio post in questo forum:
sono mancato 3 giorni e rileggendo i nuovi post non ce n'era uno a cui potessi rispondere tranne questo (tecnico), non è un bel segnale, anzi pessimo...
e mette tristezza.

Congratulazioni a chi è finalmente riuscito a uccidere definitivamente il forum.
Ciao

Perchè heracleum te ne vai? Tu sei l'AlterGod per definizione, i tuoi post sono fonte di saggezza e scritti egregiamente, un fiore all'occhiello di questo forum! Ogni tuo post è in grado di fare sempre chiarezza su ogni tipo di argomento anche se arriva per 1000esimo!!!

Lilafel scusa l'OT

Ma scusa, decidi l'altezza?
Ma nei div non lo fai... nel senso che è automatica a seconda di ciò che scrivi...

eh sì, mica vero che il div debba essere elastico epr forza, e formarsi a seconda di cosa ci sta dentro.

per esempio il mio div contenitore più grande (#testo) è largo 650px

in quanto ai links nel css, adesso guardo bene la pagina che vuoi mettere a posto e poi provo un suggerimento.

anche perché non ho ben chiaro cosa intendi con

però vorrei che nel div testo, il color del font (dei link - visited - e hover) fosse #000000
Si può impostare nel div diverso dal body?

in breve, direi di sì, ogni div può avere i suoi attributi. immagino che magari dando le direttive generali crea un piccolo conflitto, anche se non dovrebbe. ma adesso guardo il codice intero e sparo una tavanata :)

allora ho capito cosa vuoi dire: vuoi che i links FUORI dal div testo abbiano quei colori

A:LINK{
	text-decoration : none;
	color : #ffffff ;
	  }
	  
A:VISITED{
	text-decoration : none;
	color : #ffffff;
	     }
a:hover{
	text-decoration: overline underline;
	color : #ffffff;
	font weight : bold;
	     }

ma poi DENTRO il div testo i links siano di un colore diverso.

in breve, dando le istruzioni qui sopra, hai detto che TUTTI i links devono essere x, TUTTI i links con attributo hover devono essere y e così via.

quindi devi fare in modo che la speciale classe di links appartenenti a div testo siano, boh, f piuttosto che p.

un codice per farlo potrebbe essere

a.body{
	text-decoration : none;
	color : #f5f5ff;
	     }

ho messo un colore a caso, quello dello sfondo dei post di questo forum

in questo modo TUTTI i links CONTENUTI in div testo vengono del colore #f5f5ff
Immagino si potrebbe lavorare anche per avere gli effetti hover e visited, se non sbaglio basta fare

a.body:hover
{
	text-decoration : none;
	color : #e1e4f2;
	     }

e

a.body:visted{
	text-decoration : none;
	color : #e1e4f2;
	     }

in linea di massima dovrebbe funzionare. prova e mi dici. ciao

Ciao, ho fatto come mi hai detto e cioè:

/* CSS Document */
a.body{
	text-decoration : none;
	color : #ffffff ;
	  }
	  
a.body:VISITED{
	text-decoration : none;
	color : #ffffff;
	     }
a.body:hover{
	text-decoration: overline underline;
	color : #ffffff;
	font weight : bold;
	     }

body {
	font-family: Verdana; 
	font-size: 14px;
	color : #FFFFFF;
	background-image :   url(grafica/sfondo.gif);
	text-align: center;
	
}

a.div#testo{
	text-decoration : none;
	color : #000000 ;
	  }
	  
a.div#testo:VISITED{
	text-decoration : none;
	color : #000000;
	     }
a.div#testo:hover{
	text-decoration: overline underline;
	color : #000000;
	font weight : bold;
	     }


div#testo {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  text-align: center;
  padding: 1em;
overflow: auto;
  background-color: #E1E1E1;
  font-family: Verdana; 
	font-size: 12px;
	color : #000000;
}




.firma {
font-family : Verdana;
      color : #ffffff;
  font-size : xx-small;
 text-align : center;
font-weight : normal;
}

ma purtroppo mi è venuta una schifezza: tutti i link blu sottolineati.

allor generico metti questo

a:link
{
   text-decoration : none;
   color : #ffffff ;
}
	  
a:visited
{
   text-decoration : none;
   color : #ffffff;
}

a:hover
{
   text-decoration: overline underline;
   color : #ffffff;
   font weight : bold;
}

e poi per il div che deve avere colori diversi (es. testo)

div#testo a
{
   text-decoration : none;
   color : #colorechevuoi;
}

div#testo a:visited
{
   text-decoration : none;
   color : #colorechevuoi;
}

div#testo a:hover
{
   text-decoration : none;
   color : #colorechevuoi;
}

Grande!!!

Funziona :-)))) grazie!

ed è pure più bello cme codice. però a me funzionava anche alla mia maniera. esempio, nel mio css (che è valido w3c) ho

a.navigazione
{text-decoration:none;}

poi magari la purcaria veniva quando provavo a inventare le specifiche per il css4 :D tipo a.navigazione:hover ahhahaha! più incasinato non potevo farlo

ulteriore passaggio per migliorare il codice e il css, io ho fatto così, magari a qualcuno può servire e quindi lo dico qui:

avevo detto che avevo risolto il problema dell'immagine in header inserendo un div vuoto delle dimensioni dell'immagine che volevo inserire.

la soluzione funzionava, a tutti gli effetti. ma se per caso avessi deciso di inserire nel sito uno switcher per cambiare al volo gli stili? quel div vuoto sarebbe stato un problema, a meno di non definirlo nel css switchato con dimensioni nulle (0 in altezza, 0 in larghezza, 0 margini e 0 padding insomma).

però l'ho eliminato, e mi è bastato dare come margin-top al primo elemento che viene dopo l'immagine (nel mio caso, un h1) l'altezza dell'immagine stessa + un paio di px. in questo modo, ho messo l'immagine come background no repeat al div contenitore che ho predisposto (non body, ma quello appena dentro, nel mio caso #testo) e ho eliminato il div vuoto.

è più facile vedere il codice che star qui a spiegare, quindi se qualcuno vuole approfittare fate pure, magari anche per darmi del bietolo e spiegarmi che ci sono soluzioni ancora meglio :)

http://bbll.altervista.org/css/nuovo.css per vedere il css
per il codice html basta fare visualizza html in IE oppure ctrl+U in firefox/mozilla dalla pagina del sito.