Problem mit CSS / DIV und Formular

[AmicaNoctis]

So .. dat Label-Element hüpft .. nur .. wie krieg ich das Eingabe-Teil exakt ab Position 168px daneben - dat ziert sich etwas

Setz das Label auf

display: block; float: left; width: 168px;

Das Element wo das Label und das Formularelement drin sind (vermutlich p) stattest du mit

clear: left;

aus.

[eagle275]

ok, nu sind sie wieder nebeneinander - aber dafür klebt das Eingabefeld direkt am Label .. .. oder muss ich das Eingabeelement nun mit float: right daneben legen?

[Quetschi]

Du kennst so CSS-Styles wie "margin"?

[eagle275]

joa margin-left: 168px wegen der Vorlage - und es rückt in die nächste Zeile

[Quetschi]

Du hast das input-Tag mit margin-left: 168px; ausgezeichnet?

[eagle275]

ja - was zumindest ein Versuch von mir @Quetschi

also werde bitte etwas deutlicher .. wie sorge ich bei den Label Eingabefeld teilen dafür, dass das Label 168 px Raum hat, und an dieser Stelle exakt das Eingabefeld / Auswahlfeld / was auch immer beginnt ..

margin-left:168px; funktionert bestens bei den Buttons zum abschicken, weil die ohne Label nackt auf der Zeile stehen

der Vorschlag von Amica führt mich jedenfalls noch nicht direkt zum Ziel .. und nach 2 Tagen basteln dran .....

und margin-right: 0px führt trotz width: 298px nicht zum ziel ..

[Quetschi]

also werde bitte etwas deutlicher ..

also zeig bitte etwas mehr Eigeninitiative - setz dich eingehender mit Html und Css auseinander, google nach deinen Problemen, probier verschiedenes aus und lerne daraus - so wie wie die meisten das hier eben auch gemacht haben. Es ist nicht unser Problem, wenn du dich mit etwas befassen sollst, dass dir nicht liegt.


Du brauchst keinen Abstand von 168px von links auf den input-Tags, weil du damit einen Abstand von 168px zu den labels erzeugst - dann würde das ganze allerdings nicht mehr in das Elternelement passen und daher rückt es in eine neue Zeile.

[AmicaNoctis]

Vielleicht solltest du mal deinen aktuellen Code dazulegen, damit hier nicht alle außer dir im Blindflug Ursachen suchen müssen.

[eagle275]

<p id="myheadline2">Admin-Optionen</p>
  <form action="'.$PHP_SELF.'" method="post">
    <p id="form">
      <label for="nied_wahl" class="kopf">Niederlassung wählen</label>
      <select id="nied_wahl" class="auswahl" name="ID" >
<!-- Code für die Optionen
      </select></p>
    <p id="form">
      <input class="mybutton" type="submit" value="Neue Kennungen freigeben"/>
    </p>
  </form>

......

Styles
...
     p#myheadline2 {
        color: #003B69;
        font-weight: bold;
        font-size: 0.8em;
        font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
        line-height: 1.25em;
    }
...
    p#form {
        text-align: left;
        color: #003B69;
        font-size: 0.8em;
        font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
        line-height: 1.25em;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 3px;
        padding: 0px;
        line-height: 18px;
        width: 468px;
        clear: left;
    }
    .Kopf {
        width: 168px;
        display: block; 
        float: left;
    }
    .auswahl {
        width: 298px;
        color: #003B69;
        height: 18px;
        line-height: 18px;
        border: 1px solid #A1A1A1;
    }

die ursprüngliche div-Struktur hab ich entschlackt auf noch 3 bzw 4 (1 davon der horizontale Nav-Bar)

[AmicaNoctis]

Bei Klassennamen ist die Groß-/Kleinschreibung nicht egal.

[eagle275]

Edit

war sie .. bis ich xhtml "angeschaltet" hab - zumindest wenn ich der alten Doku zu css glauben darf, die ich zuerst verwendet hab ....

Danke Amica .. funzt nun wie gewünscht

Kleine Zusatzfrage..

kann ich über dieses <p><Label>- Konstrukt dann auch 2 schmalere EingabeFelder in eine Zeile "zaubern" - die haben entsprechend dem .auswahl-CSS etwas mit width=96 und dahinter dann eines mit width=192 ?

[Kropff]

kann ich über dieses <p><Label>- Konstrukt dann auch 2 schmalere EingabeFelder in eine Zeile "zaubern" - die haben entsprechend dem .auswahl-CSS etwas mit width=96 und dahinter dann eines mit width=192 ?

Du meinst so was wie PLZ und Ort? Dann verpass den input-Elementen eine entsprechende Klasse mit den notwendigen Zuweisungen und das war's.

Peter

PS: Bei mir gibt es zu dem Thema zwei Praxistutorials (3 und 4). Vielleicht helfen sie dir weiter.

[eagle275]

so, ich muss mal meinen eigenen alten Thread wieder anfassen..

die Anwendung (PHP) ist nun weitgehend fertig .. aber das CSS treibt Hasch-mich mit mir ...

Problem 1:

ich hab im Formular 2 Textarea - Elemente eingebaut

CSS:

  body, textarea
  {
    /* Allgemeine Schriftanweisungen */
        color: #003B69;
        background-color: white;
        font-size: 100.1%;
        padding: 1em 0px;
}
 p.form
  {
    margin-bottom: 3px;
    clear: left;
  }
  input, select, textarea
  {
    width: 298px;
    color: #003B69;
    background: #FFFFFF;
    border: 1px solid #A1A1A1;
    line-height: 18px;
}
  label
  {
    float: left;
    width: 168px;
  }
  .ie
  {
    padding-top: 10px;
    width: 468px;
    margin-bottom: 3px;
  }
  span.bemerk {
    width: 168px;
    float: left;
  }
  span.kunde {
     width: 168px;
     float: left;
  }

im Formular dann:

<p class="form">';
   <label class="ie">
      <span class="kunde">Kunde:</span>
      <textarea name="kunde" id="kunde" rows="3" cols="60" >
         Textausgabe
      </textarea>
   </label>
</p>

analog sieht das dann beim 2ten Textarea für die Hinweise aus, nur das span class="bemerk" verwendet wird ...

in den Textarea-Elementen sieht das daraufhin etwa folgendermaßen aus

___________________________

Textausgabe Zeile1
Zeile2

___________________________

Wie krieg ich die "leere" Zeile da oben weg .. (der Zwischenraum zwischen Text und Rand des Textarea ).. weiß nicht, wo das herkommt)

[Kropff]

<label for="kunde">Kunde:</label>
  <textarea name="kunde" id="kunde" rows="3" cols="60" >
    Textausgabe
  </textarea>

Was passiert jetzt?

Peter

[wahsaga]

Wie krieg ich die "leere" Zeile da oben weg .. (der Zwischenraum zwischen Text und Rand des Textarea )

In dem du die Leerzeilen, die du explizit im Inhalt der Testarea notiert hast, weg lässt ...!


Kann man übrigens auch mal nachlesen, bevor man fragt: http://de.selfhtml.org/html/formular...he_vorbelegung