Problem mit Formular - verhagelt mir das Style - (X)HTML & CSS & DHTML & Javascript

Chenda

Routinier

Dabei seit: 03.02.2008

Beiträge: 334

1

Donnerstag, 9. April 2009, 13:47

Problem mit Formular - verhagelt mir das Style

Hi zusammen,
ich habe ein kleines Problem: Ich habe ein Formular (php), welches leider mal gar nicht richtig im Design angezeigt wird.
Wo liegt der Fehler?

Es geht um diese Seite:
http://mib.wmw.cc/aa/kontakt.php

Vielen Dank für eure Hilfe.
PS: das Formular inkl. aller Felder soll komplett im rechten / weißen Bereich angezeigt werden.

danke fürs Lesen
Alludo Animali

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327

2

Donnerstag, 9. April 2009, 13:58

HTML

<form action="/aa/kontakt.php" method="post" class="form">
<input type="hidden" name="return" value="/danke.htm">
<input type="hidden" name="subject" value="Feedback-Formular">
<fieldset><legend>Hinweis:</legend>
<div class="explain">Felder mit Stern * m&uuml;ssen ausgef&uuml;llt
werden. Bei Anforderungen von Informations Material und / oder Er&ouml;ffnungsunterlagen geben Sie mit dem Absenden dieses Formulares ihr Einverst&auml;ndnis Ihre Daten an die entsprechende Bank / Gesellschaft weiterzuleiten.</div>
</fieldset>
</td>
</tr><tr>
<td><fieldset><legend>Daten:</legend>

<div>Vorname: <b>*</b><br>
<input type="text" name="Vorname" class="text"
       style="width:400px">
</div>
<div>Nachname: <b>*</b><br>
<input type="text" name="Zuname" class="text"
       style="width:400px">
</div>
<div>Stra&szlig;e:<br>
<input type="text" name="Strasse" class="text"
       style="width:400px">
</div>
<div>PLZ Wohnort:<br>

<input type="text" name="PLZ" class="text"
       style="width:400px">
</div>
<div>Land:<br>
<input type="text" name="Land" class="text"
       style="width:400px">
</div>
<div>E-Mail: <b>*</b><br>
<input type="text" name="Mail" class="text"
       style="width:400px">
</div>
<div>Ihr Text: <b>*</b><br>
<textarea name="Text" class="text"
       style="width:400px; height:300px"></textarea>
</div>

</fieldset>
<fieldset><legend>Daten:</legend>
<p>
<input type="submit" name="feedback" class="button"
       value="Absenden">
<input type="reset" class="button" value="L&ouml;schen">
</p>
</fieldset>
</form>

	Cascading Style Sheet
1 2 3	.form { margin-left: 130px; /* diesen Wert musst du eventuell noch ändern */ }

dermainzer

Chenda

Routinier

Dabei seit: 03.02.2008

Beiträge: 334

3

Donnerstag, 9. April 2009, 14:11

also ich habe nun in style.css deinen Vorschlag eingebaut.

Allerdings ändert das rein gar nichts, auch wenn ich die Pixel Zahl ändere.
Das php Script steht ja auch bereits in dem Container, der den rechten weißen Bereich angibt:

kontakt.php

Spoiler
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html40/strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="author" content="Angela Quintus">
 <meta name="description" content="Dies ist die Kontaktseite von Alludo Animali. Sie k&ouml;nnen Hier Informationsmaterial anfordern, um einen R&uuml;ckruf bitten oder direkt einen Kurs buchen. Nat&uuml;rlich kann diese Seite auch lediglich f&uuml;r Feedback genutzt werden.">
 <meta name="keywords" content="Zirkuslektionen, Irish tinker, Araber, Show, Pferdeshow, Zirkuskurs, Freiburg, Auftritt, Showprogramm, Kontrolle, Dominanz, Vertrauen, Geduld, Freiheitsdressur, Western, reiten, Longieren, Kinderreiten, Fotos, Kursgeb&uuml;hr, Kurspreise, Showdaten, Angela, Quintus, Anna Fahl, Bollschweil, Medi, Zaidin, Tinkerstute, Zirzensische arbeit, Belohnung">
 <title>Alludo Animali - sich dem Tier spielend n&auml;hern - Kontaktseite f&uuml;r Anfragen, Informationen, Buchung, Feedback...</title>
 <link rel="stylesheet" type="text/css" media="screen" href="main.css">
 <link rel="stylesheet" type="text/css" media="screen" href="colorschemes/colorscheme5/colorscheme.css">
 <link rel="stylesheet" type="text/css" media="screen" href="style.css">
 <script type="text/javascript" src="live_tinc.js"></script>
</head>
<body id="main_body">
 <div id="container">
  <div id="header">
   <div id="logo">   </div>
   <div id="key_visual">&nbsp;   </div>
   <div id="slogan">  </div>
  </div>
  <div id="main_container">
   <div id="main_nav_container">
    <ul id="main_nav_list">
     <li><a class="main_nav_item" href="index.html">Home</a></li>
     <li><a class="main_nav_item" href="wir.html">&uuml;ber uns</a></li>
     <li><a class="main_nav_item" href="zirkuslektionen.html">Zirkuslektionen</a></li>
     <li><a class="main_nav_item" href="fotos.html">Fotos</a></li>
     <li><a class="main_nav_item" href="links.html">Links</a></li>
     <li><a class="main_nav_active_item" href="kontakt.php">Kontakt</a></li>
     <li><a class="main_nav_item" href="gb.html">G&auml;stebuch</a></li>
    </ul><br clear="all">
   </div>
   <table id="layout_table">
    <tr>
     <td id="left_column">
      <div id="sub_container1">
       <div id="sub_nav_container">
        <ul class="sub_nav_list">
         <li><a class="sub_nav_item" href="impressum.html">Impressum</a></li>
        </ul>
       </div>
      </div>
     </td>
     <td id="right_column">
      <div id="sub_container2">
       <div class="content" id="content_container">
        <p><span style="font-size:14px;"><font face="Georgia,serif">Bei Fragen k&ouml;nnen Sie sich gerne an uns wenden:</font></span></p>
PHP-Quelltext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
#-------------------------------------------
# Globale Daten:
$mailto = "mib@habmalnefrage.de";
$form_file = "form/24hj3/feedback.htm";
$thanks_file = "form/24hj3/danke.htm";
$standard_legend = "Hinweis";
$error_legend = "Fehler";

#-------------------------------------------
# Entscheiden was zu tun ist:
if(isset($_POST['feedback']))
   check_form_data();
else
   show_form_data(false);

#-------------------------------------------
# Funktion show_form_data():
# Formular anzeigen
function show_form_data($with_error) {
   global $form_file, $standard_legend, $error_legend;
   $page = file_get_contents($form_file);
   $page = preg_replace("/\[\%self\%\]/",
           $_SERVER['SCRIPT_NAME'], $page);
   if($with_error == true)
      $page = preg_replace("/\[\%legend\%\]/",
              $error_legend, $page);
   else
      $page = preg_replace("/\[\%legend\%\]/",
              $standard_legend, $page);
   echo $page;
   exit();
}

#-------------------------------------------
# Funktion check_form_data():
# Formulareingaben prüfen
function check_form_data() {
   //echo "<pre>", var_dump($_POST), "</pre>";
   if(empty($_POST['Mail']) or empty($_POST['Vorname']) or empty($_POST['Zuname']) or empty($_POST['Text']))
      show_form_data(true);
   else
      mail_and_thanks();
}

#-------------------------------------------
# Funktion mail_and_thanks():
# Formulareingaben mailen und Dankeseite ausgeben
function mail_and_thanks() {
   global $mailto, $thanks_file;
   $headers = "From: {$_POST['Vorname']} {$_POST['Zuname']} ";
   $headers .= "<{$_POST['Mail']}>\r\n";
   $headers .= "Content-Type: text/plain; charset=ISO-8859-1\r\n";
   $headers .= "Content-Transfer-Encoding: 8bit";
   $page = file_get_contents($thanks_file);$myMailBody = $_POST['Vorname']. " ".$_POST['Zuname']." \nStrasse:".$_POST['Strasse']."\nPLZ: ".$_POST['PLZ']." Land: ".$_POST['Land']." \n Mail:".$_POST['Mail']."\n Message: ".$_POST['Text'];
mail($mailto, $_POST['subject'], $myMailBody, $headers);
   echo $page;
   exit();
}
?>
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</div>
      </div>

      <div id="footer_text">
       <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
         <td><div align="left">Alludo Animali - sich dem Tier spielend n&auml;hern</div></td>
         <td>&nbsp;</td>
        </tr>
        <tr>
         <td><div align="left">zuletzt aktualisiert am 07.04.2009</div></td>
         <td><div align="right"><a href="inhalt.html">Inhaltsverzeichnis</a></div></td>
        </tr>
       </table>
      </div>
      
     </td>
    </tr>
   </table>
  </div>
 </div>
 <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3678172-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

style.css

Spoiler
Cascading Style Sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
div#logo a {
  display: block;
  width: 100%;
  height: 100%;
}
    
#key_visual {
   background: url(resources/_wsb_keyvisual.png) no-repeat;
}
#slogan {
  font-family: Verdana,sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: normal;
  text-decoration: none;
  color: #df7f4f;
}
#main_nav_list a.main_nav_active_item {
  background: url(images/dynamic/buttonset5/main_nav_active.gif) no-repeat;
  font-family: Georgia,serif;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  color: #a74a23;
}
#main_nav_list a.main_nav_item {
  background: url(images/dynamic/buttonset5/main_nav.gif) no-repeat;
  font-family: Georgia,serif;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  color: #feeec7;
}
#main_nav_list a.main_nav_item:hover {
  background: url(images/dynamic/buttonset5/main_nav_active.gif) no-repeat;
  font-family: Georgia,serif;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  color: #a74a23;
}
.sub_nav_list a.sub_nav_active_item {
  background: url(images/dynamic/buttonset5/sub_nav_active.gif) no-repeat;
  font-family: Georgia,serif;
  font-style: normal;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: #ffe18e;
}
.sub_nav_list a.sub_nav_item {
  background: url(images/dynamic/buttonset5/sub_nav.gif) no-repeat;
  font-family: Georgia,serif;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  color: #e27f55;
}
.sub_nav_list a.sub_nav_item:hover {
  background: url(images/dynamic/buttonset5/sub_nav_active.gif) no-repeat;
  font-family: Georgia,serif;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  color: #ffe18e;
}
#content_container h1 {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 27px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}
.content h2 {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}
.content h3 {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}
.content, .content p {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: normal;
  text-decoration: none;
  color: #4c4d4e;
}
.content a:visited {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 100%;
  font-weight: normal;
  text-decoration: none;
  color: #6c626a;
}
.content a:link {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 100%;
  font-weight: normal;
  text-decoration: none;
  color: #ad2938;
}
.content a:hover {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 100%;
  font-weight: normal;
  text-decoration: underline;
  color: #ad2938;
}
.content a:active {
  font-family: verdana, arial, tahoma, sans-serif;
  font-style: normal;
  font-size: 100%;
  font-weight: normal;
  text-decoration: none;
  color: #ad2938;
}
#footer_text {
  font-family: Georgia,serif;
  font-style: normal;
  font-size: 11px;
  font-weight: normal;
  text-decoration: none;
  color: #7a7b7d;
}

.form {
margin-left: 440px;
}

Es klappt also nicht leider

danke fürs Lesen
Alludo Animali

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Chenda« (9. April 2009, 17:46)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 997

4

Donnerstag, 9. April 2009, 15:43

versuch mal in deine style.css datei das einzufügen:

fieldset{
float:left;
}

Mein kleines Projekt
-Cruel Online-

Chenda

Routinier

Dabei seit: 03.02.2008

Beiträge: 334

5

Donnerstag, 9. April 2009, 15:50

Hi und danke für den Tipp.
Aber den einzigen Effekt den ich bemerkt habe ist, dass die Eingabefelder nun minimal (wenige Pixel) höher stehen, als davor.

danke fürs Lesen
Alludo Animali

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 997

6

Donnerstag, 9. April 2009, 17:20

vllt hilft dir das dann weiter:

Spoiler
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

</style>
</head>

<body>
<div style="margin:auto;width:690px;border:1px solid white;">
<div style="background:url(header.png);width:690px;height:137px;"></div>
<div style="background:#df7f4f;height:22px;"> Navi</div>
<div style="background:#cccccc;width:150px;height:100px;float:left;"></div>
<div style="background:#bbbbbb;width:540px;height:100px;float:left;">
<fieldset style="border:1px solid black;"><legend>Daten</legend>
<form>
Vorname: *
<input style="width:400px;display:block;margin:10px;" type="text" />
</form>
</fieldset>
</div>
<div style="clear:both;"></div>
</div>
</body>

</html>

Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (9. April 2009, 17:20)

jumps

Tripel-As

Dabei seit: 24.02.2009

Beiträge: 221

7

Donnerstag, 9. April 2009, 18:46

Wow, bin echt beeindruckt. Die Homepage ist in ihrem Grundaufbau eigentlich sehr simpel, wenige Seiten und kaum Unterseiten. Aber wie hast dus denn geschafft das Ganze sowas von unübersichtlich, mit ganz grob geschätzt >100 Div-Containern zu machen? Nich so schlecht

Die zweite Sache: Die Pferde sind schuld! Ganz klar!

Ok, kommen wir zum Ernst des Lebens.
Die erste Sache, die du der Übersicht zu Liebe machen solltest, ist das PHP-Script zu exkludieren und per include() wieder einzubinden. Machts einfacher für dich.
Dann musste ich mich erstmal ewig in den CSS-Code einlesen. Wow, da hast aber viel komisches Zeug stehen.

Und warum arbeitest du mit Tabellen UND Div-Containern? Vollkommen unnütz, Div reicht allemal. Schau mal hier:

Quellcode

<table id="layout_table">
    <tr>
     <td id="left_column">
      <div id="sub_container1">
       <div id="sub_nav_container">
        <ul class="sub_nav_list">
         <li><a class="sub_nav_item" href="impressum.html">Impressum</a></li>
        </ul>
       </div>
      </div>
     </td>
     <td id="right_column">
      <div id="sub_container2">
       <div class="content" id="content_container">
        <p><span style="font-size:14px;"><font face="Georgia,serif">Bei Fragen k&ouml;nnen Sie sich gerne an uns wenden:</font></span></p>

Viel zu unübersichtlich und umständlich. Du machst 2 Div-Container und eine Tabelle auf, nur um ein Element einzufügen. Weiter unten machst dann wieder ne neue Tabellen-Zeile auf, danach wieder 2 Div-Container für ein Inhalt.
Um Probleme wie deins gerade so schnell und einfach wie möglich lösen zu können, solltest deine Struktur der Homepage nochmal komplett überdenken.

Nun zu deinem eigentlichen Problem. Muss zugeben, ich hab lang über deinen Quelltext gelesen und einfach nix gefunden, was denk ich mal vorallem an der Unübersichtlichkeit liegt. (Oder an meiner fachlichen Inkompetenz, will ich hier aber nich so öffentlich preisgeben

) Das einzige, was mir direkt aufgefallen ist, ist das Ende deiner CSS-Datei.

	Cascading Style Sheet
1 2 3	.form { margin-left: 440px; }

Wofür hastn das da drin?

Zitat

Photoshop machts möglich.

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 997

8

Donnerstag, 9. April 2009, 19:44

also für mich sieht diese page aus als ob sie mit irgend einem WYSIWYG editor erstellt wurde. finde auch dass da zu viele divs drin sind jedoch finde ich die farbzusammensetzung und das layout wirklich hübsch

Mein kleines Projekt
-Cruel Online-

Chenda

Routinier

Dabei seit: 03.02.2008

Beiträge: 334

9

Samstag, 11. April 2009, 11:21

Zitat von »jumps«
Wow, bin echt beeindruckt. Die Homepage ist in ihrem Grundaufbau eigentlich sehr simpel, wenige Seiten und kaum Unterseiten. Aber wie hast dus denn geschafft das Ganze sowas von unübersichtlich, mit ganz grob geschätzt >100 Div-Containern zu machen? Nich so schlecht Das einzige, was mir direkt aufgefallen ist, ist das Ende deiner CSS-Datei.
Cascading Style Sheet
1
2
3
.form {
margin-left: 440px;
}
Wofür hastn das da drin?

Hi jumps,

vielen Dank für deinen ausführlichen Kommentar und deine Bemühungen. Und du hast recht: ich sollte die Struktur überarbeiten.
Warum das am Ende in der Css Datei drin steht ist mir auch nicht so klar. Es war der Tipp von dermainzer, welcher aber keine Auswirkungen zeitigt.

danke fürs Lesen
Alludo Animali

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 997

10

Sonntag, 12. April 2009, 14:26

schau mal ich habe ein paar beiträge weiter oben ein html code gepostet im grunde ist es dein komplettes layout ohne navigation und inhalt und farben stimmen nciht ganz aber das grundlayout ist da schon fertig erstellt

MFG

Mein kleines Projekt
-Cruel Online-

Problem mit Formular - verhagelt mir das Style

HTML

Cascading Style Sheet

HTML

PHP-Quelltext

HTML

Cascading Style Sheet

HTML

Quellcode

Cascading Style Sheet

Zitat

Zitat von »jumps«

Cascading Style Sheet

Ähnliche Themen