CSS height property use in Fluid grid layout
hi, i'm totally new fluid grid layout , got started in it. have div tag has 5px height , sucessfully applied , seem fine on tablet landscape (1024x768) , small tablet landscape (800x600), nevertheless isn't displaying on mobile portrait (320x480), mobile landscape (480x320), small tablet portrait (600x800) , tablet portrait (768x1024).
my coding below
index.html
<!doctype html> <!--[if lt ie 7]> <html class="ie6 oldie"> <![endif]--> <!--[if ie 7]> <html class="ie7 oldie"> <![endif]--> <!--[if ie 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt ie 8]><!--> <html class=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>untitled document</title> <link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css"> <link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css"> <!-- learn more conditional comments around html tags @ top of file: paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ following if you're using customized build of modernizr (http://www.modernizr.com/): * insert link js here * remove link below html5shiv * add "no-js" class html tags @ top * can remove link respond.min.js if included mq polyfill in modernizr build --> <!--[if lt ie 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="fluid.grid.layout/respond.min.js"></script> </head> <body> <div class="gridcontainer clearfix"> <div id="layoutdiv1"></div> </div> </body> </html>
boilerplate.css
@charset "utf-8"; /* /* * html5 ✰ boilerplate * * follows result of research on cross-browser styling. * credit left inline , big nicolas gallagher, jonathan neal, * kroc camen, , h5bp dev community , team. * * detailed information css: h5bp.com/css * * dreamweaver modifications: * 1. commented out selection highlight * 2. removed media queries section (we add our own in separate file) * * ==|== normalize ========================================================== */ /* ============================================================================= html5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= base ========================================================================== */ /* * 1. correct text resizing oddly in ie6/7 when body font-size set using em units * 2. force vertical scrollbar in non-ie * 3. prevent ios text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.231; } body, button, input, select, textarea { font-family: sans-serif; color: #222; } /* * remove text-shadow in selection highlight: h5bp.com/i * these selection declarations have separate * also: hot pink! (or customize background color match design) */ /* dreamweaver: uncomment these if want customize selection highlight *::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } *::selection { background: #fe57a1; color: #fff; text-shadow: none; } */ /* ============================================================================= links ========================================================================== */ { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } /* improve readability when focused , hovered in browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* improve readability of pre-formatted text in browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* position subscript , superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= embedded content ========================================================================== */ /* * 1. improve image quality when scaled in ie7: h5bp.com/d * 2. remove gap between images , borders on image containers: h5bp.com/e */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * correct overflow not hidden in ie9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* indicate 'label' shift focus associated form element */ label { cursor: pointer; } /* * 1. correct color not inheriting in ie6/7/8/9 * 2. correct alignment displayed oddly in ie6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; } /* * 1. correct font-size not inheriting in browsers * 2. remove margins in ff3/4 s5 chrome * 3. define consistent vertical alignment display in browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. define line-height normal match ff3/4 (set using !important in ua stylesheet) * 2. correct inner spacing displayed oddly in ie6/7 */ button, input { line-height: normal; *overflow: visible; } /* * reintroduce inner spacing in 'table' avoid overlap , whitespace issues in ie6/7 */ table button, table input { *overflow: auto; } /* * 1. display hand cursor clickable form elements * 2. allow styling of clickable form elements in ios */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* * consistent box sizing , appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * remove inner padding , border in ff3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. remove default vertical scrollbar in ie6/7/8/9 * 2. allow vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* colors form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ==|== primary styles ===================================================== author: ========================================================================== */ /* ==|== non-semantic helper classes ======================================== please define styles before section. ========================================================================== */ /* image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* hide both screenreaders , browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* hide visually, have available screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* extends .visuallyhidden class allow element focusable when navigated via keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* hide visually , screenreaders, maintain layout */ .invisible { visibility: hidden; } /* contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* ==|== print styles ======================================================= print styles. inlined avoid required http connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* don't show links images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }
style.css
@charset "utf-8"; /* simple fluid media note: fluid media requires remove media's height , width attributes html http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* ie 6 not support max-width default width 100% */ .ie6 img { width:100%; } /* dreamweaver fluid grid properties ---------------------------------- dw-num-cols-mobile: 4; dw-num-cols-tablet: 8; dw-num-cols-desktop: 10; dw-gutter-percentage: 25; inspiration "responsive web design" ethan marcotte http://www.alistapart.com/articles/responsive-web-design , golden grid system joni korpi http://goldengridsystem.com/ */ /* mobile layout: 480px , below. */ .gridcontainer { margin-left: auto; margin-right: auto; width: 85.5%; padding-left: 2.25%; padding-right: 2.25%; } #layoutdiv1 { clear: both; float: left; margin-left: 0; width: 100%; height:5px; display: block; } /* tablet layout: 481px 768px. inherits styles from: mobile layout. */ @media screen , (min-width: 481px) { .gridcontainer { width: 97.5%; padding-left: 1.25%; padding-right: 1.25%; } #layoutdiv1 { clear: both; float: left; margin-left: 0; width: 100%; height:5px; display: block; } } /* desktop layout: 769px max of 1232px. inherits styles from: mobile layout , tablet layout. */ @media screen , (min-width: 769px) { .gridcontainer { width: 98%; max-width: 1232px; padding-left: 1%; padding-right: 1%; margin: auto; } #layoutdiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; height:5px; background-color:#fbb829; } }
respond.min.js
/*! respond.js v1.0.1pre: min/max-width media query polyfill. (c) scott jehl. mit/gplv2 lic. j.mp/respondjs */ (function(e,h){e.respond={};respond.update=function(){};respond.mediaqueriessupported=h;if(h){return}var u=e.document,r=u.documentelement,i=[],k=[],p=[],o={},g=30,f=u.getelementsbytagname("head")[0]||r,b=f.getelementsbytagname("link"),d=[],a=function(){var b=b,w=b.length,z=0,y,x,a,v;for(;z<w;z++){y=b[z],x=y.href,a=y.media,v=y.rel&&y.rel.tolowercase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.stylesheet&&y.stylesheet.rawcsstext){m(y.stylesheet.rawcsstext,x,a);o[x]=true}else{if(!/^([a-za-z]+?:(\/\/)?)/.test(x)||x.replace(regexp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:a})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(g,v,x){var e=g.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),h=e&&e.length||0,v=v.substring(0,v.lastindexof("/")),w=function(i){return i.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!h&&x,b=0,a,c,d,z,f;if(v.length){v+="/"}if(y){h=1}for(;b<h;b++){a=0;if(y){c=x;k.push(w(g))}else{c=e[b].match(/@media ([^\{]+)\{([\s\s]+?)$/)&®exp.$1;k.push(regexp.$2&&w(regexp.$2))}z=c.split(",");f=z.length;for(;a<f;a++){d=z[a];i.push({media:d.match(/(only\s+)?([a-za-z]+)(\sand)?/)&®exp.$2,rules:k.length-1,minw:d.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parsefloat(regexp.$1),maxw:d.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parsefloat(regexp.$1)})}}j()},l,q,j=function(e){var v="clientwidth",x=r[v],d=u.compatmode==="css1compat"&&x||u.body[v]||x,z={},c=u.createdocumentfragment(),b=b[b.length-1],w=(new date()).gettime();if(e&&l&&w-l<g){cleartimeout(q);q=settimeout(j,g);return}else{l=w}for(var y in i){var f=i[y];if(!f.minw&&!f.maxw||(!f.minw||f.minw&&d>=f.minw)&&(!f.maxw||f.maxw&&d<=f.maxw)){if(!z[f.media]){z[f.media]=[]}z[f.media].push(k[f.rules])}}for(var y in p){if(p[y]&&p[y].parentnode===f){f.removechild(p[y])}}for(var y in z){var g=u.createelement("style"),a=z[y].join("\n");g.type="text/css";g.media=y;if(g.stylesheet){g.stylesheet.csstext=a}else{g.appendchild(u.createtextnode(a))}c.appendchild(g);p.push(g)}f.insertbefore(c,b.nextsibling)},n=function(v,x){var w=c();if(!w){return}w.open("get",v,true);w.onreadystatechange=function(){if(w.readystate!=4||w.status!=200&&w.status!=304){return}x(w.responsetext)};if(w.readystate==4){return}w.send(null)},c=(function(){var v=false;try{v=new xmlhttprequest()}catch(w){v=new activexobject("microsoft.xmlhttp")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addeventlistener){e.addeventlistener("resize",s,false)}else{if(e.attachevent){e.attachevent("onresize",s)}}})(this,(function(f){if(f.matchmedia){return true}var e,i=document,c=i.documentelement,g=c.firstelementchild||c.firstchild,h=!i.body,d=i.body||i.createelement("body"),b=i.createelement("div"),a="only all";b.id="mq-test-1";b.style.csstext="position:absolute;top:-99em";d.appendchild(b);b.innerhtml='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertbefore(d,g)}b.removechild(b.firstchild);e=b.offsetwidth==9;if(h){c.removechild(d)}else{d.removechild(b)}return e})(this));
i appreciate efforts me solve problem... thank in advance
height determined content. can't think of single reason have div height of 5px because nothing fit inside small space without problems.
as why doesn't show in other devices, must have put style tablet css code instead of default mobile css code.
fluid grids build mobile (applied everything) specific rules tablets, desktops.
best advice, use fluid grids layout only. use separate css file content styles.
hope helps,
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment