Jump to content

vmars316

Members
  • Content Count

    398
  • Joined

  • Last visited

Everything posted by vmars316

  1. Hello & Thanks , I would like to know "How to embed a *.mp4 file into html ?" . Is there a better format to use rather than .mp4 ? Thanks...Vern
  2. Yes , i did write it a long time ago : Can someone show me a better way to code it ? Thanks..vm
  3. Hello & Thanks , I have a small DropDownList with 3 options . Problem is when I select , let's say , 2nd option . No probs , a new page is opened . If I click on option 1 or 3 , no probs . However , if I click on 2nd option again , instead of clicking on 1 or 2 , no new page is opened . Is there a way to correct this , so that clicking on whatever always opens a new window . Thanks...Vern <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>myFavs-HtmlProbs.html</title> <meta name="Generator" content="PureBasic"> <meta name="Description" content="Your description here..."> <meta name="Description" content="...Created by myFavs % PureBasic..."> <style type="text/css"> </style> </head> <body text="#000000" style="background-color:#A69E80; text-align:center;"> <br> <br> <br> <!--dd <div style=--> <table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0"> <tr style="text-align:center"> <!-- EXAMPLE: <MenuName="aaMost-Used"> --> <!-- rgb(250,240,255) --> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background- color:rgb(231,169,126);" name="menu" onchange="window.open(this.value)"> <option selected="0" value="">aaMost-Used</option> <option value="http://alternativeto.net/">AlternativeToSoftwares</option> <option value="https://www.biblegateway.com/reading-plans/chronological/today? version=NLT">One Year Chronological Bible NLT</option> <option value="http://www.portablefreeware.com/">portablefreeware.com/</option> </select></td></tr></table><br></body></html>
  4. Is webMatrix free , is its cloud free ? ..vm
  5. Oh , do you mean "You STILL have html comments WITHIN css." Thanks..
  6. * 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
  7. 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..
  8. Ok dsonesukI checked each one , and they are ok . Good idea though . Thanks..
  9. 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>
  10. Aha ! I tried both of your helps , within the context of my html , still neither of them worked . Turns out there was a <link href= here : <meta charset="utf-8" /><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><title></title><meta name="keywords" content="" /><meta name="description" content="" /><link href="style_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2.css" rel="stylesheet"> <style> When I commented it out , <meta charset="utf-8" /><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><title></title><meta name="keywords" content="" /><meta name="description" content="" /><!-- <link href="style_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2.css" rel="stylesheet"> --><style> Then this strong {font: 16px bolder; } /* some of the values that can be used normal/bold/bolder/lighter */.strong {font: 32px bolder; /* some of the values that can be used normal/bold/bolder/lighter */} all started working . Hmm.. Does that mean that rel="stylesheet" takes precedence over local <style> ? Thanks..vm
  11. Hello & Thanks , I Need help: using <strong> in html5 css has this for strong .strong {font : strong;} and html has this <strong class="strong">Content:</strong> Sed placerat accumsan ligula. Pls , See code below: What am I doing wrong? <!DOCTYPE html><!-- http://csslayoutgenerator.com//~Notepad_vmProjects/~PerfectOutlines-Html/PerfectOutline-index_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2-Short.html--><html><head> <meta charset="utf-8" /> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="style_html5_liq_lcr_s2_m1000_hh75_fh50_eh_2.css" rel="stylesheet"><style>/* Eric Meyer's CSS Reset */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}/* End of Eric Meyer's CSS Reset *//* ===============Begin myStuff================ */article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block;}body { font: 12px/18px Arial, sans-serif;}/* Begin of styles for the demo (you can remove them) */a.expand { width: 90px; display: block; margin: 10px 0 0;}a.expand:hover { height: 500px;}/* End of of styles for the demo */.wrapper { min-width: 1000px; max-width: 1000px; margin: 0 auto;}.strong {font : strong;}/* Header-----------------------------------------------------------------------------*/.header { height: 75px; background: #FFE680;}/* Middle-----------------------------------------------------------------------------*/.middle { border-left: 250px solid #B5E3FF; border-right: 250px solid #FFACAA; position: relative;}.middle:after { display: table; clear: both; content: '';}.container { width: 100%; float: left; overflow: hidden; margin-right: -100%;}.content { padding: 0 20px;}/* Left Sidebar-----------------------------------------------------------------------------*/.left-sidebar { float: left; width: 250px; position: relative; background: #B5E3FF; left: -250px;}/* Right Sidebar-----------------------------------------------------------------------------*/.right-sidebar { float: right; margin-right: -250px; width: 250px; position: relative; background: #FFACAA;}/* Footer-----------------------------------------------------------------------------*/.footer { height: 50px; background: #BFF08E;}</style> </head><body><div class="wrapper"> <header class="header"> <strong>Header:</strong> Lorem ipsum dolor sit amet. </header><!-- .header--> <div class="middle"> <div class="container"> <main class="content"> <strong class="strong">Content:</strong> Sed placerat accumsan ligula.<a href="#" class="expand">Expand column</a> </main><!-- .content --> </div><!-- .container--> <aside class="left-sidebar"> <strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc.<a href="#" class="expand">Expand column</a> </aside><!-- .left-sidebar --> <aside class="right-sidebar"> <strong>Right Sidebar:</strong> Integer velit.<a href="#" class="expand">Expand column</a> </aside><!-- .right-sidebar --> </div><!-- .middle--> <footer class="footer"> <strong>Footer:</strong> Mus elit Morbi mus enim lacus. </footer><!-- .footer --></div><!-- .wrapper --></body></html> Thanks..vm
  12. Hello , I have been using Notepad++ lately . But I must say Bluefish new version 2.2 has come a long way since last update . I just downloaded it yesterday . And it does handle html5 very well . http://bluefish.openoffice.nl/index.html Scratch that , kept getting un-viewable htmlPage . So I am looking at BlueGriffon . ...Vern
  13. Thanks All , I have been studying up on html5/css3 . See my resulting code below . Here are the pages I find most useful : http://alistapart.com/article/axiomatic-css-and-lobotomized-owls http://learnlayout.com/toc.html https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html https://gsnedders.html5.org/outliner/ For the examples above , though they are greatly appreciated , I find using the div's andthe two_cols , and table's approach , very confusing . The sequence/positioning of the html code for two_cols I find baffling . So I eventually tried to create an html.page using only the html5 sectioning elements . The acid test of course is , does it Outline correctly (the way I want it to) ? Here is the output of the Outliner (https://gsnedders.html5.org/outliner/) followed by my code .
  14. Thanks Hilal . I tried all sorts of table , div's etc., combinations but nuttin' worked for me . By nuttin' worked , I mean it didn't outline correctly . By outline I mean , the outline of html5/css3 that the browser makes in order to read the info correctly , especially search engines . I will make a general reply (below) to All those who have helped me . Here is the site I submitted my html to , in order to get an Outline of my html . https://gsnedders.html5.org/outliner/ ..vm
  15. Wanted to add somethig , but still having probs with <> Code .
  16. I'll try again with no <code> . Maybe I'll try a Quote . Thanks...
  17. Hello & Thanks , The figure.aside seems to be overlaying my section . Pls , what am I doing wrong ? Thanks...
  18. The <code> has gone wierd on me , so I'll just reply to this Post.
  19. Hello & Thanks , html5/css? From a search engine's perspective , are '<aside> #aside .aside ' equal , ie., treated as the same structure ? Thanks...Vern
  20. Here's the layout that i am looking for . Except i want the aside on the left side . http://www.developer.com/imagesvr_ce/3977/Figure01.png Thanks...vm
  21. This code is closer to But as soon as i add another section I want to modify it so it looks like this: <header > <nav><section> <section > <footer > It shows shows as <header > <nav><section><section> <footer > Pls , how can I fix this ? <!DOCTYPE html><html><head><style>header { background-color:black; color:white; text-align:center; padding:5px; }nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }section { width:350px; float:left; padding:10px; }footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }</style></head><body><header><h1>City Gallery</h1></header><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul>London<br>Paris<br>Tokyo<br></nav><section><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section><footer>Copyright © W3Schools.com</footer></body> Thanks..vm
  22. Hello & Thanks , Still learning via dsonesk 's example code . I want to modify it so it looks like this: <header > <nav><section> <section > <footer > So partial code looks like this (full code follows); <header><h1>City Gallery</h1></header><section><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul></nav><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section></section><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section><footer> Full code here : <!DOCTYPE html><html><head><style>body, html {margin:0; padding: 0}body {background-color: yellow;}#wrapper {width: 80%; max-width: 1280px; margin: 0 auto; }header { background-color:black; color:white; text-align:center; padding:5px; }nav { line-height:30px; background-color:#eeeeee; height:300px;<!-- width:100px; --> width:25% float:left; padding:5px; }section { background-color:#eeeeee; overflow: hidden; padding:10px;<!-- float:left; -->}footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }.two_col {width: 50%; float: left; background-color: lime; }.two_col + .two_col {background-color: blue;}.two_col > * {padding: 10px; }</style></head><body><div id="wrapper"><header><h1>City Gallery</h1></header><section><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul></nav><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section></section><section><h2>sub title</h2><div class="two_col"><h3>sub title</h3><p>...</p></div><div class="two_col"><h3>sub title</h3><p>...</p></div></section><footer>Copyright © W3Schools.com</footer></div></body></html> Can I do this with just the header, nav, section, footer (& maybe aside) elements . Or do I have to use something like .section1 , section2 Thanks..vm
×
×
  • Create New...