Div Layout - Repeating Bild Hilfe

Question

Ich versuche, den wichtigsten Inhalt Teil meiner Website in diesem Notebook-Stil-Look gewickelt werden.

Allerdings habe ich auf dem Hauptinhaltsabschnitt ein sich wiederholendes Bild, das manchmal auf halbem Weg durch das Bild schneidet und nicht richtig aussieht, hat jemand irgendwelche Ideen, wie man das entweder in Photoshop oder mit CSS beheben kann?

Ich muss ein flüssiges Layout vertikal beibehalten, mit der festen Breite, aber ich möchte, dass es wie ein Notebook aussieht und nicht ausgeschnitten und trashig aussieht. Hier

ist die Seite mit dem Beispiel von dem, was geschieht, dank:

http://www.seth-duncan.com/Test/Notebook/notebook.html

Answer 1

Ihre Beispiel-URL sieht für mich in Ordnung, aber ich glaube, ich weiß, was du redest. Was Sie tun müssten, denke ich, ist die notebookContent div zu einer Höhe, die das nächste Mehrfache der Höhe des Binder-Rückenbildes ist. In jQuery, würde es so etwas wie sein:

$(document).ready(function() { 
    var height = $('#notebookContent').height(); 
    var offset = height % 24; 
    if(offset) 
     $('#notebookContent').css('min-height', height + 24 - offset); 
}); 

Answer 2

Wenn Sie ein sich wiederholendes Bild als Hintergrund verwenden möchten, können Sie

div {line-height: 24px; /* equal to the height of the image */ 
    } 

und dann alle andere Bilder (in Ihrem Fall verwenden sollten content-Top.png und content-Bottom.png) sollte ein Vielfaches dieser Bild- oder Zeilenhöhe sein. Das Problem, das Sie haben, ist, denke ich, dass das untere Bild 31px groß ist, das obere Bild ist 41px groß und das sich wiederholende Bild ist 24px groß. Diese Höhen werden nicht gut ineinandergreifen.

Javascript kann dies beheben, aber Sie werden es wahrscheinlich einfacher finden, Ihre Bilder so zu bearbeiten, dass sie gemeinsame Höhenwerte verwenden.

Ich denke, <br /> ist gleich einer Zeilenhöhe, und Padding/Ränder zwischen <p> Tags sollten angepasst werden, um gleich einem (oder ganze Vielfache von) der Zeilenhöhe, um das Thema zu erhalten.

A List Apart hat einen guten Artikel über diese Art von Sache hier: http://www.alistapart.com/articles/settingtypeontheweb.

Auch, weil manchmal kann ich mich einfach nicht aufhören (ah, Schlaflosigkeit, mein alter Feind ...), ich zusammengeschustert eine Demo-Seite für Sie, mit dem CSS-on-Seite für Ihre perusing- Vergnügen: http://www.davidrhysthomas.co.uk/so/notebook.html