Kommentare zu: Zwei div Container auf gleiche Höhe bringen http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/ IT-News, IT-Themen, Customize Wed, 08 Feb 2012 18:09:53 +0000 hourly 1 http://wordpress.org/?v=3.3.1 Von: Johannes Sebald http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-490 Johannes Sebald Thu, 01 Sep 2011 16:40:47 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-490 1. Zum Thema des Java-Script: Ich habe das Script in allen aktuellen Browser getestet und konnte keinerlei Fehler wegen der 20px feststellen. Das Script sollte komplett in den Header-Bereich eingefügt werden. 2. Zum Off-Topic-Thema CSS3: Ich habe deine <a href="http://www.informatik-it.de/scripte/gleiche-hoehe-div/" rel="nofollow">Seite </a>auch ebenfalls in allen aktuellen Browsern getestet, und die Funktion "border-radius" funktioniert tadellos. CSS-EIgenschaften können nicht vom Server-Betrieb abhängen. Tipp: Lösche deinen kompletten Browser-Cache. 3. In welchen Bezug hast du den mit Informatik zu tun, falls ich fragen darf? Ich habe den Eindruck, dass du in Sachen Web-Programmierung noch ein rechter Neuling bist. Falls ja, kann ich dich gerne auch auf die Einstiegseite <a href="http://de.selfhtml.org/" rel="nofollow">Self-HTML</a> verweisen. Zur besseren Übersicht des Artikels habe ich deinen Quellcode aus den Kommentaren auf das wesentliche gekürzt. 1. Zum Thema des Java-Script: Ich habe das Script in allen aktuellen Browser getestet und konnte keinerlei Fehler wegen der 20px feststellen. Das Script sollte komplett in den Header-Bereich eingefügt werden.

2. Zum Off-Topic-Thema CSS3: Ich habe deine Seite auch ebenfalls in allen aktuellen Browsern getestet, und die Funktion “border-radius” funktioniert tadellos. CSS-EIgenschaften können nicht vom Server-Betrieb abhängen. Tipp: Lösche deinen kompletten Browser-Cache.

3. In welchen Bezug hast du den mit Informatik zu tun, falls ich fragen darf? Ich habe den Eindruck, dass du in Sachen Web-Programmierung noch ein rechter Neuling bist. Falls ja, kann ich dich gerne auch auf die Einstiegseite Self-HTML verweisen. Zur besseren Übersicht des Artikels habe ich deinen Quellcode aus den Kommentaren auf das wesentliche gekürzt.

]]> Von: Christian http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-488 Christian Thu, 01 Sep 2011 10:52:49 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-488 Für alle die sich das Script anschauen oder runterladen wollen hier noch ein kostenloser Link: http://www.informatik-it.de/scripte/gleiche-hoehe-div/ Übrigens die css Eigenschaft border-radius wird von allen <b>genannten</b> Browsern unterstützt - nur der Server wo das Beispiel gehostet ist unterstützt CSS3 nicht. Falls Jemand runde Ecken will muss er das mit Grafiken machen oder auf einem Server der CSS3 unterstützt. Für alle die sich das Script anschauen oder runterladen wollen hier noch ein kostenloser Link:

http://www.informatik-it.de/scripte/gleiche-hoehe-div/

Übrigens die css Eigenschaft border-radius wird von allen genannten Browsern unterstützt – nur der Server wo das Beispiel gehostet ist unterstützt CSS3 nicht. Falls Jemand runde Ecken will muss er das mit Grafiken machen oder auf einem Server der CSS3 unterstützt.

]]> Von: Christian http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-487 Christian Thu, 01 Sep 2011 10:33:17 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-487 Hi Johannes, also ich will gleich vorausschicken dass das Script jetzt funktioniert. Habs mit Internet Explorer 9.0.8112.16421, Firefox 6.0.1 und Opera 11.50 getestet. Allerdings hatte ich noch ein paar Probleme und Hinweise für die, die das gleiche Problem haben. 1.Das onload-Tag gehört in den body-Tag (siehe Quelltext weiter unten) 2. Das Script veränderte die Höhe zwar, aber nicht gleich für beide Container. Ich hatte bei allen drei Browsern das Problem dass die Seite, die eigentlich kürzer war jetzt zu lang war. Mit den auskommentierten alert´s (siehe Quelltext) hab ich rausgefunden dass es sich genau um 20px handelt. Woher die 20px kamen hab ich versucht rauszufinden und hab die margin (2x 10px Außenabstand) rausgenommen. Der Fehler blieb aber trotzdem. Dieses Problem hab ich gelöst indem ich bei der If-Bedingung noch -20 eingetragen habe. Jetzt funktioniert es 100%ig. Ich hoffe Du hast nichts dagegen dass ich den Quelltext hier poste. Den css Teil hab ich in die gleiche Datei mit aufgenommen so hat jeder alles erforderliche. Auf jeden Fall danke ich Dir nochmal für Deine investierte Arbeitszeit und Geduld. Ich hab jetzt auch eine andere Mailadresse angegeben - unter der lese ich die Mail sicher. Also vielleicht kann ich Dir auch mal helfen, dann melde Dich einfach. Hier noch der Quelltext... <code><script type="text/javascript"> function equalize() { var left=document.getElementById('menue'); var right=document.getElementById('text'); //alert ("Hoehe des linken Containers " + left.offsetHeight); //alert ("Hoehe des rechten Containers " + right.offsetHeight); if(right.offsetHeight>left.offsetHeight) { left.style.height=right.offsetHeight-20+"px"; //alert ("Linke Hoehe wenn der Text-Container hoeher ist " + left.offsetHeight); //alert ("Rechte Hoehe wenn der Text-Container hoeher ist " + right.offsetHeight); } else { right.style.height=left.offsetHeight-20+"px"; //alert ("Linke Hoehe wenn der Menue-Container hoeher ist " + left.offsetHeight); //alert ("Rechte Hoehe wenn der Menue-Container hoeher ist " + right.offsetHeight); } } //onload=equalize(); </script> </head> <body onload="equalize();"> </body> </html></code> Hi Johannes,

also ich will gleich vorausschicken dass das Script jetzt funktioniert. Habs mit Internet Explorer 9.0.8112.16421, Firefox 6.0.1 und Opera 11.50 getestet.

Allerdings hatte ich noch ein paar Probleme und Hinweise für die, die das gleiche Problem haben.

1.Das onload-Tag gehört in den body-Tag (siehe Quelltext weiter unten)

2. Das Script veränderte die Höhe zwar, aber nicht gleich für beide Container. Ich hatte bei allen drei Browsern das Problem dass die Seite, die eigentlich kürzer war jetzt zu lang war. Mit den auskommentierten alert´s (siehe Quelltext) hab ich rausgefunden dass es sich genau um 20px handelt. Woher die 20px kamen hab ich versucht rauszufinden und hab die margin (2x 10px Außenabstand) rausgenommen. Der Fehler blieb aber trotzdem.

Dieses Problem hab ich gelöst indem ich bei der If-Bedingung noch -20 eingetragen habe. Jetzt funktioniert es 100%ig.

Ich hoffe Du hast nichts dagegen dass ich den Quelltext hier poste. Den css Teil hab ich in die gleiche Datei mit aufgenommen so hat jeder alles erforderliche.

Auf jeden Fall danke ich Dir nochmal für Deine investierte Arbeitszeit und Geduld. Ich hab jetzt auch eine andere Mailadresse angegeben – unter der lese ich die Mail sicher. Also vielleicht kann ich Dir auch mal helfen, dann melde Dich einfach.

Hier noch der Quelltext…

<script type="text/javascript">
function equalize()
{
var left=document.getElementById('menue');
var right=document.getElementById('text');

//alert ("Hoehe des linken Containers " + left.offsetHeight);
//alert ("Hoehe des rechten Containers " + right.offsetHeight);

if(right.offsetHeight>left.offsetHeight)
{
left.style.height=right.offsetHeight-20+"px";
//alert ("Linke Hoehe wenn der Text-Container hoeher ist " + left.offsetHeight);
//alert ("Rechte Hoehe wenn der Text-Container hoeher ist " + right.offsetHeight);
}
else
{
right.style.height=left.offsetHeight-20+"px";
//alert ("Linke Hoehe wenn der Menue-Container hoeher ist " + left.offsetHeight);
//alert ("Rechte Hoehe wenn der Menue-Container hoeher ist " + right.offsetHeight);
}
}
//onload=equalize();
</script>
</head>
<body onload="equalize();">
</body>
</html>

]]> Von: Johannes Sebald http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-486 Johannes Sebald Wed, 31 Aug 2011 16:16:20 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-486 Du hast recht, das Script funktioniert so nicht. Habe es deshalb nochmals ausführlich mit dem Adobe Dreamweaver CS5.5 getestet und erweitert. Habe den Artikel dementsprechend geändert. Bitte entnehme das neue Script dem Artikel! Nun müsste es gehen. Schreibe doch zurück, ob es geklappt hat. Danke. Du hast recht, das Script funktioniert so nicht. Habe es deshalb nochmals ausführlich mit dem Adobe Dreamweaver CS5.5 getestet und erweitert. Habe den Artikel dementsprechend geändert. Bitte entnehme das neue Script dem Artikel! Nun müsste es gehen. Schreibe doch zurück, ob es geklappt hat. Danke.

]]> Von: Christian http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-485 Christian Wed, 31 Aug 2011 09:25:09 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-485 Hallo Johannes, auch wenn ich die html und css-Datei anpasse passiert nichts. Dieses Ergebnis habe ich aber erwartet da wie gesagt beides von mir angegeben wurde, class und id. Hier nun der Quelltext der HTML noch dazu. <code> <script type="text/javascript"> var left = document.getElementById("menue"); var right = document.getElementById("text"); if(left.offsetHeight > right.offsetHeight) { right.style.height = left.offsetHeight+"px"; } </script></code> Hallo Johannes,

auch wenn ich die html und css-Datei anpasse passiert nichts. Dieses Ergebnis habe ich aber erwartet da wie gesagt beides von mir angegeben wurde, class und id.

Hier nun der Quelltext der HTML noch dazu.

<script type="text/javascript">
var left = document.getElementById("menue");
var right = document.getElementById("text");
if(left.offsetHeight > right.offsetHeight)
{
right.style.height = left.offsetHeight+"px";
}
</script>

]]> Von: Christian http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-484 Christian Tue, 30 Aug 2011 23:35:12 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-484 <i>Hallo Christian, dass kann auch nicht funktionieren. Da du wie ich deinem CSS entnehmen kann, deine DIV-Container mit Klassen in deiner HTML oder PHP deklariert hast. </i> <b>Hallo Johannes, ich hab die div container mit class="menue" und id="menue" deklariert (auch bei text so)</b>. Leider wurde der html-quelltext im Kommentar interpretiert - ich setz den morgen nochmal auskommentiert ein da ich jetzt auf dem Laptop arbeite. <i>Dies ist leider falsch, da das Script die IDs der DIV-Container ausliest.</i> Also wie gesagt die ID ist angegeben. Allerdings werde ich die css noch ändern von class (.) auf id (#) und es dann nochmal ausprobieren. Bis morgen und vielen Dank schon mal für die Hilfe und die investierte Zeit. Wünsche Dir eine gute Nacht. vg Christian Hallo Christian, dass kann auch nicht funktionieren. Da du wie ich deinem CSS entnehmen kann, deine DIV-Container mit Klassen in deiner HTML oder PHP deklariert hast.

Hallo Johannes,

ich hab die div container mit class=”menue” und id=”menue” deklariert (auch bei text so). Leider wurde der html-quelltext im Kommentar interpretiert – ich setz den morgen nochmal auskommentiert ein da ich jetzt auf dem Laptop arbeite.

Dies ist leider falsch, da das Script die IDs der DIV-Container ausliest.

Also wie gesagt die ID ist angegeben. Allerdings werde ich die css noch ändern von class (.) auf id (#) und es dann nochmal ausprobieren.

Bis morgen und vielen Dank schon mal für die Hilfe und die investierte Zeit.

Wünsche Dir eine gute Nacht.

vg
Christian

]]> Von: Johannes Sebald http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-483 Johannes Sebald Tue, 30 Aug 2011 18:36:52 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-483 Hallo Christian, dass kann auch nicht funktionieren. Da du wie ich deinem CSS entnehmen kann, deine DIV-Container mit Klassen in deiner HTML oder PHP deklariert hast. Dies ist leider falsch, da das Script die IDs der DIV-Container ausliest. Das nun das JS-Script dennoch funktioniert musst du deine DIVs so anpassen: <blockquote><code>id="menue" id="text"</code></blockquote> Dein CSS musst du ebenfalls anpassen: <blockquote><code> #menue { outline: dashed #00F 3px; width: 25%; float: left; } #text { outline: dashed #00F 3px; width: 75%; float: left; }</code></blockquote> Schreib doch bitte eine Antwort, ob dann das Script funktioniert. Hallo Christian, dass kann auch nicht funktionieren. Da du wie ich deinem CSS entnehmen kann, deine DIV-Container mit Klassen in deiner HTML oder PHP deklariert hast. Dies ist leider falsch, da das Script die IDs der DIV-Container ausliest.

Das nun das JS-Script dennoch funktioniert musst du deine DIVs so anpassen:

id="menue"
id="text"

Dein CSS musst du ebenfalls anpassen:

#menue
{
outline: dashed #00F 3px;
width: 25%;
float: left;
}
#text
{
outline: dashed #00F 3px;
width: 75%;
float: left;
}

Schreib doch bitte eine Antwort, ob dann das Script funktioniert.

]]> Von: Christian http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-482 Christian Tue, 30 Aug 2011 17:48:21 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-482 Hallo Johannes, sorry für die späte Antwort. Ja, ich hab die IDs angepasst. Hier hast Du mal den Code. Der css Code ist ausgelagert und verlinkt, den JS Code hab ich direkt ins Dokument geschrieben. <code> var left = document.getElementById("menue"); var right = document.getElementById("text"); if(left.offsetHeight > right.offsetHeight) { right.style.height = left.offsetHeight+"px"; } </code> Hallo Johannes, sorry für die späte Antwort. Ja, ich hab die IDs angepasst. Hier hast Du mal den Code. Der css Code ist ausgelagert und verlinkt, den JS Code hab ich direkt ins Dokument geschrieben.

var left = document.getElementById("menue");
var right = document.getElementById("text");
if(left.offsetHeight > right.offsetHeight)
{
right.style.height = left.offsetHeight+"px";
}

]]> Von: Johannes Sebald http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-426 Johannes Sebald Fri, 08 Jul 2011 17:18:09 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-426 Hallo Christian, vielen Dank für dein Kommentar. Hast du die IDs der DIV-Container angepasst? Wo hast du das Script eingebunden? Hallo Christian, vielen Dank für dein Kommentar. Hast du die IDs der DIV-Container angepasst? Wo hast du das Script eingebunden?

]]> Von: Christian http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/comment-page-1/#comment-425 Christian Fri, 08 Jul 2011 15:22:27 +0000 http://www.dertechblog.de/2009/03/zwei-div-container-auf-gleiche-hhe-bringen/#comment-425 Hallo, habs getestet. Funktioniert leider nicht. Es passiert leider gar nichts Hallo, habs getestet. Funktioniert leider nicht. Es passiert leider gar nichts

]]>