Stellen Sie sicher, dass eine Webseite bei der Größenanpassung gleich aussieht

Question

Ich konnte keinen vorherigen Beitrag dafür finden, und ich entschuldige mich, wenn dies eine Uber-N00b-Frage ist.

Ich arbeite an meiner ersten Übungsseite (gerade XHTML und CSS/3 Stufen gerade). Ich wollte die Seite testen, um sicherzustellen, dass alles, wenn ich die Größe des Browserfensters verkleinere, immer noch gleich aussieht. Wenn ich das tat, überlappte meine Navigationsspalte einen Teil der Seite und das Hintergrundbild, das ich in meine h1-Kopfzeile eingebettet habe, füllt nicht alle x-Achsen vollständig nach rechts.

Was habe ich falsch gemacht, und wie kann ich das korrigieren (Webstandards)?

P. S ... Hier ist der Code

h1 { 
    font-size: x-large; 
    color: white; 
    padding-top: 2em; 
    padding-bottom: .2em; 
    padding-left: .4em; 
    margin: 0; 
    background: navy url(backgrounds/header-bg.jpg) repeat-y right; 
} 

#navigation { 
    width: 180px; 
    height: 484px; 
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat; 
} 

Answer 1

mehrere Strategien Es gibt keine. es ist wirklich eine Kunst und es ist ein wenig zu aufwendig, um hier vollständig beantwortet zu werden. Es ist etwas, mit dem sich Webdesigner seit Jahren beschäftigen, und Sie werden Ihren eigenen Stil und Ihre eigene Strategie entwickeln, aber es gibt gute Empfehlungen und Best Practices, die Sie im Web finden können.

würde ich mit dieser Suche starten:

http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC

Dies ist das erste wirklich gute Ergebnis aus dieser Suche: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript

aber es gibt andere auch gute Ergebnisse.

Answer 2

Versuchen Sie, dem Hauptbehälter oder der Karosserie eine feste Breite zu geben.

Wenn Sie Ihren aktuellen Code veröffentlichen, geben wir Ihnen möglicherweise eine bessere Lösung.

Answer 3

gut Ah, das würde einen Kommentar sein, aber ich werde einfach weiter ...

Die nav Spalte Überlappung ist höchstwahrscheinlich, weil sie mit einer festen Breite (px oder em definiert ist (die sind für diesen Zweck festgelegt)) und nicht eine flüssige Einheit wie Prozent. Bei allem Respekt für David Stratton (und er hat Recht, es ist eine Kunst, die hier ausführlich beantwortet werden kann), versuchen Sie, Ihr Layout mit Prozentsätzen zu erstellen, wenn es angebracht ist, um die Seite gut skalieren zu lassen.

In Reaktion auf die Idee der Breite eines äußeren Behälters Befestigungs, dass es auch eine Möglichkeit, aber eine, die nicht gut abbaut, wenn der Benutzer einen sehr kleinen oder großen Bildschirm hat oder ein sehr hohe oder niedrige Auflösung.

Versuchen mit Flüssigkeit Seitenlayout Web-Design googeln