Komisches DIV

Y

yeronimo

Erfahrenes Mitglied
Moin,

habe in einem editor mehrere divs, die ineinanderliegen um die DIVS herum befindet sich ein Formular.
Mien Problem ist, das eins der inneren DIVs mit seinem Inhalt immer über das äußere DIV drübergeht und ich keine Ahnung habe warum.

Hier mal der code:
Code: 
<body id="table">
	<form onsubmit="" action="#" style="height: 100%;" >
	    <div class="tabs">
			<ul>
				<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">Allgemeine Einstellungen123</a></span></li>
				<li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">Erweiterte Einstellungen</a></span></li>
			</ul>
		</div>

		<div class="panel_wrapper" style="height: 100%;">
			<div id="general_panel" class="panel current" style="position: absolute;">
				<fieldset>
					<legend>Allgemein</legend>
					  <form id="bausteinForm" method="post" action="" onsubmit="Ok();" name="form2">
						<div id="divInfo">
							<table border="0" cellpadding="3" cellspacing="1" width="100%">
							  <tr>
								<td width="150"><b>Emailempf&auml;nger:<br>&nbsp;</b></td>
								<td colspan="3"><input id="mail_empf" name="" value="" size="25" style="width: 99%;" type="text"><br>Mehrere Empf&auml;nger durch Semikolon trennen</td>
							  </tr>
                                                        </table>
                                                     </div>
                                              </form>
                                        </fieldset>
                                  </div></div>
                                 </form>
                          </body>


das innere div mit der fieldview ist der Bösewicht, der sich immer über das andere panel rüberschiebt. (den oberen Teil nicht beachten, das gehört zu den beiden tabs).

im css sind nur hintergrundfarbe und border definiert. den rest sieht man hier.

Habe bereits mit den positions sowie mit den höhen auf 100% rumgespielt. (mache ich es beim äußeren apsst es sich an der fensterhöhe an, beim inneren passiert nichts. es bleibt wie vorher.)


Danke für eure Hilfe,
Gruß
Ron
 
Hi,

eine Frage erstmal vorweg, da es aus deinem HTML-Code nicht ersichtlich ist: In welchem Darstellungsmodus übergibst du die Seite den Browsern? "Quirks Mode" oder "Almost Standards Mode"?

Und weiter im Fragenkatalog: Sprichst du von dem <fieldset>-Element, das sich über die gesamte Fensterbreite erstreckt?

Abhilfe schafft hier eine Breitenangabe für den DIV-Block #general_panel.

Oder geht es dir um den vertikalen "Höhenüberschuß" von .panel_wrapper gegenüber dem ersten <form>-Tag?

Das liegt daran, dass sich die height:100%-Deklaration des inneren DIV-Blocks .panel_wrapper weiterhin auf die komplette Fensterhöhe bezieht, und er somit das umschliessende <form>-Element am unteren Ende um die Höhe des DIV-Blocks .tabs überlappt, wodurch die Seite trotz wenig Inhalt gescrollt werden kann.

Übrigens ist das Verschachteln des <form>-Elements nicht zulässig.

mfg Maik
 
Moin!

danke für eure Antworten, habe einmal einen Screenshot des Problems gemacht, damit es besser zu verstehen ist:

qiccx63e.jpg


das fieldset schiebt sich ueber das äußere general_wrapper. ist mir aber irgendwie unverstaendlich, da das fieldset innerhalb des general_wrapper teils liegt, eigentlich müsste sich doch das äußere div/... bei einer height von 100% seinem inneren Inhalt( in diesem Fall dem Fieldset + Inhalt) in der Höhe anpassen oder nicht ?


Besten Dank,
Gruß Ron
 
yeronimo hat gesagt.:
eigentlich müsste sich doch das äußere div/... bei einer height von 100% seinem inneren Inhalt( in diesem Fall dem Fieldset + Inhalt) in der Höhe anpassen oder nicht ?
Zum Vergrößern anklicken....
Nein, das tut es eben nicht, sondern wird vom inneren (ebenfalls mit height:100% formatiert) um die Höhe des vorangegangen DIV-Blocks .tabs überlappt.

mfg Maik
 
Ja, das sehe ich :P
Ich hab nur grad nicht so die Idee wie ichd as ändern kann. Einfach die 100% beim inneren rausnehmen und nur bei dem äußeren einsetzen hat es irgendwie nicht gebracht.

Wäre top wenn du mir noch einen Schups in die richtige Richtung geben könntest :)

Besten Dank,
Gruß Ron
 
Hi,

vielleicht ist dir ja mit diesem Layoutkonzept geholfen, das im Viewport zunächst eine Mindesthöhe von 100% einnimmt, und bei zunehmenden Inhalt mitwächst?

Da, wie von mir in meiner ersten Antwort darauf hingewiesen, das <form>-Element kein weiteres <form> in sich enthalten darf, habe ich hier das äußere <form> durch ein <div> mit der Klasse .wrapper ersetzt.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2009-12-17" />

<title>tutorials.de | demo_yeronimo</title>

<style type="text/css">
* { /* Mit dem Universalselektor die voreingestellten Polsterungseigenschaften aller im Dokument enthaltenden Elemente zurücksetzen */
margin:0;
padding:0;
}
html,body {
height:100%; /* Viewporthöhe auf 100% strecken */
}
.wrapper {
min-height:100%; /* Mindesthöhe in standardkonformen Browsern */
height:auto !important; /* automatische Höhe mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height:100%-Deklaration ignorieren */
height:100%; /* "Mindesthöhe" in IE6 */
background:#e9e9e9; /* dient in diesem Beispiel zur Visualisierung der Boxendimension */
}
.tabs {
background:#c9c9c9; /* dient in diesem Beispiel zur Visualisierung der Boxendimension */
}
</style>

</head>
<body>

<div class="wrapper">
     <div class="tabs">
          <ul>
              <li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">Allgemeine Einstellungen123</a></span></li>
              <li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">Erweiterte Einstellungen</a></span></li>
          </ul>
     </div>
     <div class="panel_wrapper">
          <div id="general_panel" class="panel current">
               <form id="bausteinForm" method="post" action="" onsubmit="Ok();" name="bausteinForm">
                     <fieldset>
                               <legend>Allgemein</legend>
                               <div id="divInfo">
                                    <table border="0" cellpadding="3" cellspacing="1" width="100%">
                                           <tr>
                                               <td width="150"><b>Emailempfänger:<br />&nbsp;</b></td>
                                               <td colspan="3"><input id="mail_empf" name="mail_empf"  size="25" style="width: 99%;" type="text" /><br />Mehrere Empfänger durch Semikolon trennen</td>
                                           </tr>
                                    </table>
                               </div>
                     </fieldset>
               </form>
          </div>
     </div>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück