[FRAGE] 3 fieldsets nebeneinander

Nisbo · 31. Okt. 2015

Servus,

ich habe 3 Fieldsets welche ich nebeneinander anordnen möchte, die ersten beiden beinhalten noch Buttons von einem Formular welches nach dem 2. Fieldset geschlossen wird und ein ganzes Ende vor dem ersten Fieldset beginnt (nur der Form halber erwähnt), das Rechte Fieldset beinhaltet ein eigenes komplettes Formular. (aus dem PHP Code kopiert, deswegen auch die \") und ja ich weiß <font color= ^^

PHP:

<fieldset style=\"display: inline-block; min-height:100px;float:left;\">
	<legend><font color=\"darkgreen\">Export current Channel List to CSV file:</font></legend>
	<input type=\"button\" value=\"Export Channel List\" onclick=\"sendForm()\" />
</fieldset>


<fieldset style=\"display: inline-block; min-height:100px;\">
	<legend><font color=\"darkblue\">Append CSV file to <u>current</u> Channel List:</font></legend>
	<input type=\"hidden\" name=\"ownfile\" id=\"ownfile\" value=\"1\" />
	<input type=\"file\" name=\"csv\" value=\"\" />
	<input type=\"button\" name=\"TestButton\"  value=\"Upload\" onclick=\"changeFrame()\" />
</fieldset>
</form>

<fieldset style=\"display: inline-block; min-height:100px;\">
	<legend><font color=\"darkred\">Import a CSV file into a <u>NEW</u> ChannelList:</font></legend>
	<form name=\"formular3\" action=\"repeater-liste.php\" method=\"post\" enctype=\"multipart/form-data\">
		<input type=\"hidden\" name=\"cntrylistgenerate\" value=\"1\" />
		<input type=\"hidden\" name=\"cntrylist[]\" value=\"MANUAL\" />
		<input type=\"hidden\" name=\"ownfile\" id=\"ownfile\" value=\"1\" />
		<input type=\"file\" name=\"csv\" value=\"\" />
		<input type=\"submit\" value=\"Upload\" />
	</form>
</fieldset>

des weiteren noch im HEAD

HTML:

fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 24px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}

wenn ich jetzt im mittleren Fieldset bei Style auch ein "float:left;" einfüge dann schaut es aus wie im Screenshot, also es ist eine Art Stufe zu sehen, lasse ich es weg wie im Code oben dann ist das 3. Fieldset unten drunter.

Hat jemand eine Idee wie ich es hin bekomme das alle 3 Fieldsets nebeneinander sind ?

EDIT: habs selbst gefunden <div class=\"clearfix\"></div> drum rum um die Elemente vorher welche ein float bekommen haben

kkapsner · 02. Nov. 2015

Eigentlich ist float für solche Sachen nicht nicht ideal. Ich würde bei so etwas display: inline-block; verwenden, wie du es ja auch zuerst gemacht hast. Das Problem dabei ist dann, dass die Zeilenumbrüche und Leerzeichen zwischen den <fieldset>s dabei nicht ignoriert werden. Deswegen fügt sich da in der Darstellung ein Leerzeichen dazwischen ein und am Ende ist nicht mehr genug Platz für das letzte <fieldset>. Um das zu umgehen kannst du entweder die Leerzeichen entfernen (was aber leider die Codeformatierung zerstört) oder du setzt word-spacing auf einen so negativen Wert, dass das Leerzeichen verschwindet:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
body {
	word-spacing: -1em;
}
body * {
	word-spacing: initial;
}
div {
	display: inline-block;
	padding: 5px;
	width: 33.33%;
	box-sizing: border-box;
}
fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
    display: block;
    min-height: 100px;
    margin: 5px 0;
}

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 24px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}</style>
</head>
<body>
<div>
	<fieldset>
		<legend>lkdjlskjdlskdj</legend>
		lksjdlskjlsjdlskdj
	</fieldset>
</div>
<div>
	<fieldset>
		<legend>lkdjlskjdlskdj</legend>
		lksjdlskjlsjdlskdj
	</fieldset>
</div>
<div>
	<fieldset>
		<legend>lkdjlskjdlskdj</legend>
		lksjdlskjlsjdlskdj
	</fieldset>
</div>
</body>
</html>

[FRAGE] 3 fieldsets nebeneinander

Nisbo

New member

Anhänge

kkapsner

Super Moderator