✔ formatiertes Input verhindert Zentrierung

Sprint

Sprint

Erfahrenes Mitglied
Hallo,

um den Formularen ein einheitliches Aussehen zu geben, habe ich sie mit CSS formatiert.
In dem Formular sind auch einige Radio-Buttons enthalten, die zentriert unter ihren Bildern stehen sollen. Sie werden aber im Safari linksbündig und im FF rechtsbündig ausgerichtet. Nur wenn ich die Breite des Input Feldes rausnehme, werden die Buttons in ihren Boxen zentriert.

CSS: 
form input { width: 250px; margin-top: 1em; padding:0 2px; margin-bottom:1em; border: solid 1px gray; }
#daecher { width: 780px; height: auto; }
.dachform { text-align: center; width: 130px; height: auto; float: left; }
.pflicht { border: solid 1px #4ae607; }
HTML: 
<div id="daecher" class="pflicht">
	<div class="dachform">
		<img src="images/_dach1.gif" alt="" height="119" width="124" border="0"><br>
		<input type="radio" name="dachform" value="1"  tabindex="14">
	</div>
	<div class="dachform">
		<img src="images/_dach2.gif" alt="" height="119" width="122" border="0"><br>
		<input type="radio" name="dachform" value="2"  tabindex="15">
	</div>
	<div class="dachform">
		<img src="images/_dach3.gif" alt="" height="119" width="120" border="0"><br>
		<input type="radio" name="dachform" value="3"  tabindex="16">
	</div>
</div>

Wie bekomme ich beides unter einen Hut? Es geht zwar, wenn ich jedem Input-Feld ein ' style="width: 250px;" ' zuweise, aber das kann ja nicht der Sinn sein, oder?
 
Hi,

mit diesem Code werden die Radio-Buttons bei mir browserübergreifend unter den Bildern zentriert ausgerichtet :confused:

Dann schreibst du einmal:
Nur wenn ich die Breite des Input Feldes rausnehme, werden die Buttons in ihren Boxen zentriert.
Zum Vergrößern anklicken....
und dann wieder:
Es geht zwar, wenn ich jedem Input-Feld ein ' style="width: 250px;" ' zuweise,
Zum Vergrößern anklicken....

Und was gilt nun?

mfg Maik
 
Hi Maik,

bei dem Ausschnitt fehlte das umgebende form. Hier mal de komplette Quelltext, der bei mir nicht zentriert.

Es gilt beides. Wenn die Breite als CSS Anweisung bei "form input" eingetragen ist, werden die Button nicht zentriert. Wenn ich es aus der CSS Anweisung rausnehme und bei den Input Feldern mit style eintrage, dann wird zentriert.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<style type="text/css" media="screen"><!--
form { width:auto; height: auto; padding:5px; margin:0 auto; }
form input { width: 250px; margin-top: 1em; padding:0 2px; margin-bottom:1em; border: solid 1px gray; }
#daecher { width: 780px; height: auto; }
.dachform { text-align: center; width: 130px; height: auto; float: left; border: solid 1px black; }
--></style>
	</head>
	<body>
		<div id="contbox">
			<form action="anfrage.php" method="post" name="kundendaten">
				<fieldset id="personal">
					<legend>Onlinerechnung Schritt 2</legend>
					<div id="daecher" class="pflicht">
						<div class="dachform">
							<img src="images/_dach1.gif" alt="" height="119" width="124" border="0" /><br />
							<input type="radio" name="dachform" value="1" tabindex="14" /></div>
						<div class="dachform">
							<img src="images/_dach2.gif" alt="" height="119" width="122" border="0" /><br />
							<input type="radio" name="dachform" value="2" tabindex="15" /></div>
						<div class="dachform">
							<img src="images/_dach3.gif" alt="" height="119" width="120" border="0" /><br />
							<input type="radio" name="dachform" value="3" tabindex="16" /></div>
						<div class="clear"></div>
					</div>
				</fieldset>
			</form>
		</div>
	</body>
</html>
 
Also bei mir werden entgegen deiner Aussage die Radio-Buttons in allen Browsern rechtsbündig angeordnet, auch im Safari (Win).

Wenn ich die diskrepante Breitenangabe des <input type="radio"> der Breite des umschliessenden <div class="dachform"> angleiche, oder sie gänzlich entferne, werden die Radio-Buttons unter dem Grafikelement auch horizontal zentriert.

mfg Maik
 
Der Mac Safari macht es linksbündig, was aber ja auch egal ist.

Wo aber siehst du bei den <input type="radio"> eine Breitenangabe?
 
Na hier :-)

CSS: 
form input { width: 250px; margin-top: 1em; padding:0 2px; margin-bottom:1em; border: solid 1px gray; }

mfg Maik
 
Genau darum geht es ja. Diese Breitenangabe wird gebraucht, um input="text" Felder zu formatieren. Das Beispiel war nur auf das Maßgebliche gekürzt.
Das hatte ich am Anfang ja auch geschrieben, daß es richtig dargestellt wird wenn ich das rausnehme und bei den Feldern direkt mit style eintrage. Ich wollte nur diese Direktzuweisungen verhindern. Da auf der eigentlichen Seite mehrere Formulare existieren, sind das recht viele Wiederholungen.
 
Dann nutze hierfür den Attribut-Selektor ;)

CSS: 
form input[type=text] { width: 250px; margin-top: 1em; padding:0 2px; margin-bottom:1em; border: solid 1px gray; }

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück