Von rechts schwebte sidebar mit den wichtigsten Inhalten Flossen rund - wie?

Ich würde gerne eine Webseite layout mit der Seitenleiste auf der rechten Seite und den Haupt-content fließt um die sidebar.

Anforderungen:

  1. Content unter der sidebar besetzen sollten alle verfügbaren Breite
  2. Content unter der sidebar sollten nicht umbrochen werden, wenn es zuvor auf der linken Seite der sidebar
  3. Wichtigsten Inhalte sollten vorausgehen der Seitenleiste in das markup
  4. Sidebar hat eine Feste Breite, aber unbekannte/variable Höhe
  5. CSS-only - kein JavaScript-Lösungen

Könnte dies erreicht werden, ohne die Dritte Forderung: wenn die Seitenleiste ist vor die wichtigsten Inhalte im markup und im gleichen element enthalten, eine einfache float-macht den job. Eine Seitenleiste, bevor die wichtigsten Inhalte im markup ist keine option hier. Die Seitenleiste enthält zusätzliche Informationen und Werbung. Wenn dies ist, bevor die wichtigsten Inhalte im markup wird es lästig sein, CSSless Browser-und screenreader-Benutzer (auch mit "skip to ...' - links).

Könnte dies erreicht werden, ohne die vierte Forderung. Wenn die Seitenleiste hatten eine Feste Höhe, ich könnte legen Sie ein element enthalten, bevor die wichtigsten Inhalte, schweben Sie rechts und geben Sie ihm eine passende Breite und Höhe, und verwenden Sie dann die absolute Positionierung setzen Sie die Seitenleiste auf der Oberseite der vorgefertigten Raum.

Beispiel-markup (ohne CSS, relevanten bits nur):

<body>
  <div id="content">
    <p>
      Lorem ipsum ....
    </p>
    <p>
      Pellentesque ....
    </p>
    <div id="sidebar">
      /* has some form of fixed width */
    </div>
  </div>
</body>

Beispiel-layout:

alt-text http://webignition.net/images/layoutexample.png

Ich bin mir nicht sicher, ob dies möglich ist. Ich bin glücklich, zu akzeptieren, eine verbindliche Antwort, die besagt, dass dies nicht erreicht werden kann. Wenn dies nicht erreicht werden, würde ich mich über eine Erklärung - zu wissen, warum es nicht erreicht werden kann, ist viel mehr Wert, als nur das gesagt wird, das kann es nicht.

Update: ich bin glücklich, zu sehen, Antworten, die nicht erfüllen alle fünf Anforderungen, so lange wie eine Antwort-Staaten, die Anforderung wird ignoriert, plus die Folgen (Vorteile und Nachteile) der ignoriert die Anforderung. Ich kann dann eine fundierte Kompromisse.

Update 2: ich kann nicht ignorieren, Anforderung 3 - die sidebar kann nicht vor dem Inhalt.

InformationsquelleAutor Jon Cram | 2008-11-06
  1. 3

    Einfache schwimmende w/gegenüber Quellcode-Reihenfolge kann einfach nicht gemacht werden (w/o-CSS3-Entwurf Spezifikationen). Der pragmatische Ansatz ist, als erstes ein schönes layout, unterstützt die von Ihnen gewünschte Quelle um. HTML:

    <div id="content" class="noJs">
  <div id="floatSpace"></div>
  <p>Lorem ipsum ....</p>
  <p>Pellentesque ....</p>
  <div id="sidebar">content</div>
</div>

    CSS:

    #content {position:relative;}
#sidebar {width:150px; position:absolute; top:0; right:0;}
.noJs {padding-right:150px;}
.noJs #floatSpace {display:none;}
.js #floatSpace {float:right; width:150px;}

    Dieser erfüllt alle sondern 1 und 2. Nun, wir fügen Sie die JS:

    $(function () {
  //make floatSpace the same height as sidebar
  $('#floatSpace').height($('#sidebar').height());
  //trigger alternate layout
  $('#content')[0].className = 'js';
});

    Dadurch wird der Inhalt der float um #floatSpace, und #bleibt die sidebar positioniert werden. Das ist besser als das verschieben #sidebar, weil die Quellcode-Reihenfolge bleibt gleich (für Screenreader, die die Unterstützung von Javascript, etc.).

    Hier ein JSFiddle dieser in Aktion. Dieses layout kommt mit der unglücklichen Voraussetzung der Beibehaltung der floatSpace Höhe synchron mit der Seitenleiste Höhe. Wenn die sidebar dynamisch oder hat lazy-laden von Inhalten, müssen Sie erneut synchronisieren.

    • jsfiddle
    • danke. Ich habe eine Arbeit JSFiddle auf die Antwort.
    InformationsquelleAutor Steve Clay
  2. 2

    Ok, hier ist eine weitere Antwort dann, da können wir ignorieren, ist eine der Anforderungen, überspringen die erste Bedingung, wo der Inhalt umschließt unterhalb der Seitenleiste.

    #sidebar {
  float: left;
  width: 100px;
}
#actualContent {
  width: 700px;
  float: left;
}

    Die einzige änderung zu deinem code ist, dass Sie haben, um Ihre eigentlichen Inhalt in einem anderen wrapper.

    <div id="content">
    <div id="actualContent">
        <p>...</p>
        <p>...</p>
    </div>
    <div id="sidebar">
        <p>...</p>
    </div>
</div>
    InformationsquelleAutor nickf
  3. 2

    Ich glaube, du bist gonna haben, um ändern Sie die Reihenfolge für das setzen der sidebar ersten. Dann verwenden Sie CSS float Eigenschaft (ohne änderung der Reihenfolge div#sidebar würde am Ende unter die Absätze vs neben Ihnen). div#sidebar sollten Strecken wie erforderlich in der Höhe.

    CSS:

    #sidebar {
    float: right;
    width: 50px;
}

    HTML:

    <body>
  <div id="content">
    <div id="sidebar">
      /* has some form of fixed width */
    </div>

    <!-- paragraphs -->
  </div>
</body>

    @Jon Cram [Kommentar]

    Ok...nvm. Sie erklärte, Sie Ihre eigene Antwort und lehnte es gleichzeitig.

    Kannst du nicht float ein element, um andere Elemente definiert sind, bevor Sie es. Der browser muss in der Lage sein, um die Antwort "schwimmen herum, was?" Und es sieht aus, um das nächste element zu beginnen, weiterhin so weit wie nötig.

    • Sorry, bitte sehen Sie sich die Anforderungen: die sidebar muss nicht vor dem Haupt-Inhalt im markup.
    InformationsquelleAutor Jonathan Lonowski
  4. 1

    Wenn Sie neu anordnen, Ihre HTML, so dass die Seitenleiste ist vor den Inhalt, dann ist dies ganz einfach:

    #sidebar { float: right; width: 150px; }

    .. und dann nur sicherstellen, dass klar ist es im Nachhinein (am Ende der #content div).

    Ich weiß, deine Absichten sind an der richtigen Stelle, dienen die Inhalte in der richtigen Reihenfolge, aber es sei denn, Sie erwarten eine Menge von Datenverkehr von Sehbehinderten Benutzern, dann denke ich, müssen Sie möglicherweise zu überdenken, Ihre Prioritäten.

    • Cheers Nick - ich Schätze Sie über meine Absichten in Ihre Antwort. Mit der Seitenleiste in das markup, bevor der Inhalt ist wirklich nicht gut für mich. Ich hätte lieber die sidebar nach dem content und nicht über den Inhalt wrap schön.
    InformationsquelleAutor nickf
  5. 0

    Meines Wissens nach, der einzige Weg, um die Seitenleiste, wo Sie wollen (ohne die offensichtliche markup-Neuordnung) zu setzen, ist #content { position: relative; } und #sidebar { position: absolute; right: 0; top: 0; }

    Leider die absolute Positionierung wird die Seitenleiste aus der fließenden Gestaltung und auf die Inhalte der #content nicht vermeiden #sidebar wie Sie es wünschen.

    InformationsquelleAutor Richard Poole
  6. 0

    Habe ich nicht irgendwo testen Sie es jetzt, und ich bin mir nicht sicher, ob es funktionieren wird, aber Sie haben versucht, die Darstellung der sidebar-div als inline und gehen von dort aus?

    • Danke für den Vorschlag Frank - versucht, aber nicht in Anspruch nehmen.
    InformationsquelleAutor Gabe
Schreibe einen Kommentar