Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag22.11.2009 um 13:47 (UTC)    
Titel: Kontaktformular in CSS Design einbauen

Hallo,
rechts habe ich auf meinem Design ein Kontaktformular, jedoch möchte ich es dort haben:

wie stelle ich das am geschicktesten an.
Hier ist noch mein Design Code:
Code:
<div id="Kontaktformular">
<!-- End Code dw-Formgenerator -->
<p><style type="text/css">
.font-big {
 font-family: Verdana, sans-serif;
 font-size:16px; font-weight:bold;
 color:#000000;
}
.font-small {
 font-family: Verdana, sans-serif;

 font-size:10px; font-weight:normal;
 color:#000000;
}
.table {
 background-color:transparent;
 width:90%;
}
.table2 {
 background-color:transparent;
 width:100%;
}
.head {
 background-color:transparent;
}
.main {
 background-color:transparent;
 font-family: Verdana, sans-serif;
 font-size:12px; font-weight:normal;
 color:#000000;
}
.foot {
 background-color:transparent;
}
.align {
 text-align:left;
}
.textarea {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 border : 1px solid #808080;
}
.input {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 border : 1px solid #808080;
 font-size: 12px;
}
.select {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size: 12px;
}
.button {
 width : 130px;
}
</style></p>
<!-- Start Code dw-Formgenerator -->  <script type="text/javascript">
var tv=-1;
window.onLoad=page_tv();
function VerifyEmailAddress(EmailAddress) {
 if (window.RegExp) {
  var reg1str = "(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)";
  var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,4})(\]?)$";
  var reg1 = new RegExp(reg1str);
  var reg2 = new RegExp(reg2str);
  if (!reg1.test(EmailAddress) && reg2.test(EmailAddress)) {
   return true
  }else {
   return false
  }
 }else {
  if (EmailAddress.indexOf("@") >= 0) {
   return true
  }else {
   return false
  }
 }
}
function page_tv() {
 tv++;
 window.setTimeout('page_tv()', 1000);
}
function check_form(f,g) {
 if (f.elements['absender_mail'].value=='') {
  alert("Bitte alle Pflichtfelder ausfu00FCllen! n(Ihre E-Mail Adresse)");
  f.elements['absender_mail'].focus();
  return false;
 }else {
  if (!VerifyEmailAddress(f.elements['absender_mail'].value)) {
  alert("Bitte geben Sie eine gu00FCltige E-Mail Adresse ein! n(Ihre E-Mail Adresse)");
  f.elements['absender_mail'].focus();
   return false;
  }
 }
 if (navigator.appName=="Microsoft Internet Explorer") {
  for (i=0;i<f.length;i++) {
   var e=f.elements[i];
   if (e.type == 'submit' || e.type == 'reset')
    e.disabled=true;
  }
 }
 if (f.elements['page_tv']) {
  f.elements['page_tv'].value = tv;
 }
 return true;
}
</script>
<form name="dwmailer" action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" enctype="multipart/form-data" method="post" onsubmit="return check_form(this);">
    <input type="hidden" name="page_tv" value="" /> <input type="hidden" name="empfaenger_mail" value="bG9ja2VyendlbGNvbWVAd2ViLmRl" /> <input type="hidden" name="language" value="de" /> <input type="hidden" name="page_background_color" value="transparent" /> <input type="hidden" name="page_font_color" value="#000000" />
    <table cellspacing="1" cellpadding="3" align="center" border="0" style="width: 24px; height: 87px;" class="table">
        <tbody>
            <tr>
                <td width="30%" class="main">
                <div class="align">Ihre E-Mail Adresse*</div>
                </td>
                <td class="main"><input type="text" class="input" name="absender_mail" size="20" /></td>
            </tr>
            <tr>
                <td width="100%" height="25" align="center" class="foot" colspan="2"><input type="submit" class="button" value="Abschicken" />  </td>
            </tr>
        </tbody>
    </table>
</form>
<!-- End Code dw-Formgenerator -->



<div id="Designbild"> </div>
<Div id="nav"><style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 370px;
left: 50%;
margin-left:-225px;
width:905px;
}

.menu li
{
width: 130px;
float: left;
}

.menu a
{
border: 0px solid #000000;
background-color: transparent;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #000000;
}

.menu a:hover
{
background-color: transparent;
background-image: url(URL);
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
text-decoration: underline;
padding-top: 15px;
border-top: 0px;
cursor: pointer;
color: #0000FF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="http://welcomelockerz.de.tl/"> Home</a> </li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="Informationen-.ue.ber-Lockerz.htm"> Informationen über Lockerz</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="Einladung.htm"> Einladung</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
</ul>
</li>
</ul>
</li>
</div>

Code:
td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px; }

/* Nullformatierung für alle Browser */
*{margin:0px; padding:0px; }

/* Hintergrund */
body {
font-family:courier new;
color:#000000;
font-size:12px;
background-color: #ffffff;
background-image: url(); }
a{color:#B2CCFF; font-size: 12px; text-decoration: none;}
a:hover {color: #99B2B2; font-size: 12px; text-decoration: none;}



/* Designbild / Breite und Höhe vom Bild einfügen */
#Designbild {
position:absolute;
top: 100px;
left:50%;
margin-left:-490px;
width:950px;
height:1000px;
background-image:url(http://img.webme.com/pic/w/welcomelockerz/lockerzd.png);}

/* Das Textfeld */
#content {
position: absolute;
left: 50%;
top: 450px;
margin-left:-330px;
width: 650px;
height:450px;
overflow:auto;}
color: #000000;
font-size:9px;
font-family:courier new;
text-align:left;
background-color:;
background-image:url();
border: 0px solid #FFFFFF;
z-index:1;}

/* Linkfarben im Textfeld content */
#content a{
color:#000000;}


/* Feld Navigation */
#nav_container {display:none;
position: absolute;
left:50%;
top:470px;
margin-left:240px;
border:0px solid #FFFFFF;
z-index:2;}


/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:1px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 140px;
font-family:courier new;
font-size:19px;font-weight:bold;
text-decoration: none;
text-align: center;
padding-left:1px;
color:#000000;
background-color:;
background-image:url();}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color:CCE5E5#;
font-size:14px;text-decoration: underline;
font-weight:bold;
background-color:C40000#;
background-image:url();
border: px solid #000000;}

[color=red]

/* Kontaktformular */
#Kontaktformular {
position: absolute;
left:50%;
top:470px;
margin-left:540px;
border:0px solid #FFFFFF;
z-index:2;}
[/color]


/* rechte Box */
#sidebar_container {display:none;
position: absolute;
left: 50%;
top:810px;
margin-left:200px;
width: 214px;
height: 250px;
color: #C6BA8A;
font-size: 10px;
font-family: arial;
text-align: center;
overflow: auto;
border: 0px solid #FFFFFF;
z-index:3;}

/* Felder die wir nicht benötigen */
h1#header {display:none;}
#sidebar_heading{display:none;}
#counter{display:none;}
#nav_heading{display:none;}
Beitrag23.11.2009 um 10:31 (UTC)    
Titel:

Ist das Formular ein Extra oder ein Code?
Beitrag23.11.2009 um 12:09 (UTC)    
Titel:

Ein code aus dem Internet. Mr. Green
Beitrag23.11.2009 um 18:47 (UTC)    
Titel:

Kann mir niemand helfen?
Hier mal nur der Code von dem Kontaktformular
Code:
<div id="Kontaktformular">
<!-- End Code dw-Formgenerator -->
<p><style type="text/css">
.font-big {
 font-family: Verdana, sans-serif;
 font-size:16px; font-weight:bold;
 color:#000000;
}
.font-small {
 font-family: Verdana, sans-serif;

 font-size:10px; font-weight:normal;
 color:#000000;
}
.table {
 background-color:transparent;
 width:90%;
}
.table2 {
 background-color:transparent;
 width:100%;
}
.head {
 background-color:transparent;
}
.main {
 background-color:transparent;
 font-family: Verdana, sans-serif;
 font-size:12px; font-weight:normal;
 color:#000000;
}
.foot {
 background-color:transparent;
}
.align {
 text-align:left;
}
.textarea {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 border : 1px solid #808080;
}
.input {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 border : 1px solid #808080;
 font-size: 12px;
}
.select {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size: 12px;
}
.button {
 width : 130px;
}
</style></p>
<!-- Start Code dw-Formgenerator -->  <script type="text/javascript">
var tv=-1;
window.onLoad=page_tv();
function VerifyEmailAddress(EmailAddress) {
 if (window.RegExp) {
  var reg1str = "(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)";
  var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,4})(\]?)$";
  var reg1 = new RegExp(reg1str);
  var reg2 = new RegExp(reg2str);
  if (!reg1.test(EmailAddress) && reg2.test(EmailAddress)) {
   return true
  }else {
   return false
  }
 }else {
  if (EmailAddress.indexOf("@") >= 0) {
   return true
  }else {
   return false
  }
 }
}
function page_tv() {
 tv++;
 window.setTimeout('page_tv()', 1000);
}
function check_form(f,g) {
 if (f.elements['absender_mail'].value=='') {
  alert("Bitte alle Pflichtfelder ausfu00FCllen! n(Ihre E-Mail Adresse)");
  f.elements['absender_mail'].focus();
  return false;
 }else {
  if (!VerifyEmailAddress(f.elements['absender_mail'].value)) {
  alert("Bitte geben Sie eine gu00FCltige E-Mail Adresse ein! n(Ihre E-Mail Adresse)");
  f.elements['absender_mail'].focus();
   return false;
  }
 }
 if (navigator.appName=="Microsoft Internet Explorer") {
  for (i=0;i<f.length;i++) {
   var e=f.elements[i];
   if (e.type == 'submit' || e.type == 'reset')
    e.disabled=true;
  }
 }
 if (f.elements['page_tv']) {
  f.elements['page_tv'].value = tv;
 }
 return true;
}
</script>
<form name="dwmailer" action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" enctype="multipart/form-data" method="post" onsubmit="return check_form(this);">
    <input type="hidden" name="page_tv" value="" /> <input type="hidden" name="empfaenger_mail" value="bG9ja2VyendlbGNvbWVAd2ViLmRl" /> <input type="hidden" name="language" value="de" /> <input type="hidden" name="page_background_color" value="transparent" /> <input type="hidden" name="page_font_color" value="#000000" />
    <table cellspacing="1" cellpadding="3" align="center" border="0" style="width: 24px; height: 87px;" class="table">
        <tbody>
            <tr>
                <td width="30%" class="main">
                <div class="align">Ihre E-Mail Adresse*</div>
                </td>
                <td class="main"><input type="text" class="input" name="absender_mail" size="20" /></td>
            </tr>
            <tr>
                <td width="100%" height="25" align="center" class="foot" colspan="2"><input type="submit" class="button" value="Abschicken" />  </td>
            </tr>
        </tbody>
    </table>
</form>
<!-- End Code dw-Formgenerator -->


Was muss ich jetzt bei CSS Design eingeben?



/* Kontaktformular */
#Kontaktformular {
position: ?????;
left:??%;
top:???px;
margin-left:???px;
border:?px solid #?????;
z-index:?;}
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de