Html новичок! background-image question

Question

Я изучаю HTML, и я хотел практиковать, воссоздавая счет, отправленный мне Electronics Expo.

Тем не менее, я использовал свойство background-image и повторил его с помощью repeat-x, и теперь фон растягивается по всей странице настолько, что он имеет горизонтальную полосу для перетаскивания.

http://htmlpocketreference.110mb.com/index.html

Вы можете увидеть, что я сделал в моей ссылке выше.

Кроме того, я был бы очень признателен за советы по упрощению моего кодирования CSS. Это кажется действительно беспорядочным, и я должен перемещать каждый элемент, как только что-то меняется. -.-

Спасибо!

Answer 1

Это потому, что у вас есть относительно позиционированные элементы, которые не имеют фиксированной ширины - эти элементы берут на себя ширину своих родителей, которая является шириной вашего счета, и торчат из страницы, вызывая переполнение. Дайте им цвет фона, и вы можете увидеть это совершенно ясно:

Дайте элементы фиксированной ширину, чтобы исправить это, или, наоборот, искать другие способы укладки ваших элементов, как плавающие их.

---

В дополнение к этой проблеме, вы также повторять атрибут id, что создает недопустимый HTML. Вы должны посмотреть на использование атрибута class для нескольких элементов, разделяющих один и тот же стиль, или даже лучше, посмотрите на использование наследования и каскада, чтобы не давать каждый элемент a id.

Дальнейшее чтение:

• CSS Positioning 101
• Inheritance and Cascade from The Web Standards Curriculum

Answer 2

Проблема не фон. Проблема заключается в том, что вы относитесь к элементам уровня блока, не определяя их ширину ...

Элементы h2, такие как (Ship To :) и (Phone) и все элементы абзаца. Вы должны дать этим элементам определенную ширину, и она будет работать нормально

Попробуйте придать этим элементам цвет фона: желтый; чтобы увидеть, как поток внутри документа (для вашей цели отладки), и вы увидите, что я имею в виду