Jump to content

Search the Community

Showing results for tags 'nav aside elementInspector'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. 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>
×
×
  • Create New...