Ich entwickle eine Website für einen Designer, der mehr auf Druckdesigns als auf das Web ausgerichtet ist. Ihr Seitendesign für diese Seite gibt mir einen unregelmäßigen Inhalt.
Wenn dies eine handcodierte Seite wäre, könnte ich das Layout (peinlich genau) machen, indem ich Bilder zerschneide und Floats, absolute Positionierung und Z-Indizes sinnvoll verwende - aber die Seite wird in Drupal gemacht und mein Inhaltsbereich ist was es ist (ich nehme an, dass ich in node.tpl.php einige ernsthafte Hacker-Angriffe durchführen könnte, aber selbst das wäre problematisch).
Hier ist, was ich meine - beide Header und Fußzeilen haben Bits, die aus ihnen herausragen, die sich in den Inhaltsbereich erstrecken:
%Vor%Im Moment ist meine kaum praktikable Lösung, den Content-Area-Inhalt in Tabellen zu legen, wobei Zeilen- und Spalten sinnvoll zu verwenden sind, um die herausstehenden Bereiche zu vermeiden. Abgesehen davon, dass es ein Schmerz ist, vereitelt es den Zweck der Verwendung eines CMS - die HTML in jeder Seite muss mit der Hand geglättet werden, um die Tabellenzellen innerhalb der Seitenbeschränkungen richtig arbeiten zu lassen.
Also - ich denke meine Frage ist: Gibt es eine reine CSS (oder sogar eine CSS / Javascript) Möglichkeit, dies zu tun, ohne auf zerbrechliche, fehleranfällige Tabellenkodierung auf jeder Seite zurückzugreifen?
(N.B. Ich habe dem Designer bereits gesagt, dass dies ein Problem ist, aber der Kunde hat das Design bereits genehmigt, für dieses Projekt bleibe ich also dabei)
Der obere Teil ist einfach, beenden Sie einfach Ihren Header-Block mit einem leeren div, das nach links schwebt. Der Text des Inhaltsblocks wird umschlossen.
Sieh dir beispielsweise diese Geige an: Ссылка
Für den unteren Teil sind Sie im Grunde geschraubt, wie bereits erwähnt: Wie kann ich Text um ein unteres rechtes div? a>
Der einzige Weg, den Sie tun können, während Sie noch den Textumbruch haben, besteht darin, Bilder in die 2 Ecken zu legen, die herausragen. So haben Sie drei divs übereinander mit zwei Bildern in der ersten hat einen Schwimmer: links der zweite Schwimmer: rechts
Der Text sollte float sein: links und In der Mitte der 2 Bilder im Code
Probieren Sie es aus, es sollte funktionieren Ich denke:)
Ist das in Ordnung?
Bearbeiten: Es gibt ein bisschen horizontale Scroll, aber das sollte nicht schwer zu beheben sein. Ich arbeite in der Minute, also habe ich ungefähr die ganze Zeit damit verbracht, es für jetzt zu tun. :)