✔ Formular schön plazieren

Status
Nicht offen für weitere Antworten.
M

mike4004

Erfahrenes Mitglied
Hallo


Also es geht um dieses Formular http://radio.nutzlos.org/setup.php meine Frage wäre wie ich das Formular schön plazieren kann mittels CSS so das es schön aussieht?

Hoffe hier hat jemand ein paar kreative Einfälle.

Bei Pdiri handelt es sich um ein Verändertes diri System während das original noch auf Bash und Perl aufbaut ist mein Klon komplett php. So ist es auf vielen System einsatzfähig.

mfg mike4004
 
Hi,

hier ein kleiner Ansatz, mit dem du etwas herumexperimentieren kannst ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

                <title>Setup Pdiri</title>
                <meta http-equiv="cache-control" content="no-cache">
                <meta http-equiv="pragma" content="no-cache">
                <meta name="author" content="Michael Grassl">
                <meta name="searchtitle" content="nutzlos.org radio.nutzlos.org pdiri diri">
                <meta name="keywords" content="pdiri php diri nutzlos.org">
                <meta name="description" content="Automatic wiki system">

                <meta name="revisit-after" content="2 days">
                <meta name="audience" content="all">
                <meta name="content-language" content="en">
                <meta name="copyright" content="(C)opyright 2006-2007 by Michael Graßl">
                <meta name="robots" content="noindex,nofollow">
                <style type="text/css">
                        body { background-color: #333; color: #ddd; font-family: sans-serif; margin: 0px 0px 0px 0px; max-width: 80em; }
                        img { border: 0px; /* top right bartom left */ }
                        a { color: #9cf; }
                        div#wrapper { position:relative; margin:0 auto; width: 800px; min-height:100%;  height:auto !important;  height:100%;
                        background:#e9e9e9; }

                        #content { padding-bottom:30px; /* Damit der Inhalt nicht unter den Footer wandert */ }

                        div#bot { position:absolute; bottom:0; left:0; width:99%; background:#222; clear:both; padding:5px 1% 5px 0px; text-align:right;
                        color:#fff; }

                        div#editor{ background-color: #333; border: 0px; color: #ddd; padding: 2%; width: 96%; }

                        #editor h1 { text-align:center; }
                        div#bar { background-color: #222; border: 0px; clear: both; padding: 5px 1% 5px 0px; text-align: right; width: 99%; }

                        #formular {
                        width:250px;
                        margin:50px auto 0 auto;
                        }

                        #formular ul {
                        margin:0;
                        padding:0;
                        list-style:none;
                        }

                        #formular ul span {
                        float:left;
                        width:100px;
                        font-weight:bold;
                        }

                        #formular textarea { background-color: #444; border: 1px solid #555; color: #eee; width: 100%; }
                        #formular input { background-color: #444; border: 1px solid #555; color: #eee; }
                </style>
        </head>
        <body>

                <div id="bar">
                        <i>Setup Pdiri</i>
                </div>
                <div id="editor">
                        <h1>Setup Pdiri system</h1>
                        <form id="formular" action="">
                              <ul>
                                  <li><span>E-mail:</span><input type='text' name='mail' size='20'/></li>
                                  <li><span>Password:</span><input type='password' name='password' size='20'/></li>
                                  <li><input type='submit' value='Save'/></li>
                              </ul>
                        </form>
                </div>
                <div id="bot">
                        <small>&copy; Copyright 2007 Michael Grassl <a href="http://www.nutzlos.org">Impressum</a></small>
                </div>
        </body>
</html>
 
Hi

jo das schaut schon um einiges besser aus.

Hast du noch ne Idee wie ich den Save button vom Textfeld noch ein bisschen weg bekomme?

mfg mike4004
 
Code: 
#formular input.button { margin-top:10px; }
Code: 
<form id="formular" action="">
      <ul>
          <li><span>E-mail:</span><input type='text' name='mail' size='20'/></li>
          <li><span>Password:</span><input type='password' name='password' size='20'/></li>
          <li><input type='submit' value='Save' class="button" /></li>
      </ul>
</form>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück