Antworten zum Thema „Zwei form-Buttons in einer Zeile“

[dn3d_fanboy]

Hallo,
gibt es eine Möglichkeit, zwei form-Buttons in einer Zeile darzustellen oder muß ich tatsächlich zwei DIVs nebeneinander anordnen? Das wäre mir eigentlich wieder zu verschachtelt.

Derzeit wird das Ganze leider mit einem Zeilenumbruch dargestellt.

Also, falls es eine Lösung mit CSS/HTML gibt, wäre es schön, wenn mir sie jemand verraten könnte.

Ich danke schonmal im Vorraus.

 

[PhSn]

AW: Zwei form-Buttons in einer Zeile

Wenn du beiden Form-Buttons die CSS-Eigenschaft "float: left;" gibst, fließen sie nebeneinander. Oder du machst aus ihnen über "display: inline-block" Block-Elemente ohne automatischen Zeilenumbruch danach. Dann dürften sie sich auch nebeneinander anordnen

 

[dn3d_fanboy]

AW: Zwei form-Buttons in einer Zeile

Wenn du beiden Form-Buttons die CSS-Eigenschaft "float: left;" gibst, fließen sie nebeneinander. Oder du machst aus ihnen über "display: inline-block" Block-Elemente ohne automatischen Zeilenumbruch danach. Dann dürften sie sich auch nebeneinander anordnen

Danke PhSn,

aber bei mir funktioniert beides nicht.

Hier mal der CSS-Code:

.newsletter-anmelden    {background-image: url(../images/newsletter_anmelden.png);
                        height: 31px;
                        width: 108px;
                        border: none;
                        margin-top: 20px;
                        margin-left: 20px;
                        text-indent: -9999px;
                        background-color: #000;
                        float: left;
                        cursor: pointer;
                        }
                        
.newsletter-abmelden    {background-image: url(../images/newsletter_abmelden.png);
                        height: 31px;
                        width: 108px;
                        border: none;
                        margin-left: 20px;
                        text-indent: -9999px;
                        background-color: #000;
                        float: left;
                        cursor: pointer;
                        }

Und der HTML Code:

<form method="post" action="member/newsletter.php">      
         
         <p class="p2"><b>Name:</b> <span id="newsletter-name"><input class="newsletter-input" type="text" name="name" value="" /></span></p>
         <p class="p2"><b>Email:</b> <span id="newsletter-email"><input class="newsletter-input" type="text" name="email" value="" /></span></p>
         
         <input class="newsletter-anmelden" type="submit" name="anmelden" value="submit" /> 
         <input class="newsletter-abmelden" type="submit" name="abmelden" value="submit" />
         <br id="cleft" />
         
         </form>

 

[mwxx]

AW: Zwei form-Buttons in einer Zeile

Gib doch mal der Klasse p2 und zumindest dem <form>-Tag ebenfalls ein "float: left" ... oft ist es so, dass für ein korrektes Floating zumindest auch der Parent gefloatet werden muss

 

[sasquotschi]

AW: Zwei form-Buttons in einer Zeile

mach um die p2 und die beiden inputs ein zusätzliches div und gib dem dann das float left. sollte das problem lösen

<form method="post" action="member/newsletter.php">      
         
<div style="float: left;"
         <p class="p2"><b>Name:</b> <span id="newsletter-name"><input class="newsletter-input" type="text" name="name" value="" /></span></p>
         <p class="p2"><b>Email:</b> <span id="newsletter-email"><input class="newsletter-input" type="text" name="email" value="" /></span></p>
         
         <input class="newsletter-anmelden" type="submit" name="anmelden" value="submit" /> 
         <input class="newsletter-abmelden" type="submit" name="abmelden" value="submit" />
         <br id="cleft" />
         </div>
         </form>

 

[Myhar]

AW: Zwei form-Buttons in einer Zeile

Es sollte reichen, dem form Tag ein Float left zu geben. Ein zusätzliches div sollte hier nicht nötig sein (und wollte der TS ja auch nicht verwenden)
Ich habe hier keine fertige Lösung anzubieten, aber möglich ist es allemal. Experimentiere mit Firebug, welche Elemente floaten müssen, damit dein gewünschtes Ergebnis erreicht wird. Ich denke, das schaffst du

 

[mindraper]

AW: Zwei form-Buttons in einer Zeile

hi

gibt es irgendwie die möglichkeit, deinen gesamten code zu sehen? <input>-elemente sind eig. von natur aus inline-elemente, die sollten sich also ohne dein zutun nebeneinander anordnen. das bringt mich zu dem schluss, dass da etwas anderes im busch ist. möglicherweise (ACHTUNG: SCHUSS INS BLAUE!!) hast du in einer der css-dateien folgendes geschrieben:

input {
display: block;
}

falls dem so ist, dann greifen deine klassendefinitionen nicht, da sie als selektor unspezifischer sind als "input". versuche doch mal, ob es funktioniert, wenn du ein "input" vor deine klassenselektoren setzt:

input.newsletter-anmelden {
/* DEFINITIONS */
}

falls es dann funktioniert, ist die warscheinlichkeit dass meine vermutung richtig ist ziemlich hoch.

gruß

 

[pascal.k]

AW: Zwei form-Buttons in einer Zeile

So würde es gehen:

<!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>Testdoc</title>
<style type="text/css">
input[type=submit] {
	display:inline-block;
	width:108px; height:31px;
	margin:20px 10px 30px 0;
	border:0;
	text-indent:-99999px;
	background:#000;
	cursor:pointer;
}
.newsletter-anmelden { background-image: url(../images/newsletter_anmelden.png); }
.newsletter-abmelden { background-image: url(../images/newsletter_abmelden.png); }
</style>
</head>
<body>
<form method="post" action="member/newsletter.php">      
<label for="name">Name:</label><input type="text" name="name" id="name" value="" /><br />
<label for="email">E-Mail:</label><input type="text" name="name" id="email" value="" /><br />
<input class="newsletter-anmelden" type="submit" name="anmelden" value="submit" /> 
<input class="newsletter-abmelden" type="submit" name="abmelden" value="submit" />
</form>
</body>
</html>

 

[Myhar]

AW: Zwei form-Buttons in einer Zeile

falls dem so ist, dann greifen deine klassendefinitionen nicht, da sie als selektor unspezifischer sind als "input". versuche doch mal, ob es funktioniert, wenn du ein "input" vor deine klassenselektoren setzt:

Das ist deshalb ein Schuss ins Blaue, da du hier Unsinn redest.
Folgender Code:

<div>
    <input type="text" />
     <input type="text" />
</div>    

 <div>
    <input class="inline" type="text" />
     <input class="inline" type="text" />
</div>     


input{display:block;margin:5px}
.inline{display:inline}
div{clear:both;margin:10px 0;padding:10px 0;border:1px solid #DADADA}

Die .inline Deklaration überschreibt wie erwartet die input Deklaration. Ein Klassenselektor wiegt also mehr als ein Typselektor.

Lösungen für sein anfängliches Problem hat der TS jetzt hoffentlich genug.

 

[mindraper]

AW: Zwei form-Buttons in einer Zeile

hi

@myhar: ok, erwischt. dass input-elemente gefloatet werden müssen um sie in eine reihe zu bekommen ist allerdings genauso unsinn, weil sie eigentlich von natur aus inline-elemente sind. diese erst auf display:block; zu setzen und sie danach wieder zu floaten ist eigentlich von hinten durch die brust ins auge.