Salve ragazzi, ho un sito web con sfondo fisso ( un immagine che si ripete verticalmente ), purtroppo quando effettuo un allungamento di alcuni div lo sfondo non si ripete pù, anche se ho settato height:100%;
Per farvi capire meglio, cliccate sul bottone "+" dove c'è scritto "aggiornamenti sito web"
Cliccami
Come vedete, scorrendo verso il basso con la scroll-bar, lo sfondo rosso non si ripete piu. Come risolvo?
Ciao,
prova così:
1. prima della chiusura dell'ultimo div metti un altro div in questo modo:
<div style="clear: both"></div>
</div>
</body>
</html>
2. Dal css di #body togli definitivamente queste due proprietà: float: none e height: 100%
Dovrebbe funzionare...
Ciao!
Ho modificato come mi hai detto ( grazie prima di tuto ) ma sembra esserci qualche problema :P
Guarda tu stesso: Clicca qui!
Secondo me c'è una chiusura div di troppo o di meno, se io lo apro con firebug, vedo il tag che ti ho suggerito nella chiusura div prima di quella che intendo io... se guardo invece il codice sorgente la vedo al posto (apparentemente) giusto...
ora, il mio consiglio è: identa bene il codice e controlla tutte le aperture e chiusure... guarda l'immagine che ti allego, se con firebug io provo a simulare la modifica del codice il problema si risolve, fai un bel controllo.
:-)
Se il clear si trovasse nella posizione che vedi nell'immagine funzionerebbe...
dovrei guardarti tutto il codice ma la soluzione c'è di sicuro, devi solo smanettare un po'... guarda come viene il tu o sfondo se simulo quello che ti dicevo.
Purtroppo l'immagine fa vedere poco... :-( mi spiace
Ho risolto, avevo dimenticato una chiusura di un div, ho solo due richieste, se per te non è disturbo, considerando che ti ho fatto perdere la testa!
1 = Compare un margine sotto, da dove l'ha preso il browser? Nei css ho specificato l'assenza di margini!
2 = mi spieghi questa cosa del clear both? O.o E' una specie di trucco dei Web Designer?
Ciao, sono contento, hai visto che era una chiusura? ;-)
Rispondo alle tue domande:
1. Io non vedo margin in basso ma solo un padding-bottom di 10px, tuttavia magari lo stiamo guardando con un browser differente e come saprai le cose cambiano soprattutto con explorer versioni più vecchie e mac che solitamente ha qualche differenza sulla grandezza dei caratteri.
2. Clear non è un trucco ma una proprietà. Viene usata solitamente per annullare l'effetto del float. Devi pensare agli elementi flottanti come a elementi che comunicano di essere flottanti agli altri elementi circostanti. Per capirci meglio: quando dai un float a un div devi dirlo agli altri elementi della pagina più in prossimità che non devono flottare rispetto a quel div. Cioè se do float: left a un div che sta in all'interno di un altro div, tutto quello che c'è intorno a quel div tenterà di appoggiarsi al div floattante.
ESEMPIO:
A è in float left;
B è in float right;
A e B (se hanno una larghezza che glielo permette) staranno uno di fianco all'altro ma mettiamo il caso che ci sia un altro div; C e che arriva appena dopo B. C penserà che dovrà mettersi alla sinistra di B che gli fa sapere di essere in float right.
Ora se voglio che C non consideri il float di B devo fare qualcosa perchè C si disinteressi del fatto che B è flottante... ecco che ci viene in aiuto il clear.
Devi fare esperimenti con i float e capire come si comportano. La parte più difficoltosa dei CSS è proprio questa: capire bene il funzionamento delle proprietà float; clear e position. Sono le proprietà che in definitiva ti permettono di posizionare in tutti i modi possibili gli elementi nello spazio. Poi ovviamente i css non si fermano qui, ma se prendi confidenza con queste regole sei vicino a fare un po' quello che vuoi.
Altra cosa molto importante è l'ordine nel codice: ho risposto a 2 quesiti in questo forum e due su due avevano in primis problemi di disattenzione su codice HTML più che su proprietà css (le chiusure dei div ti fanno impazzire, bisogna identare e creare commenti nell'html in modo da poter intervenire più facilmente e trovare al volo errori).
A presto!
Grazie per tutto, davvero gentile. Alla prossima!
Ciao figurati!
a presto
Permessi di invio
Rispondi quotando