Druckbare Version
Hallo Leute,
ich hab hier ein kleines Problem, auch Wiki konnte mir hier nicht helfen.
Ich hab ein Layout mit #left, #main und #right.
Jetzt ist es so, dass ich gerne folgendes hätte. Alle 3 Bereiche sollen sich der höhe automatisch anpassen. Wenn jetzt im main viel drinn steht, soll left und right sich automatisch anpassen, da ich bei denen eine Hintergrundfarbe gewählt habe.
Kann man das irgendwie lösen?
lg, Andi
Stichwort ist hier fault columns, falsche Spalten.
Danach wirst du google und dann auch hier im Forum viel dazu finden.
Einer der einfachsten Ansätze:
Erstelle für den Container #container ein Hintergrundbild, mit den Breiten und den 3 Hintergrundfarben der einzelnen Spalten.
Dann sind die Spalten alle optisch gleich lang.
Danke für den Tipp, aber das mit der Hintergrundgrafik wollte ich verhindern. Sonst hätte ich es eh so gemacht.
Ich hab aber hier jetzt doch noch was gefunden und das hat jetzt funktioniert:
LG, AndiCode:<script>
// equal height colums
var h = document.getElementById('container').offsetHeight;
document.getElementById('left').style.height = h + 'px';
document.getElementById('main').style.height = h +'px';
document.getElementById('right').style.height = h + 'px';
</script>
Hallo Andi,Zitat:
Zitat von m-werk
wo/wie hast du das Skript eingebunden? Ich nutze Contao 3.0.6 mit dem neuen CSS-Framework. --> #Main kommt vor #Left und #Right
Die ganzen Tricks mit "faux columns" etc. nützen mir Nichts, weil ich kein optisches Problem habe, sondern tatsächlich das Problem, dass sich die Spaltenhöhe immer nach dem #Main content richtet. Wenn dann die Navi im #Left mal länger wird, skaliert sich der Mittelteil nicht mit und die Navigation läuft über den #Footer hinaus. Mit #Left habe ich nur Einfluss auf die Spaltenhöhe, wenn ich einen absolute Höhe eingebe.
Hast du einen Tipp?
Viele Grüße!
Isa
Hallo Isa,
ich hatte diesen Code im Seitenlayout unter "Eigener JavaScript-Code" eingebaut.
Hallo Andi,Zitat:
Zitat von m-werk
so ganz funktioniert es bei mir noch nicht. Ich fürchte ich benötige noch ein wenig Erklärung. Also die Variable h sagt, dass sie höhe des Containers als Maßstab nehmen soll. Anschließend sollen die Bereiche #left, #main,#right die höhe des containers füllen + px. Was verbirgt sich hinter px? Welche Angabe wird da addiert?
Vielen Dank schonmal und viele Grüße!
Isabelle
+'px' ist nur die Maßeinheit Pixel, da .offsetHeight nur einen Zahlenwert liefert, dh. bei einer Containerhöhe von 960 px wird h nur 960 zugewiesen.
Zum Setzen der Höhe von 'left','main' usw. benötigt man aber noch eine Maßeinheit, daher h+'px', was nichts anderes als 960px ergibt
Hallo Wulf,
danke erstmal. Was ist, wenn ich dem #container keine festen Pixel zugewiesen habe? Werden sie dynamisch berechnet?
Jupp, container beinhaltet ja die divs 'main', 'left', 'right' und bekommt automatisch vom "höchsten" div die Höhe.
Hallo,
ich habe nun viel experimentiert und festgestellt, dass beim Einbinden des o.g. Scripts zwar alle Spalten auf gleiche Höhe erweitert werden, nämlich die die der Container laut Inhalt hat, aber leider werden hier auch verborgene Elemente und geschlossene Akkordeons mit berücksichtigt, als sei der Text tatsächlich auf der Seite.
Fällt dazu jemandem noch etwas ein?
Viele Grüße! Isa
Das Problem hab ich auch mit dem Script, das ansonsten gut funktioniert.Zitat:
Zitat von isa
Gibts da eventuell eine Lösung?
Gruß
Thomas
Wer auf den layout-builder verzichtet, kann ja mal eine Lösung mit Flexbox versuchen
siehe dazu http://css-tricks.com/using-flexbox/Code:#container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#left {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 15%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#main {
width: 70%;
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#right {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 15%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
Hier noch ne saubere Lösung mit Javascript - MooTools
HTML-Code:XHTML:
<script type="text/javascript">
/* <![CDATA[ */
(function($) {
window.addEvent('domready', function()
{
var newHeight = Number.max($('main').getSize().y, $('left').getSize().y, $('right').getSize().y);
$$($('main'), $('left'), $('right')).setStyle('height', newHeight.toInt());
});
})(document.id);
/* ]]> */
</script>
HTML5:
<script>
(function($) {
window.addEvent('domready', function()
{
var newHeight = Number.max($('main').getSize().y, $('left').getSize().y, $('right').getSize().y);
$$($('main'), $('left'), $('right')).setStyle('height', newHeight.toInt());
});
})(document.id);
</script>
Hast du das eventuell auch für jQuery?
Gruß
Thomas
Nein, kann ich aber mal machen, muss mich sowieso mal in jQuery einarbeiten.
Je nach Umgebung kann man das auch noch vereinfachen und direkt die Höhe von #container holen, dann wird's ein Einzeiler.
HTML-Code:$$($('main'), $('left'), $('right')).setStyle('height', $('container').getSize().y.toInt());
sollte klappen.Code:<script>
(function($) {
$(document).ready(function(){
var newHeight = Math.max($('#main').outerHeight(), $('#left').outerHeight(), $('#right').outerHeight());
$('#main, #left, #right').height(newHeight);
// oder als Einzeiler $('#main, #left, #right').height(Math.max($('#main, #left, #right').outerHeight()));
});
})(jQuery);
</script>
Edith: nochmal überarbeitet (man lernt ja nie aus)
Hallo Wulf und Andreas,
könnt ihr mir noch sagen, wo/wie ich das Script einbinde?
Viele Grüße!
Isa
Hallo isa,
ich würds da einbinden ...
Themes > Seitenname > Seitenlayout > Experteinstellungen
Hallo Mokkujin,Zitat:
Zitat von Mokkujin
hat leider nicht geklappt. müsste das nicht vllt. ins fe_page Template?
Javascript in Contao einbinden: http://ck2013.may17.de/javascript-einbinden.html (Joes Vortrag von der Konferenz 2013)
Vielen Dank! Aus der Summe aller Hinweise und Scripte konnte ich mein Problem lösen. :)Zitat:
Zitat von Bas
Hallo nochmal,
das Basisproblem mit den dynamischen Spaltenhöhen für die Layoutbereiche ist nun gelöst. Allerdings berücksichtigt das Script nicht die eingebauten Akkordeons. Wenn man es öffnet verschwindet es unter dem footer. Kann man das Script entsprechend noch anpassen?
Viele Grüße!
Isa
Welche Version hast du den jetzt genommen: mootools oder jquery ?
Am Besten funktioniert meiner Meinung nach die CSS Version, aber die verträgt sich leider nicht so gut mit dem layout-builder. Hauptproblem bei den Javascript-Versionen ist halt das Berechnen der Höhe,
da die Accordions dazwischenfunken. Theoretisch könnte man die Gesamthöhe inklusive aller geöffneter Accordions ermitteln, aber da nicht immer alle Accordions geöffnet sind, würde es die Höhe verfälschen.
ich habe das jQuery-Script genommen und es nach Anleitung in den Templates eingebunden. Ohne Layout-Builder komme ich leider nicht nicht aus. Ich hatte auch schonmal ein Javascript ins Seitenlayout eingebunden, aber dort passierte genau das, was du beschrieben hast. Die Gesamthöhe bei geöffneten Akkordeons wurde dargestellt.
Vielleicht nicht die schönste Lösung, aber vielleicht reicht ja ein #main{overflow-y:auto;}.
So bleiben die Höhen erhalten und wenn ein Accordion geöffnet wird, erscheint ne scroll-leiste.
Danke erstmal. Werd's morgen mal ausprobieren. Irgendwie denke ich immer es muss doch sowas wie "onclick resize" möglich sein, das man vllt. vom Accordion aus steuert? Aber ich benutze halt immer WYSWIG-Editoren und kann eben keine Scripts....
Eine andere Möglichkeit wäre eine kleine Änderung im j_accordion.html5 template
einfach heightStyle: 'content' in heightStyle: 'auto' ändern,
dadurch bekommt jedes Akkordion die Höhe vom grössten Akkordion-Element und das Script erfüllt seine Aufgabe (sieht allerdings etwas sche... aus, wenn die Akkordion-Elemente extrem unterschiedliche Höhen haben)
Ich habs jetzt nicht ausprobiert, aber eigentlich müsste doch min-height anstatt height für die Spalten ausreichen, oder?
HTML-Code:...setStyle('height', newHeight.toInt())...
// wird zu
...setStyle('min-height', newHeight.toInt())...
// evtl. mit 'minHeight' probieren, wenn's nicht geht
offtopic
@wulf
Das mit display:flex; ist klasse. Arbeitest du daran? Wäre schön, wenn das mal das neue Contao Layout werden würde. Hapert aber eventuell an der Browserkompatibilität. Ich spiele zur Zeit ein wenig damit rum.
offtopic
@Andreas: Bei Flex-Box fehlt leider die Abwärtskompatibilität, ansonsten wäre es schon viel weiter verbreitet. Ich glaube aber, das es Zukunft hat, habe gerade gesehen, dass es der IE11 unterstützt und Microsoft sogar auf ihren
Extra-Wurst-Präfix "-ms-" verzichtet. Hier findest du noch ein paar nette Anregungen, was man alles damit machen kann http://www.w3.org/TR/css3-flexbox/. Richtig angewendet, ist
es ideal für Desktop/Mobile Seiten, aber für "reale Projekte" wohl noch problematisch ("Wieso sieht die Seite auf meinem IE6 so komisch aus" :-) )
Also ich habe jetzt sämtliche Vorschläge probiert. Nix tut sich. Der Overflow-y zum Scrollen wird im Accordion nicht angezeigt, im j_accordion.xhtml Template habe ich autoHeight: true gesetzt, und auch im jQuery von oben statt .height .minheight und min-height probiert. Kann ich dem Akkordeon div eine ID geben und diese mit ins Script aufnehmen? Wenn ja, wie?Zitat:
Zitat von wulf
Zeig doch mal bitte die Seite.
www.it-p.de
bzw. http://www.it-p.de/service-management.html
hier läuft die navigation raus und hier wäre z.B. das Problem mit den Akkordeons. http://www.it-p.de/unternehmen.html
@Isa
Gibt es eigentlich einen Link zu deiner Seite ?
sollte funktionieren, es sei denn, es wird irgendwo im CSS überschrieben.Code:#main{overflow-y:auto;}
Zitat:
im j_accordion.xhtml Template habe ich autoHeight: true gesetzt
Der Vorschlag mit min-height funktioniert wirklich nichtCode:$(document).ready(function() {
$(document).accordion({
// Put custom options here
heightStyle: 'auto', // 'content' durch 'auto' ersetzen
header: 'div.toggler',
collapsible: true
});
in meinem Template sieht der Text aber so aus:
$(document).ready(function() {
$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
collapsible: true,
active: false
});
deshalb hatte ich da bei autoHeight: true, gesetzt.
Edit: ok, hab die Zeile jetzt mit deiner überschrieben. Funktioniert schonmal.
hat mir aber leider im Moment noch Nichts für das Spaltenproblem genützt.
Wenn ich es richtig sehe, dann ist das Script zur Spaltenanpassung gar nicht eingebunden.
Ja, hab's wieder rausgenommen, weil die Seite produktiv ist und dann manche Inhalte nicht vollständig dargestellt werden.
Ich habe das Script für die Spaltenanpassung nicht gefunden.
Mach mal ne Datei files/js/columns.js
Dann über die Head-Tags einbindenCode:// columns.js
(function($) {
window.addEvent('domready', function()
{
$$($('main'), $('left'), $('right')).setStyle('min-height', $('container').getSize().y.toInt());
});
})(document.id);
Du hast sehr viel JS auf der Seite, brauchst du das alles? Mediaelement und Slimbox werfen einen JS-Fehler. Entscheide dich zwischen Mediabox, Slimbox oder Colorbox, alle 3 zusammen bringt nix. Wirf alle Scripts raus, die du nicht brauchst. Brauchst du Choosen? Vielleicht kommst du ja auch mit einer Bibliothek zurecht, MooTools oder jQuery.HTML-Code:<script type="text/javascript" src="files/js/columns.js"></script>
Das mit min-height funktioniert auch mit Accordeon.
Dein linkes Menü hat schlechtes CSS, deswegen dieses Überlappen.
HTML-Code:#left .mod_navigation {
background-color: #FFFFFF;
border: 1px solid #999999;
border-radius: 5px;
display: inline;
float: left;
font: 12px Verdana;
min-height: 395px;
overflow: visible;
position: absolute;
top: 0;
width: 292px;
z-index: 1000;
}
/* ändern in */
#left .mod_navigation {
background-color: #FFFFFF;
border: 1px solid #999999;
border-radius: 5px;
font: 12px Verdana;
}
Hallo Andreas, vielen vielen Dank für die Tipps. Habe alles befolgt, was du gesagt hast. Nur das Script kann ich erst am Montag einbauen. Werde dann berichten, ob es geklappt hat.
Irgendwie hat mich anscheinend der Ehrgeiz (oder Langeweile) gepackt, daher ein weiterer Lösungsvorschlag:
http://codepen.io/anon/pen/tHkyK
Danke, dass ihr so am Ball geblieben seid.:) Ich hab's jetzt schonmal auf meinem Testsystem eingebunden und es funktioniert!
@Andreas: Danke für die super Tipps. Hat mir sehr in der Performance geholfen und für manch anderen Lerneffekt gesorgt. Das Script hat bei mir leider nicht funktioniert.
@Wulff: Auch dir vielen Dank. Mit deinem Script hab ich es jetzt hinbekommen. Hab's wie von Andreas beschrieben in eine js Datei gepackt und in files gespeichert und dann im Head eingebunden.
Viele Grüße!
Isabelle
Hi.
Ich steig mal wieder mit ein. Ein Danke für Eure Bemühungen.
Kann es sein, dass das Script (das letzt von @wulf) nicht greift, wenn man nur zwei Spalten hat? Also Main und Right oder Main und Left z.B.?
Ich habs einfach in ein j_template gepackt und eingebunden.
Gruß
Thomas
//edit
Ah, funktioniert bei mir auch nur extern als JS-File im head eingebunden. Da die Akkordions bei mir sehr unterschiedlich befüllt sind, habe ich das Auto wieder zu Content (height) gewechselt... Geht auch. Bisschen hakelig, aber noch ok. DANKE.
@isa: Mein Script funktioniert auf deiner Seite, ich hatte es auf deiner Seite ausprobiert. Wahrscheinlich hattest du MooTools nicht eingebunden, ist ja für MooTools programmiert.
Mit jQuery kannst du das hier nehmen. Mehr solltest du eigentlich nicht brauchen
Code:(function($) {
$(document).ready(function(){
$('#main, #left, #right').css('min-height', $('#container').innerHeight());
});
})(jQuery);
@Andreas. Ach ok. Danke. Ja, hatte alle Moo_Tools ausgeschaltet. Na dann kann ich das ja nochmal testen.
liebe contao-fans,
habe eure diskussion hier mit spannung gelesen und etliches ausprobiert; bisher leider ohne das "perfekte" ergebnis. benutze derzeit contao 3.2.9 mit jQuery, aber ohne mootools-bibliothek. nutze ebenfalls #left, #main und #right als 3-spaltiges system.
habe bisher mit folgendem skript relativ gute ergebnisse erzielt, welches ich im fenster "eigener javascript-code" des layouts ganz unten eingebaut hatte:
ergebnis: spalten waren immer gleich lang, auch wenn die mittlere (#main) vom inhalt her die kürzeste war. das hat also gepasst. wenn aber die mittlere spalte die längste war, dann musste ich die betreffende seite immer erst noch ein zweites mal laden (aktualisieren), bevor #left und #right genauso lang angezeigt wurden, wie #main. diese korrekturmöglichkeit wiederum funktioniert nur beim firefox und beim internet-explorer. google-chrome und opera (alle in der neuesten version) korrigieren hier nach der seiten-aktualisierung nicht!Zitat:
<script>
// equal height colums
var h = document.getElementById('container').offsetHeight;
document.getElementById('left').style.height = h + 'px';
document.getElementById('main').style.height = h +'px';
document.getElementById('right').style.height = h + 'px';
</script>
hier meine startseite als ein beispiel dafür: http://www.die-schreibmaus.de/index.php/startseite.html
danach habe ich das skript von andreas und wulf ausprobiert und in das feld mit dem zusätzlichen javascript-code im layout eingebaut:
ergebnis: es lief genauso gut wie das erste skript, ich musste aber wieder die seiten aktualisieren, wenn #main den längsten inhalt hatte . das klappte auch wieder nur beim FF und IE.Zitat:
<script>
(function($) {
$(document).ready(function(){
var newHeight = Math.max($('#main').outerHeight(), $('#left').outerHeight(), $('#right').outerHeight());
$('#main, #left, #right').height(newHeight);
// oder als Einzeiler $('#main, #left, #right').height(Math.max($('#main, #left, #right').outerHeight()));
});
})(jQuery);
</script>
dann habe ich das skript von andreas ausprobiert und wie angeleitet duch die head-tags in den experteneinstellungen aufgerufen:
ergebnis: jede spalte behielt ihre individuelle länge, also gar keine angleichung mehr. kann eventuell daran gelegen haben, dass ich kein mootools nutze (wegen einer anderen erweiterung) und das skript aber für mootools gedacht war. dann habe ich noch das skript für jQuery von andreas ausprobiert und auch als columns.js-datei im files-ordner abgelegt:Zitat:
// columns.js
(function($) {
window.addEvent('domready', function()
{
$$($('main'), $('left'), $('right')).setStyle('min-height', $('container').getSize().y.toInt());
});
})(document.id);
habe dieses kurze skript wieder zwischen die "script"-tags des vorletzten skripts gesetzt und gespeichert. war das richtig so, oder muss es ohne script-tags und irgendwie gesondert in die jQuery-bibliothek eingebunden werden??? wenn ja, wie oder wo mache ich das?Zitat:
(function($) {
$(document).ready(function(){
$('#main, #left, #right').css('min-height', $('#container').innerHeight());
});
})(jQuery);
ergebnis war übrigens wie beim letzten skript auch gleich null, also 3 unterschiedlich lange spalten...
wäre super nett, wenn ihr mir hier noch mal helfen könntet...
liebe grüße, grashalm
Hallo Grashalm,
das Script von Andreas erfordert moo-tools. Das Script von Wulf mit der columns.js wird über das Template fe_page eingebunden und muss dann im Layout anghakt werden.
Bei mir läuft deine Seite in allen neuen Browsern ohne zweimal zu laden. Spalten sind dann gleich hoch.
Scripte einbinden:
- Wenn JS über eine js-Datei eingebunden wird, dann das SCRIPT Tag in der js-Datei nicht benutzen.
- Wenn JS direkt im Quellcode eingebunden wird, dann SCRIPT Tag benutzen entweder im HEAD oder als letztes Element im BODY.
- Um sicher zu stellen, dass der DOM aufgebaut ist bevor dein Script startet, kannst du es nach dem Window ready Event starten. Kannst du dir abschauen, wie das mit den Templates für jQuery und für MooTools gemacht wird.
- Dein Script ist Vanilla (reines JS, braucht keine Bibliothek).
Du solltest auf deiner Seite ein STYLE Element nicht im BODY stehen haben, nur im HEAD (Zeile 192).
Du müsstest dein CSS wahrscheinlich sowieso nochmal überarbeiten. Durch die Positionierung einiger Elemente mit Margin im Header hängt dein header .inside an einer seltsamen Stelle. Schaus dir mal mit Firebug an. Vielleicht besser die Elemente des Headers mit position:absolute; positionieren.
Deine Seite ist auch zu breit, so dass immer eine horizontale Scrollleiste erscheint.
Mittlerweile mache ich meine Layouts mit display:flex; da habe ich dann automatisch gleich hohe Spalten. http://css-tricks.com/snippets/css/a-guide-to-flexbox/
hallo isa, hallo andreas,
ganz lieben dank für eure unterstützung! hat schon jetzt ganz viel gebracht! habe als erstes die SCRIPT-tags aus der javascript-datei herausgenommen, neu gespeichert und diese datei wieder über den HEAD-bereich in den experteneinstellungen des layouts eingebunden. das war für mich mit abstand am einfachsten, weil ich mich mit script- und programmiersprachen überhaupt nicht auskenne. ergebnis: der #main-bereich wird jetzt immer komplett angezeigt und verschwindet nicht mehr "unter" dem footer. #left und #right sind jetzt zwar immer gleich lang, aber leider immer noch ein ganzes stück kürzer als der #main-bereich, wenn dieser der längste ist.
das ist zumindest bei zwei seiten so, einmal auf der startseite: http://www.die-schreibmaus.de/index.php/startseite.html, und zum beispiel auch hier: http://www.die-schreibmaus.de/index....14-feb-20.html.
wenn #main inhaltlich kürzer ist, als die außenspalten, werden alle spalten gleich lang angezigt! das ist super. weiterer erfolg: der browser google chrome agiert jetzt wie mein firefox (#main ist nach unten hin komplett, #left und #right sind gleichlang, aber kürzer als #main), und internet-explorer und opera zeigen jetzt die seiten sogar perfekt an (alle drei spalten gleich lang und #main ist auch immer komplett). und zweimal laden muss ich auch nichts mehr. von daher schon eine erhebliche steigerung!
andreas, du schreibst:ich nehme an, das ist relevant, weil bis jetzt die außenspalten noch kürzer sind, wenn #main den längsten inhalt hat. was ist ein DOM und wie und wo kann ich es nach dem "window ready event" starten? muss ich da eine zeile aus den mootools-templates kopieren und muss sie anpassen? muss die dann in die javascript-datei? das werde ich kaum alleine schaffen, dafür habe ich zu wenig kenntnisse von skripten und templates...Zitat:
Um sicher zu stellen, dass der DOM aufgebaut ist bevor dein Script startet, kannst du es nach dem Window ready Event starten.
ich weiß nicht, ob du die zeit hast, mich dabei noch etwas zu unterstützen? oder hat die tatsache, dass auf den o.g. seiten die außenspalten im FF und google chrome kürzer sind, eine andere ursache?
was die positionierung der elemente im head-bereich angeht, so werde ich mal versuchen, diese mit position:absolute; zu definieren. habe da neulich schon ewig dran rumgebastelt, bis es jetzt auf diese weise "geklappt" hat. irgendwie verschob sich der schriftzug oben immer mit dem rechten mauslogo zusammen. war äußerst schwierig. das muss ich mal in ruhe machen, wenn nichts anderes anliegt. danke für den hinweis!
das die seite zu breit ist, weiß ich. da muss ich noch drangehen. stand ohnehin schon auf meiner agenda. und das style-element im body schaue ich mir auch noch mal an. vielen dank jedenfalls für deine aufmerksamkeit! herzlichen dank auch an dich, isa!
freue mich sehr, wenn ihr mir mit den spalten noch mal auf die sprünge helfen mögt...
liebe grüße, grashalm
Hier die Rahmen, die du um deinen Code packen musst.
SCRIPT musst du in js-Dateien natürlich weglassen.HTML-Code:<!-- jQuery -->
<script>
(function($) {
$(document).ready(function() {
// Code here
});
})(jQuery);
</script>
<!-- MooTools -->
<script>
(function($) {
window.addEvent('domready', function() {
// Code here
});
})(document.id);
</script>
Der DOM: http://de.wikipedia.org/wiki/Document_Object_Model Bild auf der rechten Seite sagt schon fast alles.
Javascript untersucht den DOM um ihn dann zu manipulieren, deswegen muss sicher gestellt sein, dass der DOM komplett vorhanden ist, bevor JS mit der Analyse startet.
Bei dir ist also der #container im Moment der Messung nicht so hoch wie nachher. Irgendwas macht deinen #container nach der Messung nochmal höher. Evtl. dieses .mejs_mediaelement.
Das hier ist dein CSS im HEAD von Contao
Dieses CSS ist wesentlich für ein stabiles Layout. Diese Werte solltest du manuell nicht übeschreiben. Werte wie margin, border und padding solltest du auf diese Elemente auch nicht zusätzlich aufsetzen. Die Eigenschaft width solltest du keinen inneren Elementen vergeben. Sie erstrecken sich in der Breite automatisch auf den zur Verfügung stehenden Platz (nicht, wenn ein Element gefloatet ist oder absolut positioniert ist).PHP-Code:#wrapper {
width: 1620px;
margin: 0 auto
}
#header {
height: 363px
}
#left {
width: 300px;
right: 300px
}
#right {
width: 280px
}
#container {
padding-left: 300px;
padding-right: 280px
}
#footer {
height: 295px
}
Das dürfte dich nochmal ein Stück weiter bringen.
ps In dem Editor hier fehlt echt mal ein Code-Highlighting für CSS und Javascript.
hallo andreas,
erst mal vielen dank, für deine weitere unterstützung. bin aber nicht so ganz schlau geworden aus deiner antwort, oder besser: weiter verwirrt. das ist seit gestern mein momentanes script:
das ich zur zeit als javascript-datei im files-ordner mit hilfe der aufrufenden zeile in den head-tags des layouts eingebunden habe. das müsste doch eigentlich ausreichen. oder soll ich anstattdessen deinen html-code im abschnitt jQuery deiner letzten antwort nehmen? und wenn ja, wie und wo binde ich den so ein, dass er in der jQuery-bibliothek im layout erscheint und ich ihn anhaken kann? das ist mir noch nicht klar. oder muss er woanders eingebunden werden, sodass er gar nicht in der jQuery-bibliothek erscheint?Code:// columns.js
(function($) {
$(document).ready(function(){
$('#main, #left, #right').css('min-height', $('#container').innerHeight());
});
})(jQuery);
was mich total wundert, ist, dass bei dir die anzeige meiner seiten in verschiedenen browsern problemlos lief. hast du im quelltext noch bestimmte anpassungen vorgenommen, oder liegt das an den konfigurationen meiner browser (FF, IE, Chrome und Opera)??? wenn es an dem mejs_mediaelement liegt, wieso taucht dann der fehler auch auf der startseite auf? kann ich stattdessen was anderes nehmen oder muss ich es noch irgendwie konfigurieren?
was die gestrigen erfolge bei den verschiedenen browsern angeht, so muss ich mich nochmal nach unten korrigieren (hatte nicht ganz korrekt ausprobiert):
im firefox wird der #main-bereich jetzt immer korrekt und in voller länge angezeigt. wenn #left und #right inhaltlich kürzer sind als #main, werden sie auch kürzer angezeigt. das hatten wir schon. wenn ich die startseite dann aktualisere, sieht es perfekt aus. wenn ich die andere seite dann aktualisiere (http://www.die-schreibmaus.de/index....14-feb-20.html), erweitern sich die außenspalten zwar weiter nach unten, aber nicht ganz bis zum ende von #main. sehr seltsam...
im internet-explorer wird die startseite auf anhieb perfekt angezeigt. bei der anderen seite fehlen an den außenspalten nach unten nur etwa 10 pixel. das ändert sich auch nach dem erneuten laden der seite nicht! alle anderen seiten sind ohnehin perfekt.
im chrome wird auf der startseite der #main-bereich auf anhieb korrekt angezeigt, die außenspalten sind gleichlang, aber deutlich kürzer als der #main-bereich. das ändert sich auch beim neuladen der startseite nicht. das gleiche gilt für die andere seite.
im opera werden auf beiden seiten die #main-bereiche auf anhieb richtig angezeigt, allerdings bleiben die außenspalten sowohl vor als auch nach dem neuladen immer zu kurz.
weiß nicht, ob dir das weiterhilft.
liebe grüße, grashalm
Probier mal stattPHP-Code:$(document).ready
PHP-Code:$(window).load
@grashalm: Da ich gerade an der selben Problematik dran bin, kämpfe ich gerade mit ähnlichen Effekten wie du. Allerdings muss ich sageh, daß ich mit meinem aktuellen Skript kaum noch Probleme habe. Zu 95% stimmt alles, nur manchmal habe ich Effekte wie zu kurze Seitenspalten oder - bisher nur einmal - sogar eine Mittelspalte, die unten etwas über den Footer raus ging. Mein Skript ist exakt das gleiche wie bei dir. Offenbar hast du bei dir eine Konstellation, welche die gelegentlichen Probleme verstärkt. Ich gehe davon aus, dass diese von ungenügender Synchronisierung verursacht werden. Das Skript misst die Höhe des Containers, wenn die Höhe der Spalten noch gar nicht festliegt. Könnte z.B. unter anderem davon herrühren, dass Bilder geladen werden müssen, deren Größe sich aus dem HTML (und eventuell auch CSS) nicht ergibt, sondern vom Browser erst anhand der heruntergeladenen Bilddaten erkannt werden kann.
Ich werde jetzt auch mal die von Spooky vorgeschlagene Änderung ausprobieren.
Ja, in seinem Fall könnten die Media Player auf der Seite dieses Problem verursachen. Da diese Player auch erst bei $(document).ready initialisiert werden (oder gar später) könnte es sein, dass die gesamte Höhe des #main bspw. bei $(document).ready noch nicht bekannt ist, wenn alles geladen ist ($(window).load) aber schon.
Habe es jetzt mal eingetragen und sieht bisher gut aus, was allerdings noch nicht viel heissen muss, da es sowieso meist funktioniert hat. Ich werde es mal beobachten.
hallo, hier noch mal grashalm,
mein spaltenproblem hat sich anscheinend gelöst! nach der wertvollen vorarbeit von andreas und isa hat mir dein tipp, spooky, zum entscheidenden durchbruch verholfen. nachdem ich nun die besagte zeile geändert habe, läuft das script bisher auf allen browsern von anfang an einwandfrei! habe bisher noch keine seite gefunden, die nicht auf anhieb korrekt angezeigt wird!
noch mal dickes lob @ isa, andreas, spooky und tab! :)