Jump to content

Need help to layout <nav> and <aside> sections , html5 .

vmars316

By vmars316
in HTML/XHTML

 Share

Recommended Posts

vmars316 Member

vmars316

Posted
Posted

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
vmars316 Member

vmars316

Posted
  • Author
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (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 by dsonesuk
Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted
* 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
    1. #pageNav	
      2. 

    2. #pageAside	
      3. 

    3. #pageSection
      4. 

    

    • 





 


Thanks Again..Vern



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				

					

					
					





					
					
					
				
			
			



		

	


	
	
	
	
	
		
	

			
				
				



	
	
		

			
				
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 account
					

					

						
Sign in

						
Already have an account? Sign in here.

						Sign In Now
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
					

				
                

                




				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •