<p> mit float:left in form clearen

[Marc]

Hallo, ich habe ein Formular:

<form>
  <p class="label">
    Text1
  </p>
  <p>
    <input... />
  </p><br class="clear" />
  <p class="label">
    Text2
  </p>
  <p>
    <input... />
  </p>
</form>

CSS:

form p
{
  margin:0px;padding:0px;
  float:left;
  margin-bottom:4px;
}

form p.label
{

width:150px;
}

.clear
{
  clear:both;
}

Jetzt meckert der W3C-Validator aber, dass ich <br />s im form-Tag verwende. Aber wie soll ich die <p>s denn sonst clearen?

[Ashura]

Hallo Marc.

Jetzt meckert der W3C-Validator aber, dass ich <br />s im form-Tag verwende. Aber wie soll ich die <p>s denn sonst clearen?

In dem du clear im Selektor für die p-Elemente verwendest.
Niemand verbietet dir, float und clear in ein Regelset zu schreiben.

Einen schönen Samstag noch.

Gruß, Ashura

[Marc]

Das klappt leider nicht.

Das Formular ist in einem Div-Layer

und wenn ich das clear:left in das <p class="label"> aufnehme und das <br /> weglasse, lässt der FF den Div-Layer überlaufen...

[Ashura]

Hallo Marc.

Das klappt leider nicht.

Das Formular ist in einem Div-Layer

Warum hast du dies unterschlagen? Poste entweder den gesamten Quelltext (natürlich auf ein Mindestmaß zum Reproduzieren der Fehldarstellung reduziert) oder stelle einen Link zu einer Live-Demo online zur Verfügung, so dass man sich dies vor Ort anschauen kann.

Einen schönen Samstag noch.

Gruß, Ashura

[Marc]

Warum hast du dies unterschlagen? Poste entweder den gesamten Quelltext (natürlich auf ein Mindestmaß zum Reproduzieren der Fehldarstellung reduziert) oder stelle einen Link zu einer Live-Demo online zur Verfügung, so dass man sich dies vor Ort anschauen kann.

Einen schönen Samstag noch.

Gruß, Ashura

Sorry - hier komplett:

<div class="centerNormal">
<form>
  <p class="label">
    Text1
  </p>
  <p>
    <input... />
  </p><br class="clear" />
  <p class="label">
    Text2
  </p>
  <p>
    <input... />
  </p>
</form>
</div>

CSS:

form p
{
  margin:0px;padding:0px;
  float:left;
  margin-bottom:4px;
}

form p.label
{

width:150px;
}

.clear
{
  clear:both;
}

#contentCenter
{
  width:410px;
  margin:0px 12px;
  text-align:left;
  float:left;
}

#contentCenter div
{
  width:400px;
}

#contentCenter div.centerNormal
{
  padding:5px;
  border:1px solid #CCCCCC;
  margin-bottom:10px;
}

[Ashura]

Hallo Marc.

Sorry - hier komplett:

Du unterschlägst zwar noch immer etwas (wo ist das Element mit der ID „contentCenter“?), aber die Lösung ist relativ einfach.

Verpasse dem div-Element mit der Klasse „centerNormal“ einen von „visible“ abweichenden Wert für die overflow-Eigenschaft. (Der Wert „auto“ bietet sich hier wohl an.)

Das Prinzip und eine Erklärung findest du in folgendem Blogeintrag des SELFHTML Aktuell Weblogs zum Thema „Grundlagen für Spaltenlayout mit CSS“.

Einen schönen Samstag noch.

Gruß, Ashura

[Marc]

Das klappt zwar im FF, aber nicht im IE.

Mit den zwei <p>s erzeuge ich jeweils eine Zeile, bestehend aus Label und dazugehörigem input-element.

Wenn allerdings in beiden <p>s nur Zeichenketten stehen, zeigt der IE das falsch an:

Zu sehen unter

http://www.ferienapartments-deutschland.de/de/vermieter_.html

Mit 80959 und 1 einloggen und dann auf Persönlicher Bereich

[wahsaga]

hi,

Mit den zwei <p>s erzeuge ich jeweils eine Zeile, bestehend aus Label und dazugehörigem input-element.

Was _willst_ du an dieser Stelle mit den vielen unsinnigen Ps?

Nutze bitte <label>, wie dir bereits empfohlen wurde.

Und du brauchst auch nicht _beide_ Bestandteile einer "Zeile", Feldbeschreibung und Inputfeld selber, zu floaten.

gruß,
wahsaga

[Ashura]

Hallo Marc.

Das klappt zwar im FF, aber nicht im IE.

Mit den zwei <p>s erzeuge ich jeweils eine Zeile, bestehend aus Label und dazugehörigem input-element.

Und warum nutzt du nicht folgenden Aufbau?

<p>  
  <label for="textfeld">Text:</label>  
  <input type="text" id="textfeld" />  
</p>

Hier kann jedes p-Element floaten und sich selbst clearen. (Notfalls nutzt du eben erwähnte Nebeneigenschaft der overflow-Eigenschaft.)

Ein weiter vereinfachtes Beispiel gibt es hier zu sehen.

Einen schönen Samstag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Das Formular ist in einem Div-Layer
<div class="centerNormal">
<form>
⋮
</form>
</div>

Marc,
wozu dieses div, was hier nichts gruppiert?

Wende die dafür gemachten Regeln stattdessen auf das form-Element an, und das überflüssige div kommt in die Tonne.

Sorry - hier komplett:

Was heißt komplett? Nein, was Entscheidendes fehlt: der DOCTYPE.

<!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>  
    <title/>  
  </head>  
<body>  
  <form action="">  
    <p>foo</p>  
    <br/>  
    <p>bar</p>  
  </form>  
</body>

ist valides XHTML 1.0 Transitional.

Nur in der Strict-Variante darf br an der Stelle nicht vorkommen.

Live long and prosper,
Gunnar

[Ashura]

Hallo Marc.

<p class="label">
    Text1
  </p>

Was mir eben noch auffällt: warum nutzt du nicht http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=label?

Einen schönen Samstag noch.

Gruß, Ashura