{"id":1851,"date":"2016-04-17T17:21:44","date_gmt":"2016-04-17T15:21:44","guid":{"rendered":"http:\/\/blogg.improveme.se\/lolla\/?p=1851"},"modified":"2016-04-17T17:21:44","modified_gmt":"2016-04-17T15:21:44","slug":"textboxar-och-css","status":"publish","type":"post","link":"https:\/\/blogg.improveme.se\/lolla\/2016\/04\/17\/textboxar-och-css\/","title":{"rendered":"Textboxar och CSS."},"content":{"rendered":"<div style=\"color: #404040\">Du definierar ett omr\u00e5de eller en box p\u00e5 exempelvis 200 pixlar i bredd och 150 pixlar i h\u00f6jd. I detta omr\u00e5de kan du sedan l\u00e4gga de flesta HTML-objekt och du kan l\u00e4gga in bakgrundsf\u00e4rg, bakgrundsbilder och g\u00f6ra andra formateringar av texten. En box \u00e4r med andra ord ett omr\u00e5de med text, bilder eller annan information p\u00e5 ett begr\u00e4nsat omr\u00e5de.<\/p>\n<p><strong>1. F\u00f6rsta boxen:<\/strong><br \/>\n<em>Vi g\u00f6r en f\u00f6rsta box som \u00e4r 200 pixlar bred och 150 pixlar h\u00f6g. Den har allts\u00e5 ett best\u00e4mt omr\u00e5de som texten vi skriver inom exempelvis html-koden\u00a0<tt>p<\/tt>\u00a0kommer att h\u00e5lla sig inom.<br \/>\n<\/em><\/div>\n<div style=\"color: #404040\"><\/div>\n<div style=\"color: #404040\"><a href=\"http:\/\/blogg.improveme.se\/lolla\/files\/2016\/04\/Namnl\u00f6s10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1852 alignleft\" src=\"http:\/\/blogg.improveme.se\/lolla\/files\/2016\/04\/Namnl\u00f6s10.png\" alt=\"Namnl\u00f6s\" width=\"220\" height=\"169\" \/><\/a><\/div>\n<div style=\"color: #404040\"><\/div>\n<div style=\"color: #404040\"><\/div>\n<div style=\"color: #404040\"><\/div>\n<div style=\"color: #404040\">\n<p>&lt;style type=&#8221;text\/css&#8221;&gt;<br \/>\n&lt;!&#8211;<br \/>\n.box { background-color: #cccccc; height: 150px; width: 200px; padding: 4px; border: 2px solid #004080; }<br \/>\n&#8211;&gt;<br \/>\n&lt;\/style&gt;<\/p>\n<p><strong>I HTML-koden skriver du sedan:<\/strong><br \/>\n&lt;p&gt;Du definierar..&lt;\/p&gt;<\/p>\n<p><em>Med padding menas det med hur l\u00e5ngt ifr\u00e5n\/hur n\u00e4ra texten f\u00e5r komma kanten av boxen.<\/em><\/p>\n<p><strong>2. En box med rullningslist:<\/strong><br \/>\n<em>Varf\u00f6r inte l\u00e4gga till en rullningslist till boxen ocks\u00e5?<\/em><\/div>\n<div style=\"color: #404040\"><\/div>\n<div style=\"color: #404040\"><a href=\"http:\/\/blogg.improveme.se\/lolla\/files\/2016\/04\/yuj.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1853 alignleft\" src=\"http:\/\/blogg.improveme.se\/lolla\/files\/2016\/04\/yuj.png\" alt=\"yuj\" width=\"220\" height=\"91\" \/><\/a><\/div>\n<p style=\"height: 70px;width: 200px;padding: 4px;background-color: #cccccc;border: 1px solid #000000;overflow: auto\">\n<p style=\"height: 70px;width: 200px;padding: 4px;background-color: #cccccc;border: 1px solid #000000;overflow: auto\">\n<p style=\"height: 70px;width: 200px;padding: 4px;background-color: #cccccc;border: 1px solid #000000;overflow: auto\">\n<p style=\"height: 70px;width: 200px;padding: 4px;background-color: #cccccc;border: 1px solid #000000;overflow: auto\">Du definierar ett omr\u00e5de eller en box p\u00e5 exempelvis 200 pixlar i bredd och 150 pixlar i h\u00f6jd. I detta omr\u00e5de kan du sedan l\u00e4gga det flesta HTML-objekt och du kan l\u00e4gga in bakgrundsf\u00e4rg, bakgrundsbilder och g\u00f6ra andra formatteringar av texten. En box \u00e4r med andra ord ett omr\u00e5de med text, bilder eller annan information p\u00e5 ett begr\u00e4nsat omr\u00e5de.<\/p>\n<div style=\"color: #404040\">&lt;style type=&#8221;text\/css&#8221;&gt;<br \/>\n&lt;!&#8211;<br \/>\n.box2 { height: 70px; width: 200px; padding: 4 px; background-color: #cccccc; border: 1px solid #000000; overflow: auto; }<br \/>\n&#8211;&gt;<br \/>\n&lt;\/style&gt;<\/p>\n<p><strong>Och i HTML-koden ser det ut s\u00e5 h\u00e4r:<\/strong><br \/>\n&lt;p&gt;Du definierar..&lt;\/p&gt;<\/p>\n<p>Jag minskade h\u00f6jden till 70 pixlar, s\u00e5 att all text inte fick plats inom boxen.<br \/>\nSedan angav jag ocks\u00e5\u00a0<em>overflow: auto<\/em>\u00a0och s\u00e5 skapades en rullningslist.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Du definierar ett omr\u00e5de eller en box p\u00e5 exempelvis 200 pixlar i bredd och 150 pixlar i h\u00f6jd. I detta omr\u00e5de kan du sedan l\u00e4gga de flesta HTML-objekt och du kan l\u00e4gga in bakgrundsf\u00e4rg, bakgrundsbilder och g\u00f6ra andra formateringar av texten. En box \u00e4r med andra ord ett omr\u00e5de med text, bilder eller annan information &#8230; <a title=\"Textboxar och CSS.\" class=\"read-more\" href=\"https:\/\/blogg.improveme.se\/lolla\/2016\/04\/17\/textboxar-och-css\/\" aria-label=\"L\u00e4s mer om Textboxar och CSS.\">L\u00e4s mer<\/a><\/p>\n","protected":false},"author":9652,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[81,2010,2011],"class_list":["post-1851","post","type-post","status-publish","format-standard","hentry","category-design-och-html","tag-bloggar","tag-css","tag-textboxar"],"_links":{"self":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/posts\/1851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/users\/9652"}],"replies":[{"embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/comments?post=1851"}],"version-history":[{"count":0,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/posts\/1851\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/media?parent=1851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/categories?post=1851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogg.improveme.se\/lolla\/wp-json\/wp\/v2\/tags?post=1851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}