✔ Container-Darstellungsproblem nach absenden von PHP-Formular

J

julchen

Erfahrenes Mitglied
Hallo,
ich habe das Problem, dass sich das Layout meiner Seite zerschiesst, wenn ich über ein Kontaktformular eine Anfrage versende. Die Anfrage wird über PHP versand und die Bestätigung des absendens erscheint im gleichen Fenster des Formulares. Dabei wird die Box, welche eigentlich an den rechten Rand gehört in die mittlere Box verschoben und der Footer rutscht nach oben in die Bestätigungsmeldung.

Hier ein Screenshot wie es aussieht nach dem Versenden:

http://www.artbase-software.de/test/fehler_screenshot.jpg

Hier könnt Ihr euch mal den Quellcode anschauen:
http://www.artbase-software.de/test/seiten/demo_download.php

Wie gesagt, das Problem besteht auf allen Seiten, welche die gleiche Formular Routine verwenden.

Wer kann mir helfen?

Gruss
Julchen
 
Auf die Idee bist du nicht gekommen, zur Kontrolle auch mal den HTML-Code zu validieren, der nach der Formularverarbeitung an den Browser zurückgeschickt wird, wenn dieser die DIV-Blöcke von jetzt auf nachher so durcheinander würfelt ;-)

Der Fehler ist nicht im CSS, sondern in deinem verarbeitenden PHP-Script zu suchen, denn nach dem Versand und nachträglichen "Einschieben" von #errorbox in das best. Markup, wird #box_content vorzeitig, weil unmittelbar nach #content_middle, geschlossen, und umschließt folglich nicht mehr den rechten Spaltenblock, bevor der abschließende Footerbereich folgt.
 
Zuletzt bearbeitet:
Hm, was soll ich da antworten? Sollen du erstmal deinen Seiten-Quellcode incl. dem verarbeitenden PHP-Script hier zeigen? :suspekt:

Eigentlich dürftest du das so direkt vor Ort mit meinen Tipps und deinem PHP-Code vor Augen auch eigenständig herausfinden können, was als wirksame Gegenmaßnahme einzuleiten ist, denn der HTML-Code der "Antwort"-Seite verrät deutlich, dass zum einen zwischen den DIV-Blöcken #content_middle und #content_right ein schliessender </div>-Tag zuviel existiert, der nun #box_content vorzeitig schließt, weil er zuvor zu einem <div>-Element gehörte, das in dieser Markup-Fassung überhaupt nicht mehr existiert, weil durch #errorbox ersetzt.

Folge: der rechte Spaltenblock findet sich nicht mehr in seinem Elternelement wieder, fällt aus ihm heraus, und findet sich am Seitenende wieder.

Damit nicht genug, stimmt dein Dokumentende auch nicht mehr, wo jetzt der unmittelbar letzte schließende </div>-Tag vor </body></html> fehlt, der folgerichtig dem allesumfassenden <div id="box"> zugedacht ist.

Weiß nicht. Wer sich regelmäßig und etwas intensiver (haupt-/nebenberuflich, Hobby, etc.) mit der Webentwicklung befaßt, was bei dir in irgendeinem Rahmen zutreffen dürfte, wenn deine bisherige Themenliste überflogen wird, sollte schon beim ersten Anblick der "Antwort"-Seite hellhörig bzw. stutzig werden, ob denn auch der Script-Code koscher in sich und/oder eingesetzt ist, um im HTML-Code bruchstückhaft sein Markup zu tauschen, anstatt allererstes auf die unbeherrschbare, unberechenbare Macht der Formatierungssprache CSS zu schielen ;-)
 
Zuletzt bearbeitet:
Hallo....
Habe das Thema kurz überflogen: Bitte nicht sauer sein, wenn ich Dinge schreibe, die schon geschrieben wurden! Danke

Habe mal Deine Seite mir angeschaut und bin fast gestorben (im Quellcode)!

1. Ich weiss das es nervig ist und KEINEN Spaß macht, aber ein ordentlich formatierter Code sollte manchmal hilfreich sein. (Kann natürlich sein, dass er in der Quelldatei ordentlich ist) :D

2. Ich bin selber beruflich in der Branche Webentwicklung drin und muss sagen, dass Wordpress (zumindest die Standarttemplates) etwas haben, was sinnvoll ist!

Code: 
<div id="blablabla">
     BLABLABLA BLABLABLA
</div> <!-- /blablabla -->

Schreibt (vor allem, wenn Ihr noch nicht ganz so fit seid) an die DIV-Endungen ran, welchen DIV man schließt! Sieht zwar später ******** aus, aber kann (siehe jetzt) später auch ziemlich hilfreich sein!

3. Kannst Du evtl. Deinen Code posten****? Dann ist es einfacher den Fehler zu finden!
 
Hallo,
ja du hast Recht. Im Quellcode nach absenden des Formulars sind die </div> an den falschen Stellen. Allerdings ist der Code bevor ich das Formular wegschicke in Ordnung und die Div´s werden an den richtigen stellen geschlossen. Ich hab doch nur den .php Teil eingefügt.

<?
require_once "../formvalidator.php";
$show_form = true;
if(isset($_POST['Submit']))
{
$validator = new FormValidator();
$validator->addValidation("Spam","spam=$authHosts","Error 403 - Zugriff verweigert. Keine Berechtigung");
$validator->addValidation("Name","req","Bitte geben Sie Ihren Namen ein");
$validator->addValidation("Email","email","Die Schreibweise der Mailadresse ist falsch");
$validator->addValidation("Email","req","Bitte geben Sie Ihre Mailadresse ein");
$validator->addValidation("Telefon","req","Bitte geben Sie Ihre Telefonnummer ein");
$validator->addValidation("Code","captcha","Bitte geben Sie den Sicherheitscode korrekt ein");
if($validator->ValidateForm())
{
require_once "../output_multipart.php";
$show_form=false;
}
else
{
echo "<div id='errorbox'>\n<ul class='liste'>\n";
echo "<span class='errorstr'><B>Folgende Fehler sind aufgetreten:</B></span><br /><br />\n";
$error_hash = $validator->GetErrors();
foreach($error_hash as $inpname => $inp_err)
{
echo "<li>".ereg_replace("_"," ",$inpname).": $inp_err</li>\n";
}
echo "</ul>\n</div>\n";
}
}
if(true == $show_form)
{
?>


Die eigentliche Datei ist ja trotzem die gleiche (demo_download.php). Es existieren ja keine 2 unterschiedlichen Dateien.

Wie kann es dann sein, dass die div´s an den falschen Stellen geschlossen werden?

Gruss
Julchen
 
Hallo,
hier der verkürzte Quellcode ohne Textbausteine:

<body>
<div id="box"><a name="top" id="top"></a>
<div id="box_top">
<div class="flaggen_top"></div>
<div id="menu_top">
<div class="submenu_top"></div>
<div class="menu_top">
<div class="menu_top-active"></div>
</div>
</div>
<div id="top_banner"></div>
<div id="top_title"></div>
<div id="top_banner_demo"><a class="demo" href="demo.html">Kostenlose Demo herunterladen &rsaquo;&rsaquo;</a></div>
</div>
<div id="box_content" class="clearfix">
<div id="content_middle" class="clearfix">
<div class="content_middle_box">
<?
require_once "../formvalidator.php";
$show_form = true;
if(isset($_POST['Submit']))
{
$validator = new FormValidator();
$validator->addValidation("Spam","spam=$authHosts","Error 403 - Zugriff verweigert. Keine Berechtigung");
$validator->addValidation("Name","req","Bitte geben Sie Ihren Namen ein");
$validator->addValidation("Email","email","Die Schreibweise der Mailadresse ist falsch");
$validator->addValidation("Email","req","Bitte geben Sie Ihre Mailadresse ein");
$validator->addValidation("Telefon","req","Bitte geben Sie Ihre Telefonnummer ein");
$validator->addValidation("Code","captcha","Bitte geben Sie den Sicherheitscode korrekt ein");
if($validator->ValidateForm())
{
require_once "../output_multipart.php";
$show_form=false;
}
else
{
echo "<div id='errorbox'>\n<ul class='liste'>\n";
echo "<span class='errorstr'><B>Folgende Fehler sind aufgetreten:</B></span><br /><br />\n";
$error_hash = $validator->GetErrors();
foreach($error_hash as $inpname => $inp_err)
{
echo "<li>".ereg_replace("_"," ",$inpname).": $inp_err</li>\n";
}
echo "</ul>\n</div>\n";
}
}
if(true == $show_form)
{
?>

<div class="box_bg"></div>
</div>
</div>
<div id="content_right" class="clearfix">
<div class="content_right_box"></div>
</div>
</div>
<div id="footer">
<div class="footer_menu_right"><a href="firma.html">Firma</a>&nbsp;|&nbsp;<a href="agb.html">AGB&acute;s</a>&nbsp;|&nbsp;<a href="impressum.html">Impressum</a>&nbsp;|&nbsp;<a href="sitemap.html">Sitemap</a></div>
<div class="footer_menu_left">&copy; artBase! Software GmbH</div>
</div>
</div>
</body>
 
Und nun vergleich mal deinen gezeigten Code, mit diesem, der nach der Verarbeitung an den Browser zurückgeschickt wird (beginnend ab <div id="box">):

HTML: 
	<div id="box"><a name="top" id="top"></a>
		<div id="box_top">
        	...
	  		<div id="menu_top">
            	<!-- InstanceBeginEditable name="top_navigation" -->

                <div class="submenu_top">
               		...
                </div>
                <div class="menu_top">
                   	...
                </div>
                <!-- InstanceEndEditable -->
            </div>
            <!-- InstanceBeginEditable name="top_title_banner" -->

            <div id="top_banner">
            	...
            </div>
            <div id="top_title">
              ...

			</div>
            <div id="top_banner_demo">...</div>
            <!-- InstanceEndEditable -->
  	 	</div>
        <div id="box_content" class="clearfix">
		<!-- InstanceBeginEditable name="content_middle" -->
 			<div id="content_middle" class="clearfix">
       	 		<div class="content_middle_box">

       			  ...
                     <div id="errorbox">
...
</div>
                        <span class="box_bg-bottom-left"></span>
                        <span class="box_bg-bottom-right"></span>
                    </div>                        
				</div>    
			</div>	
		<!-- InstanceEndEditable -->

        	<div id="content_right" class="clearfix">
        		<div class="content_right_box">
            		<h3>19.11.
	          ...
            	</div>
        	</div>

        </div>
		<div id="footer">
    		<div class="footer_menu_right">...</div>
        	<div class="footer_menu_left">...</div>
		</div>

	
<!-- InstanceEnd -->

Das öffnende <div class="box_bg"> taucht dort garnicht mehr auf, womit eines der drei </div>-Tags vor dem DIV "#content_right" das DIV "#box_content" vorzeitig schliesst, und am Ende der Seite, im Anschluß nach dem DIV "#footer", fehlt ein </div>-Tag, der das DIV "#box" schliesst.

Wäre nett, wenn du zukünftig die Highlight-Tags für die Codevorstellung nutzt.
 
Zuletzt bearbeitet:
Hallo,
danke schon mal.

Ja das der komplette Container fehlt ist mir bewusst. Aber warum? Liegt es an der .php Deklaration oder woran?

Gruss
Julchen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück