Div ausserhalb Wrapper?

[heiko]

Hallo,

ich habe dem Body eine Hintergrundgrafik zugewiesen. Ich möchte ein Bild in einem Div top: 0; und left: 0 absolut positionieren. Wie bekomme ich den Div mit dem Bild ausserhalb des Wrappers? Im Layout kann ich machen was ich will. Ich kann ein Modul nur der Kopf-, Fusszeile oder der linken, rechten oder Hauptspalte zuordnen und dann ist der Div auch dort. Das gleiche trifft auf eigene Layoutbereiche zu. Ich möchte das möglichst ohne Templateanpassungen hinbekommen.

heiko

[Kia]

Hallo,
ich denke du kommst um die Templateanpassung nicht herum!

[psren]

Hallo,
ich denke du kommst um die Templateanpassung nicht herum!

Das stimmt. fe_page anpassen ist in diesem Fall richtig.

[planepix]

Hallo Heiko,

und ein per CSS zugewiesenes Hintergrundbild läßt sich nicht einsetzen?

Mit der Eigenschaft fixed kannst du es ja "festsetzen".
Und oben und links auch.

background:url("pfad-zum-bild/bildname.jpg") no-repeat top left fixed;

ggf. fehlen einfach noch ein paar Informationen (skalierbar, wechselbar)...

[heiko]

und ein per CSS zugewiesenes Hintergrundbild läßt sich nicht einsetzen?

background:url("pfad-zum-bild/bildname.jpg") no-repeat top left fixed;

Hallo planepix,

dem Body habe ich schon eine Textur-Grafik als background gegeben. Aber mir fällt jetzt ein, dass ich den Wrapper auf 100% und top sowie left auf 0 setzte. Den Header habe ich mittig positioniert und einen den Mainbereich umfassenden Div habe ich ebenfalls die Mitte gegeben. Dann kann ich ja dem Wrapper die Grafik als background geben.

heiko

[psren]

oder du nutzt html für deine textur und body für deine grafik

[planepix]

Oder mit CCS3 mehrere Hintergrundgrafiken zuweisen?
Wenn es das Projekt / die Zielgruppe / wie auch immer zulassen.

[psren]

Wenn es das Projekt / die Zielgruppe / wie auch immer zulassen.

Wenn das gehen würde definitiv die beste Möglichkeit :-)
Muss man aber viel Glück haben dass man das darf :-)

[plastiko]

Im Contao-css gibt es keine Positionsangabe für #wrapper (also kein Containing Block für #wrapper).
Ein Layoutbereich unterhalb der Kopfzeile sollte sich also unabhängig von #wrapper, absolute positionieren lassen.
Die Höhe und Breite in % werden in älteren IEs (IE6 und IE7?) aber vermutlich nicht richtig berechnet.

[heiko]

Hallo,

oder du nutzt html für deine textur und body für deine grafik

Das funktioniert. Allerdings wird die Grafik ein ganzes Stück nach oben aus dem Viewport verschoben/platziert. Was ich merkwürdig finde. Habe jetzt dem Wrapper wieder eine Mindest- und Maximalweite gegeben, sowie horizontal mittig positioniert.

Im Contao-css gibt es keine Positionsangabe für #wrapper (also kein Containing Block für #wrapper).

Ich hatte dem Wrapper testerweise eine Weite und Höhe von 100% gegeben und mal eine Hintergrundfarbe zugewiesen. Ich musste ihm aber auch noch top: 0 und left: 0 geben. Das klappt problemlos.

Die Höhe und Breite in % werden in älteren IEs (IE6 und IE7?) aber vermutlich nicht richtig berechnet.

Ich habe dem Wrapper, wie gesagt eine Mindest- und eine Maximalweite gegeben. Für alle Spalten habe ich in der Weite % angegeben. So lassen sie sich auch im IE7 bis auf 800 px skalieren ohne, dass es einen Scrollbalken gibt oder alles durcheinandergewürfelt wird. Den IE6 ignoriere ich völlig. Bisher hat bei mir noch nie jemand auf den IE6 bestanden.

Ein Layoutbereich unterhalb der Kopfzeile sollte sich also unabhängig von #wrapper, absolute positionieren lassen.

Das habe ich schon probiert. Der Bild-Div lässt sich nicht ausserhalb des Wrappers positionieren. Auch nicht absolute.

heiko

[plastiko]

Ich habe es zu kompliziert formuliert.

Das Contao-Framework beinhaltet für #wrapper, von Haus aus keine Positionsangaben (position: relative, absolute oder fixed).
Deshalb können Elemente innerhalb von #wrapper positioniert werden als wenn sie außerhalb stehen würden (ohne fe_page zu ändern).

.custom {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background-color: blue;
}

[psren]

Das funktioniert. Allerdings wird die Grafik ein ganzes Stück nach oben aus dem Viewport verschoben/platziert. Was ich merkwürdig finde. Habe jetzt dem Wrapper wieder eine Mindest- und Maximalweite gegeben, sowie horizontal mittig positioniert.

Suche da mal nach dem Grund und zur Not probier es mit background-position

[heiko]

Hallo psren und plastiko,

... (ohne fe_page zu ändern).

Genau darum geht es mir. Wo es möglich ist, die Standardtemplates von Contao zu nutzen. Weniger Mehraufwand und dadurch Zeitersparniss. Das Projekt ist darin auch eine Übung.

.custom {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background-color: blue;
}

Das hatte ich so mit dem Wrapper gemacht.

Ich habe ein Modul mit einem Div und einer absolut positionierten Klasse erstellt (für das Bild) und wenn ich dann im Layout das Modul einer Spalte oder einem eigenem Layoutbereich zuweise, dann spielt das keine Rolle mehr. Denn der Div kommt nie weiter als an den linken Rand dieser Spalten.

Suche da mal nach dem Grund und zur Not probier es mit background-position

Habe ich gemacht. Ohne Erfolg.

Ich wünschte mir, dass man im Backend des besten CMS , welches ich kenne, die Möglichkeit hätte den gesamten HTML-Quelltext anzuzeigen und editieren zu können. Dann wäre es kein Problem. Ich setze den Div einfach händig ausserhalb des Wrappers und positioniere ihn wie gewünscht. So was kann im konkreten Fall den Kunden nicht berühren, weil das eine Sache ist, die ihn nicht interessieren muss. Ist eine globale Angelegenheit, eher der Gestaltung. Im Editor ist das alles kein Problem. In Contao ähnelt es einem Legobaukasten. Bin jetzt kein Programmierer und weiß nicht, warum das im CMS nicht möglich ist.

heiko

[psren]

Genau darum geht es mir. Wo es möglich ist, die Standardtemplates von Contao zu nutzen. Weniger Mehraufwand und dadurch Zeitersparniss.

Die Zeitersparnis ist das nur beim Update. Ich ändere zum Beispiel fe_page bei jeder (!) Installation.

Habe ich gemacht. Ohne Erfolg.

Mit einem Link könnte ich dir da vielleicht besser helfen. Die Möglichkeit muss funktionieren, da bin ich mir sicher!

die Möglichkeit hätte den gesamten HTML-Quelltext anzuzeigen und editieren zu können.

Das kannst du denke ich mal bei keinem CMS. Woher soll das CMS wissen in welchem Template du dann gerade rumschreibst (je es ist auf viele kleine Häppchen geteilt, dass man nur das überschreiben muss was sein muss, darim geht es bei

Wo es möglich ist, die Standardtemplates von Contao zu nutzen

)

[lucina]

Genau darum geht es mir. Wo es möglich ist, die Standardtemplates von Contao zu nutzen. Weniger Mehraufwand und dadurch Zeitersparniss. (...) Ich wünschte mir, dass man im Backend des besten CMS , welches ich kenne, die Möglichkeit hätte den gesamten HTML-Quelltext anzuzeigen und editieren zu können. Dann wäre es kein Problem. Ich setze den Div einfach händig ausserhalb des Wrappers und positioniere ihn wie gewünscht. (...) In Contao ähnelt es einem Legobaukasten. Bin jetzt kein Programmierer und weiß nicht, warum das im CMS nicht möglich ist.

Es ist im Core nicht möglich, weil es einfach nicht vorgesehen ist. Das kann man jetzt kritisieren oder nicht - es ist eben zur Zeit so, und es schränkt ab einer gewissen Komplexität von Layouts ein.

Ich persönlich bin mir zwar sehr sicher, dass man das ändern könnte (indem man das Seitenlayout tatsächlich wie einen Legobaukasten aufbaut, bei dem man Layoutbereiche einfach in Kisten schiebt), aber es steht halt gerade nicht auf der Prioritätenliste oben.

Als jemand, der eigentlich immer die fe_page editiert, kann ich Dir allerdings die Extension http://www.contao-pool.de/ceris/sear...plit4ward.html nur wärmstens ans Herz legen, weil es a) technische Änderungen im Aufbau der fe_page aussen vor lässt bzw. diese extrem leicht nachzuführen sind und b) die Implementierung von unkonventionellen Layoutbereichsoptionen super einfach macht.

Carolina.

[heiko]

Es ist im Core nicht möglich, weil es einfach nicht vorgesehen ist. Das kann man jetzt kritisieren oder nicht - es ist eben zur Zeit so, und es schränkt ab einer gewissen Komplexität von Layouts ein.

Hallo carolina,

kritisieren? Nein, das auf keinen Fall. Contao ist für mich das geeignetste und beste CMS was es gibt und es gibt jetzt schon eine ganze Anzahl großartige Erweiterungen. Aber wie das so ist, manchmal hängt man eben seinen Träumen nach.

Übrigens allen hier vielen Dank für die guten Tips und Hilfe. Ich habe es hinbekommen. Es lag an einem Schusselfehler meinerseits. Hektik tut nie gut.

heiko

[psren]

Es lag an einem Schusselfehler meinerseits.

Wenn du noch aufklären könntest wo dein Fehler lag hilfst du damit eventuell jemand anderem.

[heiko]

Ja, Du hast recht. Ich habe im Header ein Banner, dessen obere sichtbare Kontur diagonal verläuft. Also hatte ich dem Header ein -30px margin gegeben. Damit hatte ich gemäß html- und body backgrund-Tip zwar beide Bilder platzieren können, aber automatisch war das links- und oben positionierte Bild auch um -30px nach oben verschoben. Jetzt habe ich die -30px nicht dem header, sondern der Bannergrafik selbst zugewiesen.

heiko