Formularfeld zentrieren

[jesch1973]

Hallo HTMLer,

ich bin ziemlicher Anfänger in HTML und will gerne mein Formularfeld mittig in die Seite bekommen. Leider steht es ca. einen Zentimeter zu weit links. Vielen Dank schon mal

Nutzen tue ich style.css

Habe es mal hier her kopiert: Den Ausschnitt aus dem HTML Code steht unten.

@charset "utf-8";
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333333;
background-image: url(../images/repeater.jpg);
background-repeat: repeat-x;
margin-top: 0px;

}
#mainWrapper {
width: 734px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
#notice {
background-color: #fffbef;
padding-top: 5px;
padding-bottom: 5px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #ede7c3;
border-bottom-color: #EDE7C3;
margin-top: 5px;
margin-bottom: 5px;
}

h2 {
font-weight: normal;
}

.style12 {
color: #620000;
font-size: 55px;
}

.style4 {
font-size: 36px;
color: #990000;
font-weight: bold;
}

form {
clear: both;
padding: 0px 0px;
}

input[type=text] {
border: 2px solid #dddddd;
width:235px;
padding-left: 5px;
padding-bottom:5px;
padding-top:5px;
margin-left:-5px;
font-size: 14px;
clear: both;
margin-bottom:5px;
display: block;
font-weight: bold;
background: #f9f9f9;

width: 98%;
color: #444;
}
#footer {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;
}
input[type=text]:focus {
border: 2px solid #65b3f9;
}

input[type=image] {
display: block;
margin: 0px auto;
clear: both;
}

HTML-Code

<center>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var $cr=jQuery.noConflict();var old_src;$cr(document).ready(function(){$cr(".cr_form").submit(function(){$cr(this).find('.clever_form_error').removeClass('clever_form_error');$cr(this).find('.clever_form_note').remove();$cr(this).find(".musthave").find('input, textarea').each(function(){if(jQuery.trim($cr(this).val())==""||($cr(this).is(':checkbox'))||($cr(this).is(':radio'))){if($cr(this).is(':checkbox')||($cr(this).is(':radio'))){if(!$cr(this).parent().find(":checked").is(":checked")){$cr(this).parent().addClass('clever_form_error')}}else{$cr(this).addClass('clever_form_error')}}});if($cr(".cr_form").attr("action").search(document.domain)>0&&$cr(".cr_form").attr("action").search("wcs")>0){var cr_email=$cr(this).find('input[name=email]');if(cr_email.val()){$cr.ajax({type:"GET",url:$cr(".cr_form").attr("action").replace("wcs","check_email")+$cr(this).find('input[name=email]').val(),success:function(data){if(data){cr_email.addClass('clever_form_error').before("<div class='clever_form_note cr_font'>"+data+"</div>");return false}},async:false})}var cr_captcha=$cr(this).find('input[name=captcha]');if(cr_captcha.val()){$cr.ajax({type:"GET",url:$cr(".cr_form").attr("action").replace("wcs","check_captcha")+$cr(this).find('input[name=captcha]').val(),success:function(data){if(data){cr_captcha.addClass('clever_form_error').after("<div style='display:block' class='clever_form_note cr_font'>"+data+"</div>");return false}},async:false})}}if($cr('.clever_form_error').length){return false}return true});$cr('input[class*="cr_number"]').change(function(){if(isNaN($cr(this).val())){$cr(this).val(1)}if($cr(this).attr("min")){if(($cr(this).val()*1)<($cr(this).attr("min")*1)){$cr(this).val($cr(this).attr("min"))}}if($cr(this).attr("max")){if(($cr(this).val()*1)>($cr(this).attr("max")*1)){$cr(this).val($cr(this).attr("max"))}}});old_src=$cr("div[rel='captcha'] img").attr("src");if($cr("div[rel='captcha'] img").length!=0){captcha_reload()}});function captcha_reload(){var timestamp=new Date().getTime();$cr("div[rel='captcha'] img").attr("src","");$cr("div[rel='captcha'] img").attr("src",old_src+"?t="+timestamp);return false}

</script>


<style>
.cr_site { background:#FFFFFF; text-align:center;}
.cr_header { background-color:#ccc; }
.cr_body {background-color:#efefef; padding:15px; }
.cr_page {border-width:1px;border-color:#000000;border-style:solid; width:640px; }
.cr_page {border-width:1px;border-color:#000000;border-style:solid;}
.cr_font {font: normal 12px Arial, Helvetica, sans-serif;}

.cr_header .logo {min-height:20px; }
.cr_header_text p {display:block;margin:5;padding:5px;}

.cr_ipe_item{ padding:1px 10px; margin:1px 10px; }
.cr_ipe_item.inactive { display:none; }
.cr_hr {border:0;background-color: #ccc;height: 1px;}

.imprint {font-size:0.8em;}
.cr_captcha {padding-center: 150px;}
.cr_ipe_item .itemname{display:block;float:center;width:150px;text-align:center;margin:5px 0px 0px 0px;}
.cr_ipe_item input[type="text"]{width:3ßßpx;}
.cr_ipe_item textarea{width:300px;}
.cr_ipe_item select{width:300px;}
.cr_ipe_item p {margin:0;}

.cr_ipe_item select {padding:5px 4px; border:1px solid #ccc; color:#333; background:#FFFFFF; margin:0px; padding:2px;}
.cr_ipe_item textarea:focus, input[type="text"]:focus {border:1px solid #ababab;}
.cr_ipe_item input, textarea{ padding:3px 3px; margin:2px; border:1px solid #ccc;}
.cr_ipe_item input[type="checkbox"], input[type="radio"] { border:none; width:15px; }

.cr_error {font-size:1.1em;padding:10px;}
.clever_form_error { background-color: #f99; color:#fff; border:1px solid #f22 !important}
.clever_form_note {margin:26px 0 0 3px;position:absolute;display:inline; padding: 2px 4px; font-weight:bold;background-color:#f2ecb5; color:#000; font-size:12px !important; }

.cr_body {width:480px; }
</style>


<style id="style">
.cr_site {background-color:#ffffff;}
.cr_header {background-color:#ffffff;color:#000;}
.cr_body {background-color:#ffffff;font-size:12px;color:#000;}
.cr_page {border-width:0px;border-style:none;border-color:#ffffff;width:275px;}
.cr_site a {color:#0084ff;}
.cr_hr {background-color:#ccc;}
</style>



<form class="layout_form cr_form cr_font" action="http://11781.cleverreach.de/f/13599/wcs/" method="post" target="_blank">
<div class="cr_body cr_page cr_font">
<div class='non_sortable' style='text-align:left;'>

</div>

<div class='editable_content' style='text-align:left;'>
<br /><div id="311369" rel="email" class="cr_ipe_item ui-sortable musthave" style="margin-bottom:0px;">
<label for="text311369" class="itemname"></label> <input id="text311369" name="email" type="text" value="Hier Ihre E-Mail..." style="width:150px;">
</div><div id="311377" rel="text" class="cr_ipe_item ui-sortable musthave" style=" margin-bottom:0px;">
<label for="text311377" class="itemname"></label> <input id="text311377" name="lastname" type="text" value="Hier Ihren Namen..." style="width:150px;">
</div><div id="311379" rel="text" class="cr_ipe_item ui-sortable musthave" style=" margin-bottom:0px;">
<label for="text311379" class="itemname"></label> <input id="text311379" name="opt_telefonnummer" type="text" value="Hier Ihre Telefonnr..." style="width:150px;">
</div><div id="311371" rel="button" class="cr_ipe_item ui-sortable" style="text-align:center; margin-bottom:0px;">
<button type="submit"><img src="http://www.html.de/images/jetztsenden.jpg"></button>

</div>
</div>
</center>

 

[Tronjer]

tl;dr :mrgreen:

Es gibt zwei Möglichkeiten. Entweder formatiert man Formularfelder mittels einer Tabelle, oder, sauberer, über float im CSS.

 

[jesch1973]

Danke schon mal. Gibts da irgendwie eine Beispielseite oder Anleitung wie man das mit float im CSS zentriert?

 

[Anusha]

Die Seite koennte ein guter Einstieg in die Positionierung von Elementen sein.

SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

 

[Elroy]

Hallo.

Am besten löschen und noch mal von vorne anfangen.

Du hast eine CSS, zusätzlich benutzt du inline Styles und du schreibst CSS Styles in deinen HTML Code.

Abgesehen davon das dein CSS mit Schreibfehlern übersät ist (z. B. width:3ßßpx), vergibst du mehrmals die selben IDs die in deinem CSS überhaupt nicht zu sehen sind.

Es ist mir klar das du ein Anfänger bist aber in diesem Fall ist es besser das noch einmal zu machen als Stunden damit zuzubringen deinen Code aufzuräumen und zu korregieren.

Gruss
Elroy