Heute bin ich auf ein sehr unangenehmes Problem gestoßen, ich muss das Front-End-Layout für eine Website erstellen und es hat ein bestimmtes Design-Element auf der Seite, das mich (selbst) verwirrte.
Jetzt bin ich nicht gerade mit HTML, CSS-Positionierung, Layouts usw. vertraut, also bitte machen Sie keine "Raten" , wie ich es lösen könnte. Ich möchte ein funktionierendes Beispiel.
Hier ist ein Spiel mit meinem Code und Problem:
Ссылка Ссылка
Was gerade passiert;
Die #container hat eine Mindesthöhe von 100% (roter Hintergrund) von 970px. Dies ist die Breite, die die Seite mindestens haben muss. Das #top (hellbrauner Hintergrund) div ist irrelevant für das Problem, aber Teil des Designs.
Das Problem liegt in #header (violetter Hintergrund), das momentan eine Breite von 1022px hat (zu breit für 1024px Auflösung + eine Bildlaufleiste, sogar mit einem maximierten Fenster) und einem negativen linken Rand, um es auf dem Container zu zentrieren, was muss passieren. Wenn die Breite der Bildschirmbreite unter 1022 Pixel fällt, erscheint eine horizontale Bildlaufleiste, da das dünnste Element auf der Seite 1022 Pixel breit ist. (Das Verhalten ist identisch mit der absoluten Position und einem negativen Offset nach links)
Was ich möchte passiert;
Ich möchte, dass der Überlauf von #header über #container in die Seiten verschwindet und nur eine Bildlaufleiste erhält, wenn das Ansichtsfenster unter 970 Pixel breit wird. (Wenn jemand das umformulieren kann)
Lassen Sie mich ein wenig klarer darüber sein:
Wenn möglich, möchte ich, dass das Layout den ganzen Weg bis IE6 unterstützt, obwohl IE7 + in Ordnung ist. Die letzte Seite wird aufgefordert, Chrome Frame trotzdem zu installieren. Und vergessen Sie natürlich nicht Chrome, FF 3.5+ .. (Opera?). Die Verwendung von JS ist nicht akzeptabel, es sei denn, Sie können mich davon überzeugen, dass es absolut keinen anderen Weg gibt, aber jQuery wird auf der Seite vorhanden sein.
Danke, dass Sie es zumindest versuchen! (Fordere dich heraus!: D)
Dieser Code funktionierte für mich in FF / Chrome / Safari / Opera. Ich kann nicht im IE testen, da ich jetzt auf dem Mac bin, aber im IE 7 + arbeiten muss.
Beispiel: Ссылка
Grundidee ist, # header in einen anderen Container mit "width: 100%; min-width: 970px;" und platziere es außerhalb von #container, damit es den ganzen Überlauf für dich erledigt.
EDIT 2: Lösung, die in IE6 funktioniert: Ссылка
EDIT 3: Diese Version ist in modernen Browsern und alten IE's auf 100% Höhe eingestellt: Ссылка
Es ist schwer, die einzige wirkliche Lösung, die ich mir vorstellen kann, ist, dass Sie Media-Abfragen wie folgt verwenden:
%Vor%Es wird von alten Browsern nicht unterstützt, da würde man ein Javascript benötigen!
Wie wäre es, wenn der Header auf eine minimale Breite von 970px und eine maximale Breite von 1022px eingestellt wäre? Es gibt zB Hacks, um min und max Breite arbeiten zu lassen. Dies würde dazu führen, dass Bildlaufleisten angezeigt werden, nachdem das Ansichtsfenster auf unter 970 verkleinert wurde. Während Sie das Ansichtsfenster dehnen, würde die Kopfzeile bis 1022 anwachsen, danach würde sie 1022 bleiben.
Diesen in Chrome haben.
Legen Sie ein inneres div in den # header
Der Header hat relative Position und keinen Float und mit 970px
Das innere div hat eine feste Position und eine Breite von 1022px und einen Rand von 0-26px
- Bearbeiten
funktioniert aber nicht in IE7
- Bearbeiten
Das funktioniert auch im IE7 Ссылка fügt einfach ein weiteres inneres div hinzu
Das erste innere div ist position fixed und width 100% und text-align center
Das zweite innere div ist Rand 0 auto und Breite 1022px
Kann jemand es in IE6
testen- Bearbeiten
nein funktioniert nicht, wenn Sie Inhalt in Ihrem #container haben. Position fixiert ist keine Option
Ich gehe davon aus, dass Sie hinter einem festen Inhaltscontainer mit 960 Pixeln eine oder zwei Ebenen mit einstellbarer Breite benötigen. Die Verwendung von float bei Containern mit einstellbarer Breite macht es fast unmöglich, das zu tun, was Sie wollen. Verwenden Sie stattdessen postion: absolute für einen Containerhalter (a.k.a. wrapper) und position: relative für die Container für innere Inhalte. Kein Javascript ist notwendig.
Ich empfehle, #header aus dem primären # content-Container zu entfernen und das Hintergrundbild vom #header zu trennen, damit sie unabhängig gerendert und positioniert werden können.