vmars316 Posted August 29, 2015 Share Posted August 29, 2015 Hello & Thanks , I am trying to layout my webpage with a <nav>(float:left) and a <aside>(float:right) . I put colored borders/padding etc., so as to make it easy to see the different sections . I would like to lay it out without using the twoCols trick . Also , i'm using Chrome with ElementInspector turned on . When I get it all layed out using ElementInspector , and then edit the page to match , when I refresh page , with the newly edited values are all changed , the browser changes it all back , so that it looks lousy again . Can someone please show me what I am doing wrong . And show me how get <nav> and <aside> working properly . Thanks..vm <!DOCTYPE html> <!-- PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> --><html><head><title>Html Semantics Tags</title><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>SemanticHtml5-Kompozer-01</title><!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style> /*html5 semantics tags */article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }/* light css reset */<!-- * { margin : 0; padding : 0; } -->h2, h3, h4, h5, p, ul, ol { margin : 0 20px; padding : .5em 0; }img { border: 8px; border-color:red}/* =page level container */#pageContainer {height:auto;}#pageHeader {position:relative;width:96%; height:auto;}#contentContainer {<!-- margin: 0px; -->padding-top: 10px;padding-bottom: 10px;}#pageNav{float:left;width:20%}#pagesection {padding-bottom: 20px;width:100%; <!-- position: relative; -->float:none}#pageAside{float:right; width:20%}#sectionFooter {padding-top: 10px;padding-bottom: 20px;position: relative;clear:both; /*+*/}#pageFooter {padding-bottom: 20px;width:96%;position: relative;clear:both; /*+*/}/* Clear Floated Elements */.clearfix:before, .clearfix:after {content: "0020"; display: block; height: 0; visibility: hidden;}.clearfix:after { clear: both; }.clearfix { zoom: 1; }* + * {margin: 8px;}</style></head><body style="width:960px; height:1024px;"><div id="pageContainer" style="width:950px; height:960; border-style: solid; border-width: 5px; border-color:red";> <h1>div id="pageContainer"</h1> <header id="pageHeader" style="height:50px; border-style: solid; border-width: 4px; border-color:green";><h1>id="pageHeader"</h1></header> <section id="contentContainer" style="width:900; height:400; border-style: solid; border-width: 4px; border-color:blue";><h1>section id="contentContainer"</h1> <nav id="pageNav" style="width:auto; height:auto; border-style: solid; border-width: 3px; border-color:orange"; ><h1>id="pageNav"</h1></nav><br><br> <section id="pageSection" style="width:400px; height:200; border-style: solid; border-width: 4px; border-color:green";><h1>id="pageSection"</h1> <header class="sectionHeader" style="width:auto; height:auto; border-style: solid; border-width: 2px; border-color:orange";><h1>class="sectionHeader"</h1></header> <article class="sectionArticle" style="width:auto; height:auto; border-style: solid; border-width: 2px; border-color:orange";><h1>class="sectionArticle"</h1> </article> <footer class="sectionFooter" style="width:auto; height:auto; border-style: solid; border-width: 2px; border-color:orange";><h1>class="sectionFooter"</h1></footer> </section> <aside id="pageAside" style="width:auto; height:auto; border-style: solid; border-width: 3px; border-color:green";><h1>id="pageAside"</h1></aside> </section> <!-- id="contentContainer" --> <footer id="pageFooter" style="width:auto; height:auto; border-style: solid; border-width: 4px; border-color:blue";><h1>id="pageFooter"</h1> <figure><img src="html5pagelayout.png" height="200" width="200"><figcaption>"html5pagelayout.png"</figcaption></footer> </div> <!-- id="pageContainer" --></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 29, 2015 Share Posted August 29, 2015 Just to point out<!-- html comment tag -->/* css comment tag */They don't work for both html or css, which maybe causing the problem you are having. Link to comment Share on other sites More sharing options...
vmars316 Posted August 29, 2015 Author Share Posted August 29, 2015 Ok , I'll check it out.. Thanks.. Link to comment Share on other sites More sharing options...
vmars316 Posted August 29, 2015 Author Share Posted August 29, 2015 Ok dsonesukI checked each one , and they are ok . Good idea though . Thanks.. Link to comment Share on other sites More sharing options...
vmars316 Posted August 29, 2015 Author Share Posted August 29, 2015 I made nav and aside smaller , and added Boilerplate . Not much difference . Still can't get nav and aside to float: . <!doctype html><html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>BP-ColorSectionBorders-01.html</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!-- Place favicon.ico in the root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.8.3.min.js"></script><style> /* html5 semantics tags */article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }/* light css reset */<!-- * { margin : 0; padding : 0; } -->h2, h3, h4, h5, p, ul, ol { margin : 0 20px; padding : .5em 0; }img { border: 8px; border-color:red}/* =page level container */#pageContainer {}#pageHeader {position:relative;}#contentContainer {<!-- margin: 0px; -->padding-top: 10px;padding-bottom: 10px;position:relative;}#pageNav{float:left;}#pagesection {padding-bottom: 10px;<!-- position: relative; float:none -->}#pageAside{float:right; }#sectionFooter {padding-top: 10px;padding-bottom: 10px;position: relative;clear:both; /* + */}#pageFooter {padding-bottom: 10px;position: relative;clear:both; /* + */}/* Clear Floated Elements */.clearfix:before, .clearfix:after {content: "0020"; display: block; height: 0; visibility: hidden;}.clearfix:after { clear: both; }.clearfix { zoom: 1; }* + * {margin: 8px;}</style> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content below here --><!-- <p>Hello world! This is HTML5 Boilerplate.</p> --><div id="pageContainer" style="width:1024px; height:1460px; border-style: solid; border-width: 5px; border-color:red";> <h4>div id="pageContainer"</h4> <header id="pageHeader" style="width:96%; height:100px; border-style: solid; border-width: 4px; border-color:green";><h4>id="pageHeader"</h4></header> <section id="contentContainer" style="width:900px; height:400px; border-style: solid; border-width: 4px; border-color:blue";><h4>section id="contentContainer"</h4> <nav id="pageNav" style="width:100px; height:100px; border-style: solid; border-width: 3px; border-color:orange"; ><h4>id="pageNav"</h4></nav><!-- <br><br><br> --> <section id="pageSection" style="left:300px; width:400px; height:250px; border-style: solid; border-width: 4px; border-color:green";><h4>id="pageSection"</h4> <header class="sectionHeader" style="width:auto; height:auto; border-style: solid; border-width: 2px; border-color:orange";><h4>class="sectionHeader"</h4></header> <article class="sectionArticle" style="width:auto; height:auto; border-style: solid; border-width: 2px; border-color:orange";><h4>class="sectionArticle"</h4> </article> <footer class="sectionFooter" style="width:auto; height:auto; border-style: solid; border-width: 2px; border-color:orange";><h4>class="sectionFooter"</h4></footer> </section> <aside id="pageAside" style="width:200; height:100px; border-style: solid; border-width: 3px; border-color:green";><h4>id="pageAside"</h4></aside> </section> <!-- id="contentContainer" --> <footer id="pageFooter" style="width:900px; height:300px; border-style: solid; border-width: 4px; border-color:blue";><h4>id="pageFooter"</h4> <figure><img src="html5pagelayout.png" height="200" width="200"><figcaption>"html5pagelayout.png"</figcaption></footer> </div> <!-- id="pageContainer" --> <!-- Add your site or application content above here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"></script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='https://www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X','auto');ga('send','pageview'); </script> </body></html> Thanks.. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 29, 2015 Share Posted August 29, 2015 (edited) You STILL have html comments in css.You can't float a floated element below a block element (pageSection) and expect it to merge side by side with the others in a row, the floated elements should be first, the none floated last.The alternative to swapping #pageSection section is to float it as well.Also you have width: 200; when it should have unit such as width: 200px; see http://w3schools.invisionzone.com/index.php?showtopic=43461&pid=242985&st=0entry242985 post #6 its an old layout example but it still relevant in regards to how to use float. Edited August 30, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
vmars316 Posted August 30, 2015 Author Share Posted August 30, 2015 * Thanks dsonesuk : There was one major key for me: #1 When you said "You can't float a floated element below a block element (pageSection), the floated elements should be first, then the none floated last." That is the statement that unlocked eveverything for me , everything I have been trying to figure out over the last two weeks . VOILA! everything worked . Unfortunately the " https://gsnedders.html5.org/outliner/ " doesn't yet show properly . So I still have some work on that part . Things are looking up . Thank You very much for that , dsonesuk ! Below is the working code & current Outline . <!-- http://w3schools.invisionzone.com/index.php?showtopic=43461&pid=242985&st=0entry242985 --><!DOCTYPE html> <!-- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>-05-Float</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#pageContainer {margin: auto; width: 80%; min-height:550px; background-color:#ff0000;}#contentContainer{ clear:none; min-height:400px; overflow:hidden; margin-bottom: 20px; background-color:#CCFFCC;}#pageNav { float: left; width: 24%; background-color:#CCFF00; margin: auto; min-height: 300px; } #pageAside {float: right; width: 24%; margin: auto; background-color:#CCFF00; min-height: 300px; } #pageSection { width: 50%; margin: auto; background-color:#CCCC00; min-height: 300px;}</style></head><body><div id="pageContainer"> <h1>#pageContainer</h1><div id="contentContainer"> <h1>#contentContainer</h1><nav id="pageNav"><h1>#pageNav</h1></nav> <aside id="pageAside"> <!-- style="float: right; width: 24%; margin: auto; background-color:#CCFF00; min-height: 300px; " --> <h1>#pageAside</h1></aside> <section id="pageSection"><h1>#pageSection</h1></section> </div> <!-- <div class="#contentContainer"> --></div> <!-- <div id="page#Container"> --></body></html> #pageContainer #contentContainer#pageNav #pageAside #pageSection Thanks Again..Vern Link to comment Share on other sites More sharing options...
vmars316 Posted August 30, 2015 Author Share Posted August 30, 2015 You STILL have html comments in css. Oh , do you mean "You STILL have html comments WITHIN css." Thanks.. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 30, 2015 Share Posted August 30, 2015 within or in its STILL css styling coding with html comment tags, which should not be there. Link to comment Share on other sites More sharing options...
vmars316 Posted August 30, 2015 Author Share Posted August 30, 2015 Ok , gotcha . Thanks.. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now