HTML/CSS Definitionslisten und Hintergrundfarbe

[WhiZZler]

begrüße!

dieser post stand ursprünglich in dem thread zum zend framework.. es geht darum formulare mit sinnvollem markup auszustatten und dann über css zu formatieren..

Ein Formular gehört aber nicht in Tabellen, es gibt im Netz viele schöne Beispiele wie du das gleiche Aussehen mit CSS realisierst aber es semantisch korrekt hast.

semantisch sehe ich keine ideale lösung für die anzeige von formularen.. eine definitionsliste wie standardmäßig im zf ist meiner meinung nach auch nicht der weisheit letzter schluss..

ich hatte es irgendwann auch schonmal probiert, das formular nur mit labels und den input feldern zu gestalten.. semantisch ist das imo die beste lösung.. ist aber leider auch relativ unflexibel.. das problem, das ich dabei hatte war es, zwei verschiedene hintergrundfarben anzeigen zu lassen..

nachdem ich mich jetzt nochmal kurz mit dem thema beschäftigt habe und nen wenig drüber nachgedacht habe sind definitionslisten ne bessere lösung als tabellen, aber trotzdem nicht das ideale..
wegen meinem gescheiterten versuch mit labels und inputs habe ich dennoch versucht es umzusetzen.. und lustigerweise stehe ich jetzt vor genau dem gleichen problem wie bei bei labels und inputs..

hier mal der link:
https://suicidalfailur.piranho.de/rollen.html

wie bekomme ich es hin, dass die komplette linke "spalte" eine graue hintergrundfarbe hat? wenn ich den dt's die hintergrundfarbe zuordne, dann ist nur die schrift selbst grau hinterlegt, nicht aber der rest der spalte.. jetzt habe ich versucht der ganzen dl die graue hintergrundfarbe zu geben und dann die dd's mit weißer hintergrundfarbe zu gestalten.. hat zu dem wenig befriedigenden ergebnis geführt, das unter dem link zu finden ist..

hier mein css:

/* formulare mit definitionslisten */
.dd_form {
  background-color: #E6E6E6;
  border: 1px solid black;
}

.dd_form dt {
  font-weight: bold;
  background-color: #E6E6E6;
  float: left;
  width:35%;
}

.dd_form dd {
  margin-left: 2%;
  background-color: #FFFFFF;
}

.dd_form li {
  color: red;
  margin-left: 35%;
}

der html code ist nicht besonders spannend, da er eh komplett von zend_form erstellt wird.. anschauen kann man ihn ja auch unter dem link

p.s: falls das nid hier rein soll, dann mach ich nen neuen thread auf..

edit: gut! dann als eigenen thread. wer auch immer es verschoben hat: danke

 

[strolch00]

Hi,

habe jetzt nix genaueres dazu gefunden aber ich habe ein schönes Formularbeispiel gefunden.

Wenn Dir das was hilft ist hier das Tut dazu.

Btw. wieso zeigt der Dir schon die Fehlermeldungen an??? Schick mir mal deinen Code vom Form da stimmt was nicht. Kannst auch per ICQ bin jetzt daheim.

 

[WhiZZler]

danke für die links, die helfen mir aber nich wirklich weiter.. ich würde halt wie gesagt gerne zwei verschiedene hintergrundfarben verwenden..

ich habe das formular bei mir im projekt leer abgeschickt und dann den html code kopiert deswegen werden die fehlermeldungen angezeigt.. hab das eigentlich nur zu anschauungszwecken so kopiert.. ist auch ein reines html formular..

 

[TerraTux]

Ich hoffe, ich habe das Ziel richtig verstanden. Versuchs so:

.dd_form {
	background-color: #E6E6E6;
	border: 1px solid black;
}

.dd_form dt {
	font-weight: bold;
	float: left;
	width:35%;
	height: 100%;
	display: block;
	clear: both;
}

.dd_form dd {
	margin-left: 35%;
	text-align: left;
	padding: 2px;
	background-color: #FFFFFF;
}

.dd_form li {
	color: red;
	margin-left: 15px;
}

Gruß

 

[perlini]

Habe ich jetzt nicht getestet, aber wie wäre es, wenn du dem fieldset eine Hintergrundgrafik gibst. Dann müßtest du du den labels natürlich eine feste Breite (in px) mitgeben.