Layout a bande

[comecacchiosifà]

Gentili tutti,

il mio problema è il layout a bande: voglio ottenere la possibilità di mantenere il colore della banda anche quando l'utilizzatore, dopo aver ridotto il browser in larghezza, vuole usare la barra di scorrimento inferiore per vedere i contenuti non visibili a causa della dimensione ridotta della finestra del browser.

Ho trovato l'esempio qui su html.it (nella sezione CSS http://www.html.it/articoli/layout-a-bande-1/) ma non funziona se, appunto, riduco in larghezza il browser e poi con la barra inferiore di scorrimento del browser stesso voglio scorrere verso destra: il testo scorre ma il colore della banda viene interrotto alla larghezza che aveva la finestra del browser. Proprio brutto.

Potete vedere il vostro esempio qui: http://www.html.it/articoli/3033/esempio2.html avviatelo, riducete il browser in larghezza e usate la barra di scorrimento verso destra...

Domanda, come fare in modo che la banda rimanga fissa?

Grazie.

[homerbit]

modifica la classe .wrapper dando il 100% di with (come vedi è di larghezza fissa)
dovresti risolvere

[comecacchiosifà]

Grazie per la risposta.

Purtroppo però ancora non funziona.
In sintesi il mio codice è questo:

il file HTML:
<div class="banda">
<div class="wrapper">test test test</div>
</div>


il file CSS:
.banda
{
background: red;
width: 100%;

}

.wrapper
{
width: 100%; /* questo è il tuo suggerimento */
}

Prova a metterlo sul browser e riduci esageratamente la larghezza del browser, ora usando la barra di scorrimento inferiore fai scorrere verso destra... vedrai che non va. Ti viene in mente qualcosa? Grazie.

[homerbit]

testato su ff16, ie9 e chrome
ridimensionando la finestra dei vari browser la barra in basso non compare
di più non so dirti

[codencode]

Modifica .wrapper in

.wrapper { width:100%; max-width: 750px; padding: 1.5em 0; margin: 0 auto; }

Ottieni in questo modo un layout semifluido che non mostra più il difetto di prima.

[comecacchiosifà]

Ciao codencode,

niente da fare, puoi verificarlo tu stesso. Ricordati di ridurre il browser in larghezza e poi scorrere verso destra usando la barra inferiore di scorrimento.

[codencode]

Ho scritto quel codice proprio perché l'ho verificato.
Che browser e che versione del browser usi?

[comecacchiosifà]

IE 8 e FF 17

[codencode]

Ho controllato con i browser che hai indicato ed il comportamento è giusto. Sicuro di aver effettuato le modifiche suggerite?

[comecacchiosifà]

Voglio spiegarmi meglio: il nostro sito ha una barra uguale a quella che si può vedere sul sito di Microsoft http://www.microsoft.com/en-us/default.aspx - si tratta della barra azzurra che potete vedere quasi vicino al pie' di pagina, quella chiamata Follow us. A parte i contenuti, parlando della sola banda azzura: puoi ridimensionare quanto vuoi la finestra del browser e utilizzare poi le barre di scorrimento: la banda non viene mai spezzata o ridotta.

Ho provato a leggere il CSS ma non ho ancora molta esperienza con questi. Il mio sospetto è che vi sia un codice Javascript che controlla la larghezza del browser e ridimensiona il width ogni volta.