CSS: barre de liquide avec le texte ne s'étendra pas

J'ai une barre horizontale qui a reçu un width de 100%. Dans la barre horizontale, le texte est aligné à gauche dans un conteneur 978px. Chaque fois que la fenêtre du navigateur est réduite de sorte qu'elle soit inférieure à 978px, une barre de défilement apparaît en bas de la page. Chaque fois que je défile vers la droite, la barre ne couvre plus la largeur de la page mais est laissée derrière. Je comprends pourquoi cela arrive, mais je ne sais pas quoi faire pour y remédier. Si vous avez des idées, faites le moi savoir. Je vous remercie! bienCSS: barre de liquide avec le texte ne s'étendra pas

An example page

Source

2009-01-16 John Kurlak

, vous avez #header réglé à 100% de celui-ci est contenant bloc (ce qui serait le corps). Lorsque vous réduisez le corps, la largeur de l'en-tête diminue. Si la largeur du corps est inférieure à la largeur du conteneur, la barre noire ne s'étendra pas tout le chemin.

Que préférez-vous exactement cela?

-non ont une barre de défilement: sortez le récipient, centrer le texte en utilisant #header

-la barre noire se développe toute la distance: La meilleure façon de résoudre c'est de donner le récipient une couleur de fond .

Source

2009-01-16 05:25:31 cofiem

"Donner au conteneur une couleur de fond" est exactement ce que je pensais. – strager

Bien que cela fonctionne pour l'exemple que j'ai fourni, cela ne fonctionne pas dans le contexte de mon site Web. La raison en est que j'utilise la classe conteneur plusieurs fois dans mon code. Cependant, il n'est pas censé avoir un fond gris plusieurs fois. –

Que faites-vous quand il n'y a pas d'arrière-plan? Si les couleurs sont différentes, vous pouvez simplement utiliser plusieurs classes CSS. – cofiem

Change:

width: 978px;

à:

max-width: 978px

qui semblait faire l'affaire dans FF3, IE7 et chrome.

Source

2009-01-16 05:28:30

Bien que cela fonctionne pour l'exemple que j'ai fourni, cela ne fonctionne pas dans le contexte de mon site Web. La raison en est que le paramétrage de mon "wrapper" pour avoir une largeur maximale et non une largeur fait que les parties de ma page se rétrécissent quand je ne les veux pas si la fenêtre du navigateur est trop petite pour les contenir. –

Une meilleure façon de dire que: la page ne défile jamais si la largeur maximale est définie ... elle ne cesse de diminuer. Je veux le faire défiler. –

@John, Peut-être définir min-largeur aussi bien? – strager

CSS: barre de liquide avec le texte ne s'étendra pas

Répondre

Questions connexes