PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML+CSS: Formularbuttons zerreissen mein Layout!

mf_2
2007-05-12, 01:53:42
Hallo,

Ich habe ein Problem:

Das Interface meiner Adressverwaltung (habe ich in PHP geschrieben) funktioniert nicht so, wie es soll.

So sieht die Box im Normalzustand aus:

http://mf2server.gotdns.org/pics/3dc/box.png

Das ist der Quellcode dazu:



<DIV style="width:300px; border-color:black; border-width:0px; border-style:solid; padding:0px">
<TABLE border=0 cellpadding=0 cellspacing=0 style="width:300px">
<TR><TD style="background-image:url(./xpstyle/topbar-left.gif); width:5px;height:30px;">&nbsp;</TD>
<TD style="background-image:url(./xpstyle/topbar-center.gif); width:auto;height:30px;color:#FFFFFF;font-weight:bold;font-size:8pt;">&nbsp;&nbsp;&nbsp;Personen</TD>
<TD style="background-image:url(./xpstyle/topbar-right.gif); width:6px;height:30px;">&nbsp;</TD>
</TR></TABLE>
<TABLE border=0 cellpadding=0 cellspacing=0 style="width:300px"><TR style="height:auto;">
<TD style="width:5px;background-image:url(./xpstyle/centerbar-left.gif);">&nbsp;</TD>
<TD style="background-color:#FFFFFF;"><BR>
<FORM action=index.php method=post>
<INPUT type=hidden name=AddressesFormPagename value='AddressesStart.include'>
<INPUT type=hidden name=step value=Start>
&nbsp;&nbsp;Passwort: <INPUT type=password name=AddressesPassword size=20 maxlength=20>
<INPUT type=submit value='Go!'></FORM></TD>
<TD style="width:5px;background-image:url(./xpstyle/centerbar-right.gif);">&nbsp;</TD></TR>
<TR style="height:10px;"><TD style="width:5px;background-image:url(./xpstyle/bottombar-left.gif);"></TD>
<TD style="background-image:url(./xpstyle/bottombar-center.gif);"></TD>
<TD style="width:5px;background-image:url(./xpstyle/bottombar-right.gif);"></TD>
</TR></TABLE></DIV>



Das funzt auch wunderbar.

Mit der Eingabe des richtigen Passworts meldet man sich an und kann nun einen Kontakt ansehen. Dabei soll man sich aber auch wieder ausloggen können.

So sieht das aus:

http://mf2server.gotdns.org/pics/3dc/box-defekt.png

Wie ihr seht, ist die Titelzeile zu groß.

Hier der Code:




<DIV style="width:300px; border-color:black; border-width:0px; border-style:solid; padding:0px">
<TABLE border=0 cellpadding=0 cellspacing=0 style="width:300px;margin:0px;"><TR style="vertical-align:top;">
<TD style="background-image:url(./xpstyle/topbar-left.gif); width:5px;height:30px;">&nbsp;</TD>
<TD style="background-image:url(./xpstyle/topbar-center.gif); width:auto;height:30px;color:#FFFFFF;font-weight:bold;font-size:8pt;vertical-align:top;">
&nbsp;&nbsp;&nbsp;<FORM action=index.php method=post>
<INPUT type=hidden name=AddressesFormPagename value='AddressesLogout.include'>
<TABLE border=0 cellpadding=0 cellspacing=0 style="margin:0px"><TR>
<TD>
<DIV style="color:#FFFFFF;font-weight:bold;font-size:8pt;vertical-align:top;">Personen</DIV>
</TD>
<TD style="width:100%;text-align:right;"><input type="image" src="./xpstyle/logout.gif" name="submit" value="Absenden" /></TD>
</TR></TABLE>
</FORM>
</DIV>
</TD>
<TD style="background-image:url(./xpstyle/topbar-right.gif); width:6px;height:30px;">&nbsp;</TD>
</TR></TABLE>
<TABLE border=0 cellpadding=0 cellspacing=0 style="width:300px"><TR style="height:auto;">
<TD style="width:5px;background-image:url(./xpstyle/centerbar-left.gif);">&nbsp;</TD>
<TD style="background-color:#FFFFFF;"><BR>
<FORM action=index.php method=post>
<INPUT type=hidden name=AddressesFormPagename value='test'>
Auswahl: <SELECT name=sqlid><OPTION value=1>&nbsp;</OPTION></SELECT><P>
<INPUT type=submit value='Ansehen'>
</FORM>
</TD>
<TD style="width:5px;background-image:url(./xpstyle/centerbar-right.gif);">&nbsp;</TD>
</TR>
<TR style="height:10px;">
<TD style="width:5px;background-image:url(./xpstyle/bottombar-left.gif);"></TD>
<TD style="background-image:url(./xpstyle/bottombar-center.gif);"></TD>
<TD style="width:5px;background-image:url(./xpstyle/bottombar-right.gif);"></TD>
</TR></TABLE>
</DIV>


Ich habe schon alles versucht, z.B. die unsichtbare Tabelle um das FORM Zeug in der Titelleiste weglassen, die DIVs dort weglassen. Mit den margin-Attributen habe ich auch schon rumgespielt, und ich habe ja auch alle Höhen etc. der Tabellen fixiert, so geht es ja im ersten Zustand der Box auch.

Wisst ihr da weiter? Da sitze ich schon seit mind. 21 Uhr dran und verzweifle langsam aber sicher...
DanMan
2007-05-12, 12:25:55
Du machst es uns leichter, wenn du wenigstens die Problemstelle in eine HTML Seite packst und irgendwo hochlädst.
mf_2
2007-05-12, 12:55:09
Hier: http://mf2server.gotdns.org/3dc/index.php
Sephiroth
2007-05-12, 13:50:24
Beim Text und dem X-Button margin-top:-10px und margin-bottom:-5px. (so in etwa ...)

p.s.
Die Tabelle ist überflüssig wie ein Kropf.
mf_2
2007-05-12, 14:05:09
Ich weiss nicht welche Tabelle du genau meinst. Wenn ich die kleine, unsichtbare Tabelle beim Logout-Button entferne, stehen die DIVs mit dem Fenstertitel und dem Logout-Button nicht mehr in einer Zeile. Mir wäre es auch ohne die Tabelle lieber, da es langsam schwer wird, die ganzen DIVs und TABLEs auseinanderzuhalten.
DanMan
2007-05-12, 15:59:48
Wenn sich die Höhe der Fenster nicht ändert sollte, warum dann nicht einfach ein Div mit dem Windows-Fenster-Kram als Hintergrundbild und fertig? Und dann die ganzen Tabellen raus - die haben da nämlich nix verloren, wie Sepiroth schon erwähnt hat.
mf_2
2007-05-12, 17:40:16
Das ist es ja: Die Höhe kann sich ändern. Wenn man eingeloggt ist, wird in dem Windowsfenster eine Liste geladen. Der einzige Teil, der sich nicht ändert, ist die Titelzeile.

Und wenn ich die Tabellen rausnehme, dann werden die dummen DIVs alle untereinander statt nebeneinander dargestellt (siehe mein vorheriger Post), ich muss die Tabelle also quasi als Stütze hernehmen. Irgendwie bin ich wohl zu blöd für DIVs.