CSS: Feste oder Layout-Float? [geschlossen]

Question

Meine Frage dreht sich um CSS festes Layout vs einem Float-Layout, die die Breite des Browsers zu füllen erstreckt.

Im Moment ist die Frage, die ich in renne ist den Mastkorb Resize hat in Abhängigkeit von der Breite der Seite (etwas, das ich verstehe nicht möglich aktuellen Browser-Implementierung von background-image: size; der CSS3). An diesem Punkt fühle ich mich wie eine Sackgasse rundum erreicht habe: Sie überarbeite ich die Website ein festes CSS-Layout zu verwenden, oder halte ich das aktuelle Layout und versuchen, das Mastkorb Bild zu machen erweitert die meisten Platz zur Verfügung gestellt füllen ? Außerdem, was sind die Vor- und Nachteile der auf eine feste Breite Layout zu bewegen, und die anderen (unsichtbaren) Verzweigungen eines Layouts über eine andere Verwendung?

Der Standort in Frage als Kommentar auf diese Frage gegeben werden - ich will nicht als Versuch zu sehen, Verkehr zu erhöhen

.

Edit:? Jede andere Meinung

Answer 1

Was ist mehr oder weniger des Bildes enthüllt, wie der Browser geändert wird, anstatt das Bild Skalierung? Es ist nicht ganz die gleiche Wirkung, aber es ist eine einfache Möglichkeit, einen ganzen Raum mit einem Bild zu füllen.

Nehmen wir an, im Interesse des Beispiels, das Hintergrundbild Ihres Mastkorb das enthält ein Logo von einer Art auf, sagen wir, einer Fotografie einer Skyline der Stadt. Dies ist insgesamt 1600 Pixel breit. Das Logo setzt sich auf der linken Seite des Bildes, während das Stadtbild ganz rechts erstreckt. Und nehmen wir an, Ihr Markup ungefähr wie folgt aussieht:

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

Wir können das #page Element zu einer elastischen Breite und wenden ein Hintergrundbild das #masthead Element:

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

Was hier passiert, ist, dass das #masthead Element auf die Breite des #page Elements erweitern, die irgendwo zwischen 800px und 1600px breit (inklusive), je nachdem, wie breit das Browser-Fenster ist sein werden. Wenn das #page Element 800px breit ist, sehen Sie nur die am weitesten links 800px auf die Skyline; wenn es 1600px breit, sehen Sie die gesamte Skyline. Auf diese Weise Ihr Logo ist immer sichtbar und wenn der Browser der Größe verändert wird, mehr auf das Stadtbild wird enthüllt.

Dies erfordert ein größeres Bild mit mit (zumindest so breit wie Ihre max-width, wenn Sie elastische gehen) zu starten, aber das Ergebnis ist Topp dass, egal gut aussehen, welche Größe es ist - ohne sich auf, wie strager erwähnt, Browser Bildskalierungsalgorithmen.

Answer 2

Was für ein Bild ist es? Ist ein Teil davon wiederholbar? Manchmal ist die Verwendung von zwei Schichten, eine oder das Tag für ein sich wiederholendes Element des Bildes und eine andere für das feststehende Element.

Kann sehen wir ein Beispiel nennen? Es wäre einfacher, auf die richtige Antwort für Ihr Problem zu erhalten.

Answer 3

Wenn Sie versuchen, Ihr Hintergrund-Bild in die Breite Ihrer Seite zu erweitern, ist es besser, ein festes Größe Layout zu verwenden, da es keine Cross-Browser-Methode ist ein Hintergrund-Bild in unterschiedlichen Größen erweitern, das zu machen sind abhängig von der Besucherauflösung.

Feste Breite Layouts bieten mehr Flexibilität für den Designer, aber nicht für den Besucher. Wenn Sie ein Layout erstellen, die X Pixel breit ist, dann können Sie Ihre Website Pixel-für-Pixel-Feinabstimmung nach Ihren Wünschen während „float“ Layouts (ich nenne sie flüssige Layouts) basieren vollständig auf Prozentwerte und daher unterscheiden sich von Computer-zu-Computer. Ich finde das schwierig, weil Sie das Layout auf dem Bildschirm testen können und nicht wissen, wie es scheint, auf jemandem anderen, und (für ex.) Ein 20px-Marge hat mehr Wirkung auf 768px oder 960px feste Breite Layout, als es auf ein 1280px-flüssig-Computer-Bildschirm.

Die wichtigsten con, IMO, auf eine feste Breite Layout, ist die Tatsache, dass es auf größeren Bildschirmen und zu groß für kleinere Bildschirme zu klein aussieht. 768px verwendete ein ziemlich Standard mit fester Breite Layout zu sein, aber jetzt, dass ist zu klein, als die Welt von 800x600 weg bewegt. Jetzt 960px ist ziemlich Standard, das für 800x600 zu groß ist, aber immer noch zu klein auf 1280x1024.

Es hängt alles von Ihrem Publikum und wie Sie Ihre Website passt zusammen. Einige Layout kann flüssig gemacht werden und arbeiten völlig in Ordnung, während andere müssen festgelegt werden (wie die, die Sie beschrieben).

Answer 4

Warum nicht ein Tag für Ihr Header-Bild (Mastkorb) verwenden, anstatt ein Hintergrundbild zu verwenden?

Ich würde vorschlagen, nicht Ihre Header-Grafik Skalierung; Die meisten Browser sind schrecklich Bildskalierung (nächster Nachbar was?), und es wird für viele Menschen nicht gut aus.

Ich bin für Fluid- / float / Flüssig-Layout selbst. Ich Tatsache, die meisten meiner Seiten eine einzelne Spalte zu verwenden, so habe ich nicht über alle Komplexitäten „normalen“ Seitenlayouts haben zu Sorgen.

Answer 5

Es ist generell eine schlechte Idee, ein Layout, in der Text-Spalten an den Browser erweitern mit zu erstellen. Text wird schwer zu lesen, wenn die Leitungen zu lang wachsen. Ich empfehle, mit für den Text-Spalte, vielleicht um die 50 Buchstaben breit auf eine feste Regelung.