vmars316 Posted August 16, 2015 Share Posted August 16, 2015 Hello & Thanks , Need some help on how to layout my html page . Html/table vs div vs html5/table vs css/table . Basically , I want Page to look like . Table: [ Cell ] [ Cell ] [ Cell ] [Cell] [ Cell ] [ Cell ] I'd rather not use Headers H1............H6 . Of 'Tables html/div/html5/css' which is most compatible for all browsers , And which may have the most longivity , as far as standards go ? I would like to be able to pick one (html/div/html5/css) and stick with it down the road . Thanks...Vern Link to comment Share on other sites More sharing options...
Ingolme Posted August 16, 2015 Share Posted August 16, 2015 You seem to be making distinctions where there aren't any. CSS isn't expected to change for a long time. The names of the HTML elements you use don't have any effect on the layout as long as you're using CSS properly You should be using <h1> - <h6> elements to structure your content, Google and other search engines will give you a better ranking if you use them properly. If you don't like their default style, just change its appearance with CSS. The most modern practice for layout is to use float, width, margin and padding to lay things out on the page. Be sure to use the appropriate elements for the context, such as <section>, <article>, <p>, <figure> and so on. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2015 Share Posted August 16, 2015 Tables should only be used to show data in tabular layout, so div would be better option, but with html5 you have new header, aside, footer, section elements which would be better option than the div elements if these are used for these specific areas.I don't understand about headers, these should only be used as main title (h1) and lower sub title importance for content of the page, these also help for SEO purposes. Link to comment Share on other sites More sharing options...
dauruk0512 Posted August 16, 2015 Share Posted August 16, 2015 i suggest to you using div cause div can customize what we what but you should understand CSS selector TAG HTML Then if you are getting progress let's move html5 like moderator above said using tag header, article, footer it standar for designer Link to comment Share on other sites More sharing options...
vmars316 Posted August 16, 2015 Author Share Posted August 16, 2015 Tables should only be used to show data in tabular layout, so div would be better option, but with html5 you have new header, aside, footer, section elements which would be better option than the div elements if these are used for these specific areas. The most modern practice for layout is to use float, width, margin and padding to lay things out on the page. Be sure to use the appropriate elements for the context, such as <section>, <article>, <p>, <figure> and so on. Ok , it seems that you are both aiming me at html5 . Is this correct ? With the code below , I get pretty much what I want . <!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black;}</style></head><body><table style="width:100%"> <tr> <th>Welcome to myFavs Bookmark Manager !</th> </tr></table><table style="width:100%"> <tr> <td width="40%">myFavs.png</td> <td width="60%">The width attribute is not supported in HTML5. Use CSS instead. </td> </tr></table><table style="width:100%"> <tr> <td width="10%">Home<br>About<br>Links</td> <td width="90%">The width attribute is not supported in HTML5. Use CSS instead.</td> </tr></table><table style="width:100%"> <tr> <td width="100%">The width attribute is not supported in HTML5. Use CSS instead.</td> </tr></table><p>The width attribute is not supported in HTML5. Use CSS instead.</p></body></html> But will my above code be obsolete someday ? And could it be frowned upon by Google or others ? Likewise for html5 . ? Also , can html,css,html5,javascript,dhtml,xhtml all be used in the same webpage ? Thanks...Vern Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2015 Share Posted August 16, 2015 Again tables should not be used for layout of webpage, only for showing informatoin in tabular format, it renders differently to other elements by processing/showing table cell content only when closig table tag </table> is rendered.Html is used in all webpages including recent doctypes x/html 4 which was then superceded by html5, dhtml is dynamic html usually refers to a webpage using code such as javscript to produce content or enhance the website.CSS is used for presentational purposes, using css externally, preferably NOT inline as you have, using id or class to reference specific elements that makes design easier to maintain. 1 Link to comment Share on other sites More sharing options...
vmars316 Posted August 17, 2015 Author Share Posted August 17, 2015 Thanks dsonesuk , I am starting to get the picture . Could you show me a simple html/css presentation of the following structure : [ Cell ] [ Cell ] [ Cell ] [Cell] [ Cell ] [ Cell ] Thanks...vm Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2015 Share Posted August 17, 2015 <!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; }section { background-color:#eeeeee;overflow: hidden; padding:10px;}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><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><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> Link to comment Share on other sites More sharing options...
vmars316 Posted August 17, 2015 Author Share Posted August 17, 2015 Thanks dsonesuk , this is a great help ! ...vm Link to comment Share on other sites More sharing options...
vmars316 Posted August 18, 2015 Author Share Posted August 18, 2015 Hi dsonesuk , I have spent the entire day scouring the internet trying to figure out what all this means . .two_col {width: 50%; float: left; background-color: lime; }.two_col + .two_col {background-color: blue;}.two_col > * {padding: 10px; } I see the results of course , but don't understand what applies to what . And I am quite surprised that <div and <p don't cause a line break , or <br> or some such . Can you explain all that to me , or aim me at a w3schools example . Thanks...vm Link to comment Share on other sites More sharing options...
Ingolme Posted August 18, 2015 Share Posted August 18, 2015 When a block element has float applied to it, it can be placed horizontally next to other elements. As for the meaning of the CSS selectors, they're all explained in the selectors reference. 1 Link to comment Share on other sites More sharing options...
vmars316 Posted August 18, 2015 Author Share Posted August 18, 2015 Thanks Ingolme , Just what I needed ! ...vm Link to comment Share on other sites More sharing options...
vmars316 Posted August 18, 2015 Author Share Posted August 18, 2015 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 Link to comment Share on other sites More sharing options...
vmars316 Posted August 18, 2015 Author Share Posted August 18, 2015 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 Link to comment Share on other sites More sharing options...
vmars316 Posted August 18, 2015 Author Share Posted August 18, 2015 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 Link to comment Share on other sites More sharing options...
Hilal Posted August 24, 2015 Share Posted August 24, 2015 You can make layout on table which is visually same as dive 80%. Link to comment Share on other sites More sharing options...
vmars316 Posted August 24, 2015 Author Share Posted August 24, 2015 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 Link to comment Share on other sites More sharing options...
vmars316 Posted August 24, 2015 Author Share Posted August 24, 2015 (edited) 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 . 1st header City Gallery nav 1st section London 2nd section Paris 1st article 2nd article [*]3rd section Tokyo 3rd article Places to see [*]1st footer [*]2nd header City Gallery nav 1st section London 2nd section Paris [*]3rd section Tokyo 3rd article Places to see [*]2nd footer Sorry about the intermittent large font , I couldn't fix it . Here is the code : <!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:20%; float:left; padding:5px; }section { width:20%; float:left; padding:10px; position:relative;}footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }</style></head><body><header><h1>1st header of 'City Gallery'</h1></header><nav > <h1>nav</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul></nav><section><h1>1st section 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><section> <h1>2nd section Paris</h1> <article> <h1>1st article</h1> </article> <article> <h1>2nd article</h1> </article></section><section> <h1>3rd section Tokyo</h1> <article> <h1>3rd article Places to see</h1> <aside> <h1>aside contacts</h1></aside> </section><footer> <h1>1st footer</h1>Copyright © W3Schools.com</footer> <br> <p>Needs 'nav' above and a new 'header' here (as coded without div s) in order to use a 2nd 'nav' . <br> Of course I could just make the 1st 'footer' invisible . </p> <br><header><h1>2nd header of 'City Gallery'</h1></header> <nav> <h1>nav</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul></nav><section><h1>1st section 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><section> <h1>2nd section Paris</h1> <article> <h1>1st article</h1> </article> <article> <h1>2nd article</h1> </article></section><section> <h1>3rd section Tokyo</h1> <article> <h1>3rd article Places to see</h1> <aside> <h1>aside contacts</h1></aside> </section><footer> <h1>2nd footer</h1>Copyright © W3Schools.com</footer></body> I would expect that google would read it ok , and not penalize that page . If anyone sees any fault with my code , please eplain it to me . Thanks All ..Vern aside contacts 1st article 2nd article aside contacts Edited August 24, 2015 by vmars316 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