{"id":192,"date":"2014-07-16T14:32:27","date_gmt":"2014-07-16T12:32:27","guid":{"rendered":"http:\/\/www.zellot.at\/blogs\/?p=192"},"modified":"2014-07-16T14:32:27","modified_gmt":"2014-07-16T12:32:27","slug":"description-lists-horizontal","status":"publish","type":"post","link":"https:\/\/www.zellot.at\/blogs\/2014\/07\/16\/description-lists-horizontal\/","title":{"rendered":"Description Lists Horizontal"},"content":{"rendered":"<p>Folgende Problemstellung: Eine Description List die horizontal ausgerichtet wird, jedoch hatte ich das Problem das bei einem zu hohen Text (also im <code class=\"preserve-code-formatting\"> &lt;dd&gt; <\/code>) Element der Hintergrund des dt nur bis zur H\u00f6he des dt Elements blieb. Einfache L\u00f6sung (eigentlich offensichtlich und vermutlich gibt es schon 100e Anleitungen dazu)<br \/>\n<pre><code class=\"preserve-code-formatting\">\ndl.horizontal {\n&nbsp;&nbsp;&nbsp;&nbsp;display: block;\n&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #ddd;\n&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f5f5f5;\n}\n\n.horizontal dt {\n\n&nbsp;&nbsp;&nbsp;&nbsp;float: left;\n&nbsp;&nbsp;&nbsp;&nbsp;width: 30%;\n&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;\n&nbsp;&nbsp;&nbsp;&nbsp;clear: left;\n&nbsp;&nbsp;&nbsp;&nbsp;text-align: right;\n&nbsp;&nbsp;&nbsp;&nbsp;white-space: nowrap;\n&nbsp;&nbsp;&nbsp;&nbsp;border-right: 1px solid #ddd;\n&nbsp;&nbsp;&nbsp;&nbsp;border-top: 1px solid #ddd;\n&nbsp;&nbsp;&nbsp;&nbsp;min-height: 25px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding-top: 10px;\n&nbsp;&nbsp;&nbsp;&nbsp;text-align: left;\n\n}\n.horizontal dt span{\n&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 15px;\n}\n.horizontal dd {\n&nbsp;&nbsp;&nbsp;&nbsp;border-top: 1px solid #ddd;\n&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 30%;\n&nbsp;&nbsp;&nbsp;&nbsp;min-height: 25px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding-top: 10px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 15px;\n&nbsp;&nbsp;&nbsp;&nbsp;border-left: 1px solid #ddd;\n&nbsp;&nbsp;&nbsp;&nbsp;background-color: #ffffff;\n}\n.horizontal dt:first-of-type {\n&nbsp;&nbsp;&nbsp;&nbsp;border-top: none;\n}\n.horizontal dd:first-of-type {\n&nbsp;&nbsp;&nbsp;&nbsp;border-top: none;\n}\n\n<\/code><\/pre><br \/>\nEs wird einfach dem dl Element ein grauer Background gegeben und die dd Elemente erhalten einen wei\u00dfen Hintergrund. Probleme k\u00f6nnten hier noch auftreteten wenn das dt Element zu gro\u00df werden w\u00fcrde. (dl -horizontal wurde aus Boostrap 3 \u00fcbernommen)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Folgende Problemstellung: Eine Description List die horizontal ausgerichtet wird, jedoch hatte ich das Problem das bei einem zu hohen Text (also im &lt;dd&gt; ) Element der Hintergrund des dt nur bis zur H\u00f6he des dt Elements blieb. Einfache L\u00f6sung (eigentlich offensichtlich und vermutlich gibt es schon 100e Anleitungen dazu) dl.horizontal { &nbsp;&nbsp;&nbsp;&nbsp;display: block; &nbsp;&nbsp;&nbsp;&nbsp;border: 1px [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53,66,51],"tags":[70,67,58,69,68],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-bootstrap-3","category-css","category-twitter","tag-boostrap-dl","tag-css-2","tag-css-problems","tag-descriptionlist","tag-dl"],"_links":{"self":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":1,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts\/192\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/posts\/192\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/media?parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/categories?post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zellot.at\/blogs\/wp-json\/wp\/v2\/tags?post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}