Html Neuling! background-image question

Question

Ich lerne HTML, und ich wollte üben, indem ich eine Rechnung, die mir von der Electronics Expo geschickt wurde, neu erstelle.

Allerdings habe ich die background-image -Eigenschaft verwendet und wiederholt mit repeat-x und jetzt erstreckt sich der Hintergrund über die Seite so sehr, dass es einen horizontalen Balken zum Ziehen hat.

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

können Sie sehen, was ich oben in meinem Link tat.

Auch ich würde wirklich einige Tipps zur Vereinfachung meiner CSS-Codierung zu schätzen wissen. Es scheint wirklich unordentlich und ich muss jedes Element bewegen, sobald sich etwas ändert. -.-

Danke!

Answer 1

Das liegt daran, dass Sie relativ positionierte Elemente haben, die keine feste Breite haben - diese Elemente nehmen die Breite ihrer Eltern an, was der Breite Ihrer Rechnung entspricht, und ragen aus der Seite heraus, was den Überlauf verursacht. Geben Sie ihnen eine Hintergrundfarbe, und Sie können dies ganz deutlich:

geben die Elemente eine feste Breite dieses Problem zu beheben, oder alternativ aussehen zu anderen Methoden der Auslegen Ihre Elemente, wie sie schweben.

---

Zusätzlich zu diesem Problem sind Sie auch das Wiederholen des id Attribut, das ungültige HTML erstellt. Sie sollten das Attribut class für mehrere Elemente verwenden, die den gleichen Stil teilen, oder besser noch, indem Sie Vererbung und die Kaskade verwenden, um nicht jedes einzelne Element ein id zu geben.

Weiterführende Literatur:

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

Answer 2

Problem ist nicht der Hintergrund. Das Problem ist die relative Position, die du den Elementen auf Blockebene gibst, ohne ihre Breite zu definieren ...

Die h2 Elemente mögen (Ship To :) und (Telefon) und alle Absatzelemente. Sie müssen diesen Elementen eine bestimmte Breite geben und es wird gut funktionieren

Versuchen Sie, diese Elemente eine Hintergrundfarbe: gelb; um zu sehen, wie der Fluss innerhalb des Dokuments (für Ihren Debugging-Zweck) und Sie sehen, was ich meine