Archiv verlassen und diese Seite im Standarddesign anzeigen :
Problem mit CSS / DIV und Formular
eagle275 02-07-2010, 09:53
ich soll für eine Firmen-Webseite etwas nach folgendem Schema erstellen
Kopf-Banner
M Navi2
e
n Inhalt
u
ich hab das mithilfe von divs gelöst nach Anleitung von selfhtml
nun zum Problem.
der Inhalts-Abschnitt teilt sich seinerseits in 2 Teile auf (nebeneinander), wovon sich der linke Teil seinerseits nochmal in 2 Teile aufsplittet .
Auf diesen letzten 2 Boxen möchte ich ein Formular bauen .. in der Box links sollen die Feldbezeichnungen stehen, rechts die eigentlichen EingabeFelder usw.
Das Problem ist nun .. ich soll validen Code schreiben - und hab daher in meine Seite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
aufgenommen .. und plötzlich zerpflückt der mein Formular ...
hier mal aus meinen CSS-Styles
body {
color: #003B69;
background-color: white;
font-size: 100.1%:
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 1em 0;
text-align: center;
min-width: 41em;
}
div#Seite {
text-align: left;
margin: 0 auto;
width: 960px;
padding; 0.5em;
border: 1px ridge silver;
}
div#Navi {
text-align: left;
float: left;
margin: 0 auto;
width: 240px;
padding; 0;
border none;
}
div#Inhalt {
margin: 0 240px 0;
width:708px;
padding; 0;
border-left: 12px solid white;
}
div#FormSeite {
text-align: left;
margin: 0;
width: 468px;
padding; 0;
border: 0px none transparent;
}
div#FormKopf {
text-align: left;
float: left;
margin: 0 auto;
width: 168px;
padding; 0;
border none;
border: 0px none transparent;
}
div#FormElem {
text-align: left;
margin: 0 168px 0;
width: 300px;
padding: 0em;
border: 0px none transparent;
}
und einsetzen tu ich das wie folgt
<body>
<div id="Seite">
<img src="img/Kopf_01.jpg " name="logo" alt="logo" width="960"
height="<?php echo 354.0/ (2480.0/960.0);?>"/>
<div id="Navi">
<!-- Navi bauen -->
</div>
<div id="Inhalt">
<p class=myheadline>Überschrift</p>
<div id="navcontainer">
<!-- horizontale Nav-Bar -->
</div>
<p class=myheadline2>Kunden-Stammdaten</p>
<div id="FormSeite">
<div id="FormKopf">
<p id="form">Kontrakt Nr.:</p>
</div>
<div id="FormElem">
<form action="work.php" method="post">
<p id="form">
<input type="text" class="textfeld" name="eingabe" maxlength="9">
</p>
<p id="form">
<input type="submit" class="mybutton" value="Verarbeiten">
</p>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
was läuft da schief ? oder braucht ihr noch mehr Informationen ?
Quetschi 02-07-2010, 11:46
der Inhalts-Abschnitt teilt sich seinerseits in 2 Teile auf (nebeneinander), wovon sich der linke Teil seinerseits nochmal in 2 Teile aufsplittet .
Auf diesen letzten 2 Boxen möchte ich ein Formular bauen .. in der Box links sollen die Feldbezeichnungen stehen, rechts die eigentlichen EingabeFelder usw.
was läuft da schief ?Dein Verständnis für html. ;)
Mit dem was du da machst, zerstörst du den logischen Bezug zwischen den Feldbezeichnungen und den Eingabefeldern. Am besten siehst du es, wenn du das ganze vollkommen ohne CSS im Browser darstellen lässt.
Das ist ein absolutes NoGo - man kann eine Seite schon mit validem Markup erstellen - aber sinnvoll/barrierefrei usw. ist sie deswegen noch lange nicht.
AmicaNoctis 02-07-2010, 11:50
Hallo,
bist du schon mal auf die abwegige Idee gekommen, dass dir in diesem Fall entweder ein scharfer Blick auf den Code oder die Argusaugen vom W3C Validator weiterhelfen könnten? ;) Du scheinst manchmal id mit class zu verwechseln :dontknow:
Warum nimmst du eigentlich keinen XHTML-Doctype?
Gruß,
Amica
eagle275 02-07-2010, 14:00
@Quetschi .. wenn du wüsstest - ich hab hier ne ca 50seitige pdf-Datei, die mir vorschreibt, exakt wie breit die Spalten auf meiner Seite zu sein haben, mit welchem Abstand und so weiter ....
und ich wollte eigentlich weg vom traditionellen Layout mit Tabellen ...
AmicaNoctis 02-07-2010, 14:04
ich wollte eigentlich weg vom traditionellen Layout mit Tabellen ...
Was spricht denn auch dagegen, auf Layout-Tabellen zu verzichten? Hast du die Fehler behoben? Klappt es jetzt? Wenn nicht, wo klemmt es? Hast du Quetschis Hinweise bzgl. der Labels umgesetzt?
Quetschi 02-07-2010, 14:36
Du handelst dir mit deiner Vorgehensweise mehr Probleme ein, als du behebst (wenn du überhaupt damit welche behebst).
Was machst du z.B. wenn dir die Bezeichnung für ein Eingabefeld z.B. zweizeilig gerät? Dann wirst du es kaum mehr schaffen Bezeichner und Eingabefelder wenigstens visuell zueinander in Bezug stehen zu lassen.
Wirf die zwei Spalten weg, mit denen du Bezeichner und Eingabefelder komplett voneinander trennst und bau dein Formular in etwa so auf:
<p><label for="Vorname">Vorname </label><input type="text" id="Vorname" name="Vorname" /><p>
<p><label for="Name">Name </label><input type="text" id="Name" name="Name" /><p>
Mit deinem Ansatz hast du die Probleme, die früher Layout-Tabellen so mit sich brachten nicht gelöst, sondern sogar verschlimmert.
AmicaNoctis 02-07-2010, 14:52
Das stimmt nicht ganz: das for-Attribut von label referenziert ein Formularelement nicht über das name-Attribut, sondern über id. Ansonsten stimme ich dem vollkommen zu.
Quetschi 02-07-2010, 14:57
Stimmt - man hat ja id genommen, weil das ja (eigentlich - im geposteten Markup leider nicht :() ein eindeutiger Bezeichner ist.
Ich editier das gleich noch...
eagle275 02-07-2010, 16:06
und wie krieg ich mit Label for . die geforderten Maße hin?
168 px Bezeichner , 300 px Länge EingabeFeld ?
ich programmier leidenschaftlich gern in php .. aber das html-Zeugs raubt mir die Nerven
und danke @Amica .. das mit dem doctype nach xhtml hat mir zumindest im Firefox ne halbwegs saubere darstellung beschert - solange mein Navi-Menü ganz links quasi leer ist ....
Steht da was drin, haut er mir den NaviBar aus seiner Position unterhalb der Überschrift ...
ich glaub ich muss nochmal bei selfhtml bezüglich float und so nachgucken ...
Du kannst die gewünschten Maßangaben ganz normal im Stylesheet machen.
Quetschi 02-07-2010, 16:09
Du kannst ein label-Tag genauso wie ein div-Tag mit CSS-Styles versehen.
ich programmier leidenschaftlich gern in php .. aber das html-Zeugs raubt mir die Nerven
Dann solltest du diesen Teil der Aufgabestellung vielleicht von jemandem umsetzen lassen, der sich damit auskennt.
eagle275 02-07-2010, 16:47
fällt aus wegen Bodennebel - ich bin der einzige Entwickler in meiner Abteilung .. aber langsam kriegt es Hand und Fuß .. das Navi-Menü links schwebt nun korrekt neben meinem InhaltsDiv ...
dann werd ich wohl den Kram mit Label auch hinbasteln können ^^
ich danke euch jedenfalls für eure Hinweise - auch wenn nicht alle sofort verständlich sind
Quetschi 02-07-2010, 16:52
ich danke euch jedenfalls für eure Hinweise - auch wenn nicht alle sofort verständlich sindHier werden immer nur die Zutaten geliefert - zubereiten muss man immer selbst ;)
eagle275 02-07-2010, 17:01
Du kannst die gewünschten Maßangaben ganz normal im Stylesheet machen.
So .. dat Label-Element hüpft .. nur .. wie krieg ich das Eingabe-Teil exakt ab Position 168px daneben - dat ziert sich etwas
trotz (oder gerade wegen ^^) Festlegung mit CSS zeigt er mir das wie folgt an ..
Label
Eingabefeld
wobei das Eingabefeld wohl schon an der richtigen Position beginnt .. und auch die richtige Abmessung / Style hat
AmicaNoctis 02-07-2010, 17:09
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 02-07-2010, 17:23
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 02-07-2010, 17:25
Du kennst so CSS-Styles wie "margin"?
eagle275 02-07-2010, 17:26
joa margin-left: 168px wegen der Vorlage - und es rückt in die nächste Zeile
Quetschi 02-07-2010, 17:29
Du hast das input-Tag mit margin-left: 168px; ausgezeichnet? :confused:
eagle275 02-07-2010, 17:35
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 02-07-2010, 17:42
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 02-07-2010, 17:46
Vielleicht solltest du mal deinen aktuellen Code dazulegen, damit hier nicht alle außer dir im Blindflug Ursachen suchen müssen.
eagle275 02-07-2010, 17:55
<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 02-07-2010, 18:03
Bei Klassennamen ist die Groß-/Kleinschreibung nicht egal.
eagle275 02-07-2010, 18:09
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 ?
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 (http://www.peterkropff.de/site/tutorials/html_css.htm) gibt es zu dem Thema zwei Praxistutorials (3 und 4). Vielleicht helfen sie dir weiter.
eagle275 03-08-2010, 15:30
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)
<label for="kunde">Kunde:</label>
<textarea name="kunde" id="kunde" rows="3" cols="60" >
Textausgabe
</textarea>
Was passiert jetzt?
Peter
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/formulare/eingabe.htm#bereiche_vorbelegung
eagle275 03-08-2010, 16:56
@wahsaga: .. das ist keine Leere Zeile Text, sondern es liegt ca 1/2 cm "Luft" zwischen Rahmen des Textarea und dem eigentlichen Text - außerdem ist da in meinem Code keine Leerzeile zu erkennen...
@Kropf: sieht immer noch so aus ... oberhalb des Textes ist eine Lücke zum Rahmen des Textarea-Elements...
AmicaNoctis 03-08-2010, 16:57
sieht immer noch so aus
Wie sieht der aktuelle Code aus?
eagle275 03-08-2010, 17:02
so wie Kropf vorgeschlagen hat ..
<p class="form">
<label for="kunde">Kunde:</label>
<textarea name="kunde" id="kunde" rows="3" cols="60">Text</textarea>
</p>
das ist keine Leere Zeile Text, sondern es liegt ca 1/2 cm "Luft" zwischen Rahmen des Textarea und dem eigentlichen Text - außerdem ist da in meinem Code keine Leerzeile zu erkennen...
Natürlich waren da im vorher gezeigten Code Leerzeilen.
Ausserdem, wieso wunderst du dich über Innenabstände, wenn du explizit ein padding angibst ...?
eagle275 03-08-2010, 17:26
erm Wahsaga ..
da war nie eine Leerzeile - das kam , weil ich die Ausgabe meines PHP-Scriptes in (von mir gewählte) Zeilen eingeteilt habe - eigentlich spuckt mein PHP-Script an der Stelle alles in einer einzigen ewig langen Zeile aus -
aber der 2te Hinweis war ein Volltreffer .. ohne die plöde Padding Anweisung im CSS geht es
AmicaNoctis 03-08-2010, 17:31
Doch, da war eine (rot):
<p class="form">';¶
<label class="ie">¶
<span class="kunde">Kunde:</span>¶
<textarea name="kunde" id="kunde" rows="3" cols="60" >¶
Textausgabe¶
</textarea>¶
</label>¶
</p>¶
eagle275 03-08-2010, 17:36
war keine . ich werd doch mein html kennen ... *g*
das Problem ist aber gelöst und für das nächste werd ich wohl nen neuen thread aufmachen ....
AmicaNoctis 03-08-2010, 17:50
war keine . ich werd doch mein html kennen ... *g*
umpf… Ich dachte, klarer kann man es nicht machen, als den Zeilenumbruch explizit anzuzeigen und rot zu markieren. Das Problem ist zwar behoben, aber solange du das nicht verstanden hast, passiert es dir immer wieder. Soll aber nicht meine Sorge sein…
eagle275 03-08-2010, 18:04
ich dachte auch, ich hätte klar geschrieben, dass der von dir monierte Zeilenumbruch nur dadurch zustande kam, dass ich den HTML-Output selbst hier für dieses Forum in einzelne Zeilen geschnipselt habe .. im ursprünglichen PHP-Code wird kein \n oder sonst wie ein Zeilenumbruch erzeugt
AmicaNoctis 03-08-2010, 18:20
ich dachte auch, ich hätte klar geschrieben, dass der von dir monierte Zeilenumbruch nur dadurch zustande kam, dass ich den HTML-Output selbst hier für dieses Forum in einzelne Zeilen geschnipselt habe
Ach!-Soooo! Bitte vielmals um Entschuldigung! ;)
:beer:
eagle275 04-08-2010, 06:58
jo, Hoch die Tassen ^^
|
|
