2 Buttons nebeneinander anordnen

[kleinman]

Hallo,

ich möchte zwei Buttons nebeneinander anordnen. Das Ergebnis, welches ich bekomme ist so, dass der eine Button rechts ausgerichtet ist und der zweite Button eine Zeile tiefer links angeordnet ist. Der Fehler liegt meiner Meinung in der CSSS Datei. Ich sehe gerade den Wald vor lauter Bäumen nicht.

Was habe ich falsch gemacht?

Hier der Code aus meiner xhtml Datei

<!-- Begin Kontaktformular -->
<form action="#" method="post">
<fieldset>
<div class="legend"><h6><em>Bitte hinterlassen Sie Ihre Nachricht</em></h6></div>
<div class="form_row">
<div class="form_property form_required">Name <span class="pflichtfeld">*</span></div>
<div class="form_value"><input type="text" size="60" name="name" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Vorname <span class="pflichtfeld">*</span></div>
<div class="form_value"><input type="text" size="60" name="vorname" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Email <span class="pflichtfeld">*</span></div>
<div class="form_value"><input type="text" size="60" name="email" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Telefon</div>
<div class="form_value"><input type="text" size="60" name="telefon" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Mobil</div>
<div class="form_value"><input type="text" size="60" name="mobil" value="" /></div>
<div class="clearer">&nbsp;</div>
</div>

<div class="form_row">
<div class="form_property form_required">Comment <span class="pflichtfeld">*</span></div>
<div class="form_value"><textarea rows="5" cols="46" name="comment"></textarea></div>
<div class="clearer">&nbsp;</div>
</div>
---- Hier ist Button 1
<div class="form_row form_row_submit">
<div class="form_value"><input type="submit" class="button" value="Absenden" /></div>
<div class="clearer"></div>
</div>
---- Hier ist Button 2
<div class="from_row_reset">
<div class="form_value"><input type="reset" class="button" value="Löschen" /></div>
<div class="clearer"></div>
</div>
</fieldset>
</form>
<!-- Ende Kontaktformular -->

----------------------------------------------------------
Hier die CSS Datei
/*
Reset (http://meyerweb.com/eric/tools/css/reset/)
------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0;
font-size: 100%; vertical-align: baseline; background: transparent; } body {
line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content:
none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }


/*
General
------------------------------------------------------------------- */

html {
font-size: 62.5%; /* reset 1em to 10px */
height: 100%;
}

body {
background: #FFFFFF;
color: #5A5A50;
font: normal 1.3em Arial,sans-serif;
height: 100%;
padding-bottom: 1px; /* force scrollbars */
}


/*
Typography
------------------------------------------------------------------- */

p {
line-height: 1.4em;
padding: 0.2em 0 1.2em;
}

h1 {font: normal 3em Times New Roman,Times,monospace;}
h2 {font: normal 2.2em Arial,sans-serif;}
h3 {font: normal 2em Arial,sans-serif;}
h4 {font: normal 1.6em Arial,sans-serif; color:#000080;}
h5 {font: normal 1.6em Arial,sans-serif;}
h6 {font: normal 1.2em Arial,sans-serif; color:#000080;}
h1,h2,h3,h4,h5,h6 {margin-bottom: 0.2em;}

blockquote {
background: #FFFFFF no-repeat 0 -414px;
border-bottom: 1px solid #E0E0D4;
border-top: 1px solid #E0E0D4;
color: #332;
display: block;
margin: 0.6em 0 1.6em;
padding: 0.8em 1em 0.2em 46px;
}

/*
Tables
------------------------------------------------------------------- */

table.data_table {
border: 1px solid #CCB;
margin-bottom: 2em;
width: 100%;
}
table.data_table th {
background: #FFFFFF;
border: 1px solid #CCB;
color: #555;
text-align: left;
}
table.data_table tr {border-bottom: 1px solid #DDD;}
table.data_table td, table th {padding: 10px;}
table.data_table td {
background: #FFFFFF;
border: 1px solid #DDC;
}


/*
Lists
------------------------------------------------------------------- */

dl {margin-bottom: 2em;}
dt,dd {padding: 8px 10px;}
dt {
background: #FFFFFF;
border-bottom: 1px solid #CCB;
color: #555;
font-weight: bold;
}
dd {
background: #FFFFFF;
border-bottom: 1px solid #DDC;
padding-left: 16px;
}


/*
Links
------------------------------------------------------------------- */

a {color: #543;}
a:hover {
color: #C40;
text-decoration: underline;
}


/*
Forms
------------------------------------------------------------------- */

fieldset {
border-left: 0px solid #CCB;
border-right: 0px solid #CCB;
margin: 1em 0 1.1em;
}

input, textarea, select {
background-color: #FFF;
border-color: #777 #CCC #CCC #777;
border-style: solid;
border-width: 1px;
font: normal 1.0em Helvetica,sans-serif;
padding: 5px;
position: relative;
top: -1.1em;
}

input.button {
background: #E9E8E8 repeat-x 0 -366px;
border: 2px solid #888;
border-color: #BBB #888 #888 #CCC;
color: #444;
cursor: pointer;
font: normal 1.1em Helvetica,sans-serif;
margin-top: 6px;
padding: 6px;
width: 110px;
}
input:focus,input:active,textarea:focus,textarea:active,select:focus,select:active,input.button:hover,input.button:focus {background: #FFFFF5;}
input.button:hover, input.button:focus {
color: #123;
cursor: pointer;
}

textarea {overflow: auto;}

input.image {
border: 0;
padding: 0;
}

/* Specific */

.form_row {
background: #FFFFFF;
border-bottom: 0px solid #E1E1D5;
padding: 0px 0;

}
.form_required {
font-weight: normal;}
.form_row_submit, .legend {
background: #FFFFFF;
border-bottom: 0px solid #CCB;
border-top: 0px solid #CCB;
padding: 1px 0 8px;
}
.legend {padding: 8px 18px 20px;}
.form_property, .form_value {float: left;}
.form_property {
font-size: 1.0em;
text-align: left;
width: 60px;
}
.form_value {padding-left: 24px;}
.form_row_submit .form_value {padding-left: 360px;}

/*
Images
------------------------------------------------------------------- */

img.bordered {
background-color: #FFF;
border: 1px solid #DDD;
padding: 3px;
}

img.left {margin: 0 15px 12px 0;}
img.right {margin: 0 0 15px 12px;}


/*
Floats
------------------------------------------------------------------- */

.left {float: left;}
.right {float: right;}

.clear,.clearer {clear: both;}
.clearer {
display: block;
font-size: 0;
line-height: 0;
}


/*
Misc
------------------------------------------------------------------- */

/* Separators */
.content_separator, .archive_separator {
background: #D6D6C6;
clear: both;
color: #FFE;
display: block;
font-size: 0;
height: 1px;
line-height: 0;
margin: 12px 0 24px;
}
.archive_separator {margin: 0 0 12px;}

/* Messages */
.error, .notice, .success {
border: 1px solid #DDD;
margin-bottom: 1em;
padding: 0.6em 0.8em;
}

.error {background: #FBE3E4; color: #8A1F11; border-color: #FBC2C4;}
.error a {color: #8A1F11;}

.notice {background: #FFF6BF; color: #514721; border-color: #FFD324;}
.notice a {color: #514721;}

.success {background: #E6EFC2; color: #264409; border-color: #C6D880;}
.success a {color: #264409;}


/*
Layout
------------------------------------------------------------------- */

/* General */
.center_wrapper {
margin: 0 auto;
width: 855px;
}

#header {
background: #FFFFFF repeat-x 0 0;
padding-top: 8px;
}


/* Toplinks */
#toplinks {
background: #FFFFFF no-repeat left top;
color: #554;
float: right;
font-size: 1.1em;
height: 27px;
width: 230px;
}
#toplinks_inner {
padding-top: 3px;
text-align: center;
}
#toplinks a {color: #887;}
#toplinks a:hover {color: #DDC;}

/* Site title */
#site_title {
color: #994;
padding: 0 0 16px;
}
#site_title a {
color: #000080;
text-decoration: none;
}
#site_title a:hover {color: #EF9C00;}
#site_title h1 span {color: #CCB;}


/* Navigation */
#navigation ul, #navigation li {display: inline;}
#navigation li {display: inline;}
#navigation, #navigation a {background: #000080 repeat-x 0 -222px;}
#navigation a {
border-right: 1px solid #AFA69C;
color: #FFFFFF;
float: left;
font: normal 1.2em Verdana;
margin-right: 1px;
padding: 10px 12px;
text-align: center;
text-decoration: none;
}
#navigation li:first-child a {border-left: 1px solid #AFA69C;}
#navigation a:hover,#navigation li.current_page_item a {
background-position: 0 -294px;
color: #FFD700;
}


/* Main */
#main_wrapper_outer {background: #FFFFFF;}
#main_wrapper_inner {
background: #FFFFFF repeat-x left top;
line-height: 1.4em;
padding: 24px 0;
}
#main {
font: normal 1.1em Helvetica,sans-serif;
width: 540px;
text-align: justify;
}

#main ol, #main ul {margin: 0 0 1.2em 1.6em;}
#main ul li {list-style: square;}
#main ol li {list-style: decimal;}
#main ul li {color:#000080;}
#main li {padding: 2px 0;}


/* Sidebar */
#sidebar {
color: #000000;
width: 286px;
border-left: 1px solid #CCB;
text-align: left;
}
#sidebar_content {padding-left: 25px;}
#sidebar a {color: #000080;}
#sidebar a:hover {color: #C40;}


/* Dashboard */
#dashboard {
background: #DDD;
border-top: 1px dashed #C0C0B0;
}
#dashboard_content {padding: 16px 0 22px;}

#dashboard .col3 {width: 255px;}
#dashboard .col3mid {width: 337px;}
#dashboard .col3mid .col3_content {
border-left: 1px solid #CCB;
border-right: 1px solid #CCB;
padding: 0 20px;
margin: 0 20px;
}

#dashboard li {
color: #887;
padding: 5px 0;
}
#dashboard li {border-top: 1px dashed #C6C6B6;}
#dashboard li a {
color: #606050;
text-decoration: none;
}
#dashboard li a:hover {
color: #332;
text-decoration: underline;
}


/* Footer links */
#footer {
color: #AA9;
padding: 12px 0;
}
#footer a {color: #BBA;}
#footer .right, #footer .right a {
color: #777;
text-decoration: none;
}
#footer a:hover {color: #CCB;}


/*
Posts
------------------------------------------------------------------- */

.post {margin-bottom: 24px;}

.post_title a,.post_date a {text-decoration: none;}
.post_date a:hover,.post_meta a:hover {text-decoration: underline;}

.post_date {
color: #777;
margin-bottom: 14px;
}
.post_date a {color: #444;}

.post_meta {
background: #FFFFFF;
border: 0px solid #E5E5D5;
color: #776;
font-size: 0.9em;
padding: 8px 10px;
}
.post_meta a {color: #665;}
.post_meta a:hover {color: #001;}

/* Archives */
.archive_pagination {margin-bottom: 1.6em;}
.archive_post {margin-bottom: 1em;}
.archive_post_date {
background: #FFFFFF;
border-bottom: 1px solid #C5C5B5;
border-right: 1px solid #CFCFBF;
float: left;
margin-right: 12px;
padding: 3px 0 5px;
text-align: center;
width: 44px;
}
.archive_post_day {font: normal 1.8em Arial,serif;}


/*
Thumbnails
------------------------------------------------------------------- */

.thumbnails {margin: 0 -0 2em -8px;}
.thumbnails a.thumb {
background: #FFFFFF;
display: block;
float: left;
margin: 0 0 8px 8px;
padding: 3px;
}
.thumbnails a.thumb:hover {background: #C6C6BA;}
.thumbnails .thumb img {display: block;}


/*
Box
------------------------------------------------------------------- */

.box {margin-bottom: 1.5em;}
.box_title {
background: #C0COCO;
color: #000080;
font: normal 2.0em Times New Roman,Times,monospace;
padding: 5px 8px;
}
.box_content {padding: 8px 0 8px;}
.box li {
border-top: 0px solid #DDC;
padding: 4px 6px;
}
.box li:first-child {border-top: none;}


/*
Comments
------------------------------------------------------------------- */

div.comment_list {
border-top: 1px solid #D6D6C6;
margin: 1em 0 2em;
}

.comment {
border-bottom: 1px solid #D6D6C6;
padding-top: 10px;
}
.comment_date {
font-size: 0.9em;
padding-top: 4px;
}
.comment_date a {
color: #665;
text-decoration: none;
}
.comment_date a:hover {
color: #001;
text-decoration: underline;
}
.comment_body {padding-top: 4px;}

.comment_gravatar {width: 48px;}
.comment_gravatar img {
background: #FFF;
border: 1px solid #DDD;
padding: 2px;
}
.comment_author {padding-top: 3px;}


/*
IE float/background fixes
------------------------------------------------------------------- */

.legend, blockquote, #sidebar {min-height: 0.01%;}

[Juewel]

Der Button 1 ist mit dem untersten div clearer zurückgesetzt "clear:both;".

Mit

Code: Alles auswählen

<div class="form_row form_row_submit">

zwei Klassen auf einmal ist mir jetzt ganz neu.

Etwas Übersichtlicher wirds auch wenn dein Beitrag in

Code: Alles auswählen

code

geklammert ist.

[kleinman]

Hallo,

vielen Damk für die beiden Hinweise. Ich habe die beiden Fehler behoben.
Das gewünschte Ergenbis habe ich dennoch nicht erreicht.

Gruß Joerg

Nun sieht der Code so aus:

Code: Alles auswählen

<div class="form_row_submit">
                              <div class="form_value"><input type="submit" class="button" value="Absenden" /></div>
                              <div class="clear: both"></div>
                           </div>
                           
                           <div class="from_row_reset">
                              <div class="form_value"><input type="reset" class="button" value="Löschen" /></div>
                              <div class="clear: both"></div>
                           </div>

[Juewel]

Ich meinte im HTML steht

Code: Alles auswählen

<div class="clearer"></div>

und die Klasse "clearer" ist im CSS mit

Code: Alles auswählen

clear:both;

zurückgestzt. Also kein umfluss (float).

Code: Alles auswählen

<div class="clear: both"></div>

kann nicht Funktionieren.

Am besten ließt du dich mal ein wenig in CSS ein.
http://www.css-info.de/css-kurs/

[kleinman]

Hallo,

in meiner CSS-Datei habe ich folgenden Eintrag:

Ich denke, das ist es, was Du gemeint hast. Den Eintrag hatte ich schon
Das Ergebnis ist aber unverändert.

Grüße Jörg

Code: Alles auswählen

Floats
------------------------------------------------------------------- */

.left {float: left;}
.right {float: right;}

.clear,.clearer {clear: both;}
.clearer {
   display: block;
   font-size: 0;
   line-height: 0;   
}

[Juewel]

Lösung
Im Css fehlten Komma und float

Code: Alles auswählen

.form_row_submit .form_value {padding-left: 360px;}

Neu

Code: Alles auswählen

.form_row_submit, .form_value {padding-left:60px; float:left;}

HTML

Code: Alles auswählen

<!-- Hier ist Button 1 -->
<div class="form_row_submit">
<div class="form_value"><input type="submit" class="button" value="Absenden" /></div>
</div>
<!-- Hier ist Button 2 -->
<div class="from_row_reset">
<div class="form_value"><input type="reset" class="button" value="Löschen" /></div>
</div>
</fieldset>
</form>

Jetzt müsste das nach was aussehen...