{"id":35700,"date":"2018-01-26T03:01:30","date_gmt":"2018-01-25T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35700"},"modified":"2018-01-26T08:59:31","modified_gmt":"2018-01-25T22:59:31","slug":"html-div-versus-hr-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-primer-tutorial\/","title":{"rendered":"HTML div Versus hr Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML div Versus hr Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.jpg\" title=\"HTML div Versus hr Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML div Versus hr Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s new web application is a CSS styling &#8220;tool&#8221; (at least we&#8217;d like to think) but written predominantly via HTML and Javascript &#8230; go figure &#8230; but yes, it makes sense a bit, that to show CSS &#8220;in action&#8221; so to speak, you&#8217;d want an &#8220;actor&#8221; like Javascript, DOM in particular, is.<\/p>\n<p>As a matter of fact (and you may want to pre-read <a target=_blank title='Weather API via Iframe jQuery Ajax Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-map-tutorial\/'>Weather API via Iframe jQuery Ajax Map Tutorial<\/a>, for the &#8220;-&#8221; sign goes to &#8220;capital letter&#8221; (ditty) thinking that gets used around here, if all this interests you), there are only a few things to do with &#8230;<\/p>\n<ul>\n<li>CSS styling &#8230; that &#8230;<\/li>\n<li>Javascript DOM &#8230; can&#8217;t simulate<\/li>\n<\/ul>\n<p> &#8230; and the &#8220;venn diagram&#8221; look of that non-intersecting part is eaten into further if you include jQuery syntaxes like &#8230;<\/p>\n<ul>\n<li>$(&#8220;#[html-element-id]&#8221;).<a target=_blank title='jQuery css method information from w3schools' href='https:\/\/www.w3schools.com\/jquery\/jquery_css.asp'>css<\/a>(&#8220;[attribute]&#8221;, &#8220;[value]&#8221;); \/\/ as talked about at <a target=_blank title='Javascript Zoom and Translate Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-zoom-and-translate-primer-tutorial'>Javascript Zoom and Translate Primer Tutorial<\/a><\/li>\n<li>$(&#8216;#messages li:nth-child(odd)&#8217;).css(&#8216;background-color&#8217;, $(&#8216;#imyc&#8217;).val()); \/\/ as talked about at <a target=_blank title='Socket.IO Node.js Chat Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/socket-io-node-js-chat-application-primer-tutorial\/'>Socket.IO Node.js Chat Application Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>The reason we are here now discussing this is that yesterday&#8217;s <a target=_blank title='PHP Sun Information Software Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-sun-information-software-integration-tutorial\/'>PHP Sun Information Software Integration Tutorial<\/a> &#8220;shenanigans&#8221; (making the sun diagram get a white background rather than a pink one <font size=1>&#8230; as you would now, possums &#8230;<\/font>) got me stumbling (<font size=1>though &#8220;stumbelling&#8221; sounds better<\/font>) onto an accident (<font size=1>just waiting to happen<\/font>) &#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/> &#8230; with me changing a &#8220;pink&#8221; background colour for a pink border colour (<font size=1>&#8230; as you would now, <strike>possums<\/strike>squirrels &#8230;<\/font>) in a &#8230;. (<font size=1>da da da da<\/font>) &#8230; HTML div element, and it came out looking like a pink line, and there &#8230;. (<font size=1>in the &#8230; but we digress<\/font>) &#8230; it occurred to us that &#8230; (<font size=1>do be do be do<\/font>) &#8230;<\/p>\n<ul>\n<li>HTML div elements with a border and no content &#8230; can be a lot like &#8230;<\/li>\n<li>HTML hr (horizontal rule) element<\/li>\n<\/ul>\n<p>So we wrote an HTML and Javascript (and bits of CSS) &#8220;tool&#8221; to show that, and we realized that &#8230;<\/p>\n<ul>\n<li>presenting the Javascript DOM HTML element property <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> property of those &#8220;div&#8221; and &#8220;hr&#8221; elements could be quite constructive &#8230; as the &lt;-HTML-&gt; &#8220;partner&#8221; to &#8230;<\/li>\n<li>presenting the &#8220;div&#8221; and &#8220;hr&#8221; elements themselves, the look of which is controlled by you, the user <font size=1>&#8230; yes, you &#8230;<\/font> &#8230; as the &lt;-Visual-&gt; &#8220;partner&#8221;<\/li>\n<\/ul>\n<p> &#8230; those two &#8220;partners&#8221; being a very familiar sight to bloggers and users of many a <a target=_blank title='Content Management System' href='http:\/\/en.wikipedia.org\/wiki\/Content_management_system'>CMS<\/a> (Content Management System).<\/p>\n<p>Some of the CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_border-style.asp' title='CSS border-style property information from w3schools'>border-style<\/a> properties are really snazzy, and somehow being able to compare the &#8230;<\/p>\n<ul>\n<li>HTML div elements with a border and no content initially, but you <font size=1>&#8230; yes, you &#8230;<\/font> can add content dynamically (via an HTML textarea element) &#8230; compared to (or perhaps matching the look of via the &#8220;generic&#8221; user controls further up the HTML element editing &#8220;table&#8221; of this web application) &#8230; to the &#8230;<\/li>\n<li>HTML hr (horizontal rule) element<\/li>\n<\/ul>\n<p> &#8230; got our styling creative juices going <font size=1>&#8230; damn! &#8230; orange juice again!<\/font><\/p>\n<p>Why not try this tool yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html\" title=\"Click picture\">live run<\/a> link with underlying HTML and Javascript and bits of CSS as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html_GETME\">nocontent_bordered_div_vs_hr.html<\/a> that is downloadable as usual?<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d35700' onclick='var dv=document.getElementById(\"d35700\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35700' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s new web application is a CSS styling &#8220;tool&#8221; (at least we&#8217;d like to think) but written predominantly via HTML and Javascript &#8230; go figure &#8230; but yes, it makes sense a bit, that to show CSS &#8220;in action&#8221; so &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[161,281,342,354,576,652,1861,997,1212,1238,2005,1319,1891],"class_list":["post-35700","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-border","tag-css","tag-div","tag-dom","tag-html","tag-javascript","tag-outerhtml","tag-programming","tag-styling","tag-table","tag-tool","tag-tutorial","tag-user"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35700"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=35700"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35700\/revisions"}],"predecessor-version":[{"id":35718,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35700\/revisions\/35718"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}