✔ Formulargestaltung

Loomis · 11. Juni 2008

Im Anhang 2 Bilder. Darstellung im Firefox(3) und Internet Explorer(7).

1. Und zwar habe ich ein Problem mit dem <legend> Feld. Im FF sieht das gut aus. Im IE ist das zu breit. Ich finde den passenden "IE-Trick" nicht (wenn es denn einen gibt)

Hier das CSS:

HTML:

fieldset {
    border:1px solid #666;
    padding:10px;
    width:306px;
    }

fieldset > legend {
    display:block;
    }

legend {
    background:#666;
    color:#fff;
    font-weight:bold;
    padding:3px 6px;
    }

2. Gibt es einen Grund wieso die Schrift im IE irgendwie verschwommen wirkt? Ich finde das ist schwer zu lesen so :/

Besten Dank.

//edit: Bilder vergessen -.-

Maik · 11. Juni 2008

Hi,

versuch es doch mal mit diesem CSS-Modell, das ein fieldset-Element simuliert ;-)

Code:

<div class="fieldset">
     <h1><span>Legend</span></h1>
     <p>some dummy text</p>
</div>

Code:

div.fieldset {
position:relative;
margin:2em 0;
width:400px;
padding:0.5em 0 0 0;
border:1px solid #c5c5c5;
color:#000;
background:#fff;
font-family:arial,sans-serif;
}

div.fieldset h1 {
position:absolute;
top:-0.5em;
left:1em;
margin:0;
padding:0;
font-size:1.2em;
font-weight:normal;
}

div.fieldset h1 span {
margin:0;
padding:0 0.5em;
color:#000;
background:#fff;
}

div.fieldset p {
margin:0;
padding:1em 1em 1em 1.5em;
color:#000;
font-size:1.2em;
background:#fff;
}

mfg Maik

Loomis · 11. Juni 2008

Hm, wenn das dass einzige ist, werd ich das wohl so lassen wie es ist. Schade.
Aber wegen dem IE werde ich mein schönes HTML-Markup nicht zerstören

Maik · 11. Juni 2008

Dann bleibst du halt dabei

mfg Maik

Loomis · 12. Juni 2008

Weist du eine Lösung wie ich 3 Formularfelder schön nebeneinander bekomme (Wie im Bild oben im FF)... ich krieg noch einen Hass mit dem IE.
( Ich habs mit verschiedenen Arten von Browserweichen versucht und bin kläglich gescheitert)

Als Beispiel nehme ich mal, wie auf dem Bild zu sehen, die Geburtstag-Felder (die PHP-Tags mit Schleife lasse ich mal weg, der übersicht wegen...)

HTML:

				<label title="Optional">Geburtsdatum </label>
                    <select style="width:60px;" name="form2_gdatum_1">
                        <option value="null">Tag</option>
                    </select>
                    <select style="width:120px;" name="form2_gdatum_2">
                        <option value="null">Monat</option>
                    </select>
                    <select style="width:120px;" name="form2_gdatum_3">
                        <option value="null">Jahr</option>
                    </select>

Die breite in % anzugeben ist irgendwie nicht so schön.
Ich denke es liegt am padding in der CSS -Datei, und ich hab gerade keine Ahnung wie ich das behoben bekomme

, hier die wohl relevanten Regeln:

Code:

* {
    letter-spacing:1px;
    margin:0;
    padding:0;
    }

body {
    padding:3em;
    }
select{
    color:#000;
    font:0.9em "century gothic",verdana, arial, helvetica, sans-serif;
    margin:2px 0;
    padding:2px;
    width:308px;
    }
label {
    display:block;
    margin-top:10px;
    }
fieldset {
    border:1px solid #666;
    padding:10px;
    width:306px;
    }

fieldset > legend {
    display:block;
    }

legend {
    background:#666;
    color:#fff;
    font-weight:bold;
    padding:3px 6px;
    }

Mein letzter Versuch war, die Breite in eine Klasse zu verlegen. Und mit 2 CSS-datei diese einzubinden:

Code:

<link href="http://www.example.net/default.css" rel="stylesheet" type="text/css" />
  <!--[if IE]>
    <style type="text/css">@import url(http://www.example.net/ie.css);</style>
  <![endif]-->

Doch der IE hat alles was dann in der Klasse stand völlig ignoriert.

//edit: Achja, das ganze Formular liegt in noch keinem <div>... Da ich nur damit teste erstmal.

soyo · 12. Juni 2008

Hallo,

schonmal mit float:left probiert?

Gruß soyo

Loomis · 12. Juni 2008

Da tut sich garnichts. Ich poste mal das ganze CSS und HTML.
CSS:

Code:

* {
    letter-spacing:1px;
    margin:0;
    padding:0;
    }

body{
    padding:3em;
    }

html {
    color:#666;
    font:70%/1.2 "century gothic",verdana, arial, helvetica, sans-serif;
    }

img {
    border:0;
    }

#register_top{
    font:100% "century gothic",verdana, arial, helvetica, sans-serif;
    width:308px;
    text-align:center;
    padding:10px;
    } 

a.register_top{
    text-decoration:none;
    color:#AC1619;
    }

p.register_top {
    padding:0;
    margin:0;
    letter-spacing:5px;
    }

fieldset {
    border:1px solid #666;
    padding:10px;
    width:306px;
    }

fieldset > legend {
    display:block;
    }

legend {
    background:#666;
    color:#fff;
    font-weight:bold;
    padding:3px 6px;
    }

label {
    display:block;
    margin-top:10px;
    }

label a{
    text-decoration:none;
    color:#AC1619;
    }

label a:hover{
    text-decoration:underline;
    color:#AC1619;
    }

input {
    color:#000;
    font:0.9em "century gothic",verdana, arial, helvetica, sans-serif;
    margin:2px 0;
    padding:2px;
    width:300px;
    }

input:focus {
    background:#666;
    color:#fff;
    }

input#registrieren {
    display:block;
    margin-top:10px;
    padding:1px 3px;
    width:auto;
    }

select{
    color:#000;
    font:0.9em "century gothic",verdana, arial, helvetica, sans-serif;
    margin:2px 0;
    padding:2px;
    width:308px;
    }

select:focus {
    background:#666;
    color:#fff;
    }

.error {
    color:#AC1619;
    font-weight:bold;
    }
.nosee { display:none; }

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" xml:lang="en">

	<head>

		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title> foobar! </title>
        <link href="http://www.example.net/default.css" rel="stylesheet" type="text/css" />

	</head>

	<body>

<div id="register_top">
    <p class="register_top">
        <span style="vertical-align:middle; color: #267F00;">Schritt 1</span>
        <span style="vertical-align:middle; font-size:21px;">
            <img src="../images/icon_ok.gif" alt="Icon" title="Komplett" />
        </span>
        <!-- Noch 2 mehr davon... -->
    </p>
</div>
		<form action="example.php" method="post" accept-charset="UTF-8">
			<fieldset>

				<legend>Registrierung - Schritt 2</legend>

                <p style="margin-top:5px; font-weight:bold;">Geben Sie hier Ihre persönlichen Daten an.</p>
                <p>Pflichtfelder sind mit einem <strong>°</strong> markiert.</p>

                
				<label for="anrede" title="Pflichtfeld">Anrede °</label>
                    <select id="anrede"  name="form2_anrede">
                        <option value="null">Bitte auswählen</option>
                        <option value="1" >Herr</option>
                        <option value="2" >Frau</option>
                    </select>

				<label for="vorname" title="Pflichtfeld">Vorname °</label>
    				<input type="text" name="form2_vorname" id="vorname" value="" />

				<label title="Optional">Geburtsdatum</label>
                    <select style="width:60px;" name="form2_gdatum_1">
                        <option value="null">Tag</option>
                        <option value="1" >1.</option>
                        <!-- ... -->
                        <option value="31" >31.</option>
                    </select>
                    <select style="width:120px;" name="form2_gdatum_2">
                        <option value="null">Monat</option>
                        <option value="Januar" >Januar</option>
                        <!-- ... -->
                        <option value="Dezember" >Dezember</option>
                    </select>

                    <select style="width:120px;" name="form2_gdatum_3">
                        <option value="null">Jahr</option>
                        <option value="1940" >1940</option>
                        <!-- ... -->
                        <option value="1990" >1990</option>
                    </select>

				<label title="Pflichtfeld">Strasse / Hausnummer °</label>
    				<input type="text" style="width:228px; " name="form2_adresse_1" value="" />
    				<input type="text" style="width:60px; " name="form2_adresse_2" value="" />

				<label title="Optional">Mobil</label>
    				<input type="text" style="width:60px;" name="form2_mobil_1" value="" />
    				<input type="text" style="width:90px;" name="form2_mobil_2" value="" />
    				<input type="text" style="width:126px;" name="form2_mobil_3" value="" />
                <p style="font-size:0.8em;">Ländervorwahl/Providervorwahl/Mobilnummer</p>

                <input type="hidden" name="send" value="1" />
                <input type="hidden" name="step" value="2" />
                <input type="hidden" name="date" value="1213276936" />

                <p class="nosee">
                <label for="email">Diese Feld bitte LEER lassen. Es dient dem Spamschutz.</label>
                    <input id="email" name="email" size="60" value="" />
                </p>

				<input type="submit" value="weiter" id="registrieren" />

			</fieldset>
		</form>

	</body>

</html>

Loomis · 12. Juni 2008

Vorläufige Lösung:

Code:

fieldset {
    border:1px solid #666;
    padding:10px;
    width:306px;
    }

Zwei Pixel breiter machen...

Maik · 12. Juni 2008

Hi,

Loomes hat gesagt.:
Weist du eine Lösung wie ich 3 Formularfelder schön nebeneinander bekomme

beispielsweise mit einem horizontal ausgerichteten Listenelement, in dessen drei Listenpunkte die jeweiligen Formularfelder eingebettet werden.

mfg Maik

Loomis · 13. Juni 2008

Noch ein kleines Problemchen. Schon wieder ^^
Und zwar geht es um einen Tooltip, der mit CSS gestaltet wird (Code unten).
Zuerst mal im FF, perfekt:

Im IE, wird erstmal der Zeilenumbruch nicht angezeigt. Und das Fragezeichen, das nach Kennwort ( Wiederholung) steht, scheint irgendwie durch den Tooltip durch (Roter Kreis).

Hier der Code.
CSS:

Code:

/** TOOLTIP */
a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
  position: relative;
  text-decoration: none; 
  font-style: italic;
  color: #0000ff; 
  }
  
a.tooltip:hover {
  color: #0000ff; 
  background: transparent;
  }

a.tooltip span {
  display: none;  
  text-decoration: none; 
}

a.tooltip:hover span {
  padding:5px;
  display: block;
  position: absolute; 
  top: 20px; 
  left: 0; 
  width: 200px;
  z-index: 100;
  color: #666; 
  border:1px solid #666; 
  background: #c0c0c0;
  font: 94% "Century Gothic", Verdana, Arial; 
  text-align:left;
  }
  
a.tooltip span h1 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weigth: bold;
  color: yellow;
  background-color: gray;
  border: 0px;
  border-bottom: 1px solid black;
  }

HTML:

<label for="benutzername">Benutzername °<a href="#" class="tooltip">(?)
<span>Denken Sie sich einen Benutzernamen aus, mit dem Sie sich später in das Presseportal einloggen können.<br /><br />Der Benutzername darf maximal 20 Zeichen lang sein.</span></a>
</label>

Den Code hab ich btw. von http://www.webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de.

//edit: Opera, Safari, Netscape und Mozilla zeigen das auch absolut korrekt an.

✔ Formulargestaltung

Loomis

Mitglied Bunt

Anhänge

Maik

Loomis

Mitglied Bunt

Maik

Loomis

Mitglied Bunt

soyo

Erfahrenes Mitglied

Loomis

Mitglied Bunt

Loomis

Mitglied Bunt

Anhänge

Maik

Loomis

Mitglied Bunt

Neue Beiträge