{"id":48865,"date":"2020-04-30T03:01:08","date_gmt":"2020-04-29T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48865"},"modified":"2020-05-01T10:21:35","modified_gmt":"2020-05-01T00:21:35","slug":"negative-margin-css-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/negative-margin-css-primer-tutorial\/","title":{"rendered":"Negative Margin CSS Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Negative Margin CSS Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.jpg\" title=\"Negative Margin CSS Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Negative Margin CSS Primer Tutorial<\/p><\/div>\n<p>That HTML editor (in the form of a textarea element) of yesterday&#8217;s <a target=_blank title='HTML Editor Inline HTML Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editor-inline-html-email-tutorial\/'>HTML Editor Inline HTML Email Tutorial<\/a> may help you learn some &#8230;<\/p>\n<ul>\n<li>HTML design<\/li>\n<li>Javascript dynamics &#8230; and &#8230;<\/li>\n<li>CSS styling<\/li>\n<\/ul>\n<p> &#8230; and though for most programmers the Javascript will be the most fun and most demanding aspect to learn regarding the client side of the &#8220;client\/server&#8221; web application model, the most &#8220;ooh&#8221; &#8220;aahs&#8221; of interest, though, and so motivation to continue learning, are likely to come from an appreciation of CSS styling.<\/p>\n<p>With today&#8217;s web application we try to help the user to see where these &#8220;giant wooooorrrrlllllddds&#8221; meet.  Do you remember <a target=_blank title='XML on the Fly via PHP Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-on-the-fly-via-php-primer-tutorial\/'>XML on the Fly via PHP Primer Tutorial<\/a>&#8216;s observation &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-on-the-fly-via-php-primer-tutorial\/'><p>\nTo get from \u201cDOM\u201d thinking to \u201cDOMDocument\u201d thinking, reminded us of that CSS \u201cmapping\u201d to Javascript DOM idea that you substitute the CSS \u201c-\u201d (minus) and next lowercase letter for a Javascript DOM capital letter &#8230;\n<\/p><\/blockquote>\n<p> &#8230; a Javascript DOM hint for dynamic CSS styling <font color=blue>used in<\/font> (all the Javascript scripting of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.html_GETME\">negative_margins.html<\/a>) &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  function leftchange(iotb) {<br \/>\n    document.getElementById('animg').style.marginLeft='' + iotb.value + 'px';<br \/>\n  }<br \/>\n<br \/>\n  function topchange(iotb) {<br \/>\n    document.getElementById('animg').style.marginTop='' + iotb.value + 'px';<br \/>\n  }<br \/>\n<br \/>\n  function cdov(iotb) {<br \/>\n    document.getElementById('divencaser').style.overflow='' + iotb.value;<br \/>\n  }<br \/>\n<br \/>\n  <font color=blue>function domit(incl) {<br \/>\n    var bits=incl.split('-');<br \/>\n    var retval=bits[0];<br \/>\n    for (var ibits=1; ibits&lt;bits.length; ibits++) {<br \/>\n      retval+=(bits[ibits] + '  ').substring(0,1).trim().toUpperCase() + (bits[ibits] + '  ').substring(1).trim().toLowerCase();<br \/>\n    }<br \/>\n    return retval;<br \/>\n  }<br \/>\n<br \/>\n  function cssdiv(iotb) {<br \/>\n    var clauses=iotb.value.split(';');<br \/>\n    for (var ic=0; ic&lt;clauses.length; ic++) {<br \/>\n      if (clauses[ic].indexOf(':') != -1) {<br \/>\n        eval(\"document.getElementById('divencaser').style.\" + domit(clauses[ic].split(':')[0]) + '=\"' + clauses[ic].split(':')[1].replace(\/\\\"\/g,'').replace(\/\\'\/g,'') + '\";');<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function cssimg(iotb) {<br \/>\n    var clauses=iotb.value.split(';');<br \/>\n    for (var ic=0; ic&lt;clauses.length; ic++) {<br \/>\n      if (clauses[ic].indexOf(':') != -1) {<br \/>\n        eval(\"document.getElementById('animg').style.\" + domit(clauses[ic].split(':')[0]) + '=\"' + clauses[ic].split(':')[1].replace(\/\\\"\/g,'').replace(\/\\'\/g,'') + '\";');<br \/>\n      }<br \/>\n    }<br \/>\n  }<\/font><br \/>\n<br \/>\n<font color=red><br \/>\n  function mobilecheck() {<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     document.getElementById('topc').value='5';<br \/>\n     topchange(document.getElementById('topc'));<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  setTimeout(mobilecheck, 2000);<\/font><br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>And in the spirit of trying to get early CSS learners interested in webpage styling we set up a &#8220;nester DIV element&#8221; nesting a &#8220;nested IMG element&#8221; with negative &#8220;margin-left&#8221; and &#8220;margin-top&#8221;.  We&#8217;ve added a &#8220;nester DIV element&#8221; user controllable &#8220;overflow&#8221; property to contextualize this a bit.  Change these settings, and we defy you not to be a tad interested.  The two textboxes open to whatever CSS you want to apply fit into those blue Javascript functions above that you can call into action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>Lastly, there is a first, for us, with today&#8217;s web application, our first &#8220;tipping toes into the ocean&#8221; regarding the HTML icon element topic we started our research about at <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_icons.asp' title='CSS Icons information from W3schools'>CSS Icons<\/a> discussion regarding the &#8220;i&#8221; HTML element (as an alternative to emojis, to our mind).  Within that we gave <a target=_blank title='Font Awesome' href='http:\/\/fontawesome.com'>&#8220;Font Awesome Icons&#8221;<\/a> a go, search through the external Javascript (script) &#8230;<\/p>\n<p><code><br \/>\n&lt;script src=\"\/\/kit.fontawesome.com\/a076d05399.js\"&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; searching through for some apt icon for &#8220;margin talk&#8221;, <font color=purple>opting for<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;h1 style='z-index:200;'&gt;Negative Margins Etcetera - RJM Programming - April, 2020 ... <font color=purple>&lt;i class=\"fas fa-border-style\" style=\"font-size:96px;color:blue;\"&gt;&lt;\/i&gt;<\/font>&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p><font color=red>The code snippet (addition) above<\/font> stops the smaller mobile device platforms having the user controls initially being covered over by the nester\/nested elements.<\/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='#d48865' onclick='var dv=document.getElementById(\"d48865\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/margin\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48865' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>That HTML editor (in the form of a textarea element) of yesterday&#8217;s HTML Editor Inline HTML Email Tutorial may help you learn some &#8230; HTML design Javascript dynamics &#8230; and &#8230; CSS styling &#8230; and though for most programmers the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/negative-margin-css-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":[281,342,354,409,3289,576,584,590,599,652,2673,2417,2521,2561,997,1200,1211,1319],"class_list":["post-48865","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-div","tag-dom","tag-external-javascript","tag-font-awesome","tag-html","tag-icon","tag-image","tag-img","tag-javascript","tag-margin","tag-negative","tag-nest","tag-overflow","tag-programming","tag-stop-press","tag-stylesheet","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48865"}],"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=48865"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48865\/revisions"}],"predecessor-version":[{"id":48874,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48865\/revisions\/48874"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}