Layoutumsetzung - eure Meinung?

[Twitt]

Hallo allerseits

Ich habe ein Webdesignvorschlag zur Umsetzung mit Contao erhalten (siehe Anhang). Speziell ist der linke Bereich im Container unterhalb des Seiten- oder Headerbildes. Bei Screenveränderung darf der weisse Teil die gleiche Breite wie das Header-/bezw. Seitenbild einnehmen.

Mein Ansatz waere das Logo und die Hauptnavi im Header sowie auch das Seitenbild. Im Inhaltsbereich zwei Spalten wovon die linke Spalte (welche leer bleibt, es werden dort keine Infos gewuenscht) ein sich senkrecht wiederholendes Hintergrundbild (in CSS Datei definiert) mit dem schwarzen Balken hat?

Oder aber gleich nur eine Spalte und mit CSS den Text dementsprechend einrücken und den Hintergrund mit einem BG-Bild per CSS. Habt ihr evtl. andere Vorschläge?

Hoffe ich drück mich verständlich aus.
Wäre um einen Tipp dankbar.

seelenmusik-website.png

[tab]

Bei Screenveränderung darf der weisse Teil die gleiche Breite wie das Header-/bezw. Seitenbild einnehmen.

Also den Teil habe ich nicht verstanden. Was soll da passieren wenn der Viewport breiter bzw schmäler wird? Wenn er breiter wird, soll dann das Bild die Größe beibehalten und der weiße Bereich breiter werden, bis sie gleich breit sind? Wenn er schmäler wird, soll dann das Bild kleiner werden, der weiße Bereich aber erst mal nicht, bis sie gleich breit sind? Wobei du dann in deinem Header mit dem Logo und der Navi schon ein Problem hättest. Oder wie meinst du das?

[mlweb]

Ich würde so etwas nicht zweispaltig umsetzen sondern einspaltig und entsprechende Breiten für die einzelnen Bereiche setzen. Inhaltsleere divs sind m.E. daneben und in den meisten Fällen auch überflüssig.

Auch Texteinrückungen wie Du sie beschreibst sind nicht notwendig. Du hast doch im Hauptbereich etliche Elemente zur Verfügung mit denen Du spielen kannst (#container, #main, #inside). Die sollten wenn ich da so grob drauf schaue eigentlich wirklich reichen.

Das Seitenbild würde ich wohl nicht in den #header legen. Gefühlsmäßig - ohne getestet zu haben - bekommst Du bei responsive Design sonst Probleme mit dem Fluchten der weissen Teile oberhalb des Bildes und dem Haupteil. Genau würd ich das aber mit einem kleinen Dummy probieren. Vielleicht in ein Custom Bereich legen.

@tab Ich denke damit ist gemeint, dass es bei kleiner Bildschirmen erlaubt ist, dass der weisse Haupteil genauso breit werden darf wie das Bild.

[tab]

Also einspaltig würde ich auch schon mal sagen. Aber ohne zu wissen, was bei Verkleinerung des Viewports passieren soll, ist es schwierig was zu sagen. Insbesondere wäre interessant, ob sich das Bild selbst überhaupt jemals verkleinern soll und wenn ja ob nur in der Breite (unwahrscheinlich) oder auch proportional in der Höhe oder ob da dann sowieso wegen Logo und Navi eine Layoutänderung per Media Query ansteht, wonach alles sowieso wieder ganz anders aussehen könnte. Spätestens fürs Smartphone wird man wohl den linken Rand des Inhaltsbereichs auch verkleinern müssen.

[Andreas]

Ganz einfach. Ungefähr so.

<div class="outer">
  <div class="bild"></div>
  <div class="elem"></div>
</div>

CSS-Code

.outer {
  margin-left: 200px;
  background: white;
}
.bild {
  margin-left: -200px;
} 

Keine linke Spalte. Bei Breakpoints das margin dann ändern.

[Twitt]

Erst einmal herzlichen Dank für eure diversen Inputs.

Die erste Herausforderung ist schon mal den Beschrieb so zu verfassen, dass die Leser auch dasselbe verstehen, wie ich meine (Sorry tab). Daher habe ich eine kleine Übersicht von der Desktop- und der Smartphoneansicht angehängt. Diese zeigt das Header- oder Seitenbild proportional verkleinert wird und der weisse Bereich auf die volle Breite ausgedehnt würde, ohne gestalterischen linken Einzug.

Auch Texteinrückungen wie Du sie beschreibst sind nicht notwendig. Du hast doch im Hauptbereich etliche Elemente zur Verfügung mit denen Du spielen kannst (#container, #main, #inside). Die sollten wenn ich da so grob drauf schaue eigentlich wirklich reichen.

Stimmt mlweb, mit den Elementen krieg ich das sicherlich so hin.

Das Seitenbild würde ich wohl nicht in den #header legen. Gefühlsmäßig - ohne getestet zu haben - bekommst Du bei responsive Design sonst Probleme mit dem Fluchten der weissen Teile oberhalb des Bildes und dem Haupteil. Genau würd ich das aber mit einem kleinen Dummy probieren. Vielleicht in ein Custom Bereich legen.

Das habe ich auch bemerkt kurz nachdem ich hier die Anfrage sandte. Das Header-/Seitenbild müsste in einen Custombereich - ansonsten gibt das wohl ein mächtig Gefrickel.

@tab Ich denke damit ist gemeint, dass es bei kleiner Bildschirmen erlaubt ist, dass der weisse Haupteil genauso breit werden darf wie das Bild.

Genau, denn ein Einzug auf kleinen Bildschirmen macht da wirklich keinen Sinn. Bei verkleinertem Bildschirm würde dann ein mmenu zum Einsatz kommen.

Andreas: Danke für deinen Ansatz. Es ist mir im Moment noch nicht ganz klar wie bezw. wo ich das einbaue aber ich werde auf einer Testinstallation mal versuchen, wie ich das Layout hinkriege.

[Andreas]

Zeig doch einfach mal ne einfache Seite mit dem Logo und Menü im Header und dem Bild und dem Inhalt in der Hauptspalte. Dann können wir dir bestimmt dass passende CSS dafür zeigen, das kann nicht so viel sein.

[Twitt]

Hallo zusammen

Ich bin nun hier etwas weiter und soweit mit allem recht zufrieden.

Einzig beim Seitenbild fällt mir bei der Bildschirmverkleinerung ein kleiner Abstand zum unteren Bildrand auf. Ich könnte dessen ".image_container" einen -2px Margin geben, aber das find ich nicht wirklich fein da ich denke, die Ursache muss woanders liegen.

www.josianeerni.com

Hat jemand eine Idee oder einen Ansatz?

Zeig doch einfach mal ne einfache Seite mit dem Logo und Menü im Header und dem Bild und dem Inhalt in der Hauptspalte. Dann können wir dir bestimmt dass passende CSS dafür zeigen, das kann nicht so viel sein.

[Samuell]

Das hat mit der "base-line" des images zutun.
"display: block" auf das img kann helfen.

Siehe auch: http://carsten-protsch.de/zwischenne...e/luecken.html

[Andreas]

Ich bin nun hier etwas weiter und soweit mit allem recht zufrieden.

Ja, sieht doch gut aus. Und wie Samuell schon angedeutet hat solltest du dem IMG display:block; geben. Das solltest du immer machen, wenn du pixelgenau arbeiten möchtest. Ich gebe meinen IMGs immer display:block; da ich so gut wie nie Bilder habe, welche sich wie ein Buchstabe im Fließtext befinden und sich auch so verhalten sollen. Ich denke, dass die default Browsereinstellung von IMGs heutzutage block wäre, wenn es nicht aus traditionellen Gründen weiterhin auf inline stehen bleiben müsste.

[Twitt]

Hallo Samuell und Andreas

Danke euch fuer den Tipp und den Linkverweis.
Das hat tatsaechlich geholfen und jetzt ist es perfekt.

Werde den IMG display:block zukuenftig beruecksichtigen.

Das hat mit der "base-line" des images zutun.
"display: block" auf das img kann helfen.

Siehe auch: http://carsten-protsch.de/zwischenne...e/luecken.html