✔ <input> verschoben, warum?

[Igäl]

Tag Leute

Ich hab mich jetzt mal für ein Projekt von den Tabellen abgewandt und versuche mich im Layout mit CSS. Soweit steht das Grundlayout.

Jetzt möcht ich aber eine Seite mit einer simplen Loginmaske machen (Nickname, Passwort, wie mans kennt). Folgendes CSS mit dazugehörigem Code im HTML:

#logintable
{
	margin: 50px auto;
	width: 300px;
}
#logintable h1
{
	margin: 0;
	padding: 2px;
	font-size: 100%;
	background-color: #CD5B45;
}
#logintable h2
{
	margin: 0;
	padding: 2px;
	width: 296px;
	height: 30px;
	font-size: 85%;
	font-weight: normal;
	background-color: #EED5B7;
}
#logintable input	{ float: right; }

<div id="logintable">
	<h1>Zum internen Bereich</h1>
	<h2>Nickname <input type="text"></h2>
	<h2>Passwort <input type="password"></h2>
</div>

Klappt wunderbar, bis auf ein Ding: Die Input-Felder werden nicht auf der selben Zeile wie Nickname, respektive Passwort angezeigt. Hat jemand eine Idee, wie ich das erzwingen könnte? Allgemein habe ich so meine Probleme, wann jetzt Inhalt auf der selben bzw. nächsten Zeile angezeigt wird. Ich hoffe es sieht grad jemand meinen sicherlich blöden Fehler.

Danke und Gruss Igäl

 

[Maik]

Hi,

das zu umfliessende Element, also das mit der float-Eigenschaft formatierte, wird im Markup zuerst genannt.

mfg Maik

 

[Igäl]

Hab im HTML-File jetzt Textboxen und Bezeichnung umgedreht wie du geraten hast. Jetzt gehts.

<div id="logintable">
	<h1>Zum internen Bereich</h1>
	<h2><input type="text">Nickname</h2>
	<h2><input type="password">Passwort</h2>
</div>

Ist aber irgendwie unlogisch und macht die ganze Sache unleserlicher. Gibts da etwas, wie man das verhindern könnte? Will heissen: wie ich die Boxen da rechts hinkriege und das die Reihenfolge im Markup noch immer stimmt?

 

[Maik]

<div id="logintable">
        <h1>Zum internen Bereich</h1>
        <h2><span>Nickname</span> <input type="text"></h2>
        <h2><span>Passwort</span> <input type="password"></h2>
</div>

#logintable span { float:left; }

mfg Maik

 

[Igäl]

Man lernt und macht und tut Danke dir Maik

Edit: Es ist grad eine weitere Frage aufgetaucht. Wenn ich jetzt bei den Elementen Rahmen hinzufüge, gibts an den Schnittstellen Doppelrahmen. Gibts hier eine Möglichkeit, die wie border-collapse bei tables wirkt?

 

[Maik]

Moin,

da wirst du einen der beiden "benachbarten" Rahmen auf null setzen müssen, oder du definierst einen geringen Außenabstand zwischen den beiden Elementen, um die "Schnittstellen" zu vermeiden.

mfg Maik

 

[Igäl]

Da werde ich wohl die Border der Elemente einzeln formatieren oder für Aussen-/Innenelemente eigene Klassen formulieren. Danke für die prompte Antwort.