Html/css Template

Shaan_007 · January 8, 2016

My question might sound stupid since i am a beginner

i have rebuilt a old template using my own code now i want to know if there is anything wrong with my code bcoz i sometime feel that i manage to get result but there is something wrong with my code

No Harsh Words Please

ThankYou

this is the template----> http://www.dreamtemplate.com/templates/777/0776.html

and this is my code

<!doctype html>
<html lang="en">
<head>
<style>
body {
margin: 0;
padding: 0;
color: #666;
background-color: #3F332B;
 
}
#wrap {
width: 600px;
margin: 0 auto;
height: 100%;
border: 1px solid black;
background-color: #fff;
margin-top: 5px;
margin-bottom: 5px;
}
header {
background-image: url('header.jpg');
height: 300px;
width: 581px;
margin: auto;
margin-top: 20px;
}
header h1 {
text-align: center;
position: relative;
top: 260px;
color: #fff;
}
ul {
list-style: none;
text-transform: lowercase;
}
nav li {
display: inline;
padding: 35px;
}
a {
color: #333;
 
}
section {
margin: 10px;
}
section h1 {
 
margin-left: 30px;
color: #3F332B;
 
}
section  p {
padding: 5px;
color: #3F332B;
}
footer p {
text-align: center;
font-size: 20px;
border: 2px solid black;
margin-bottom: 0px;
background-color: #1D140E;
color: #C0C0C0;
 
}
a:hover {
text-decoration: none;
}
</style>
</head>
 
<body>
<div id="wrap">
<header>
<h1>Your Sport Site</h1>
</header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Link</a></li>
</ul>
</nav>
 
<section>
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
 
<footer>
<p>Copyright © 2005 | All Rights Reserved </p>
</footer>
 
</div>
</body>
</html>

COBOLdinosaur · January 8, 2016

No harsh words basically translates to I want praise, not an honest evaluation.

So we can just deal with the fact that the template produces over 140 error before the validator gives up and quits:

https://validator.w3.org/check?uri=http%3A%2F%2Fwww.dreamtemplate.com%2Ftemplates%2F777%2F0776.html&charset=%28detect+automatically%29&doctype=Inline&group=0

That ia with an extremely weak transitional DOCTYPE; I hate to think what it would report if the page used a modern strict doctype.

As for the code you posted, I don't no what that has to do with the template. The code does not really do anything except demonstrate a misunderstanding of the correct semantics of HTML5 like sticking ul (meaning a list of items) inside a nav (meaning a list of navigation links).... it has to be one or the other.

Don E · January 8, 2016

No harsh words basically translates to I want praise, not an honest evaluation.

Not necessarily. It could just mean he wants a tactful honest evaluation.

dsonesuk · January 8, 2016

The code does not really do anything except demonstrate a misunderstanding of the correct semantics of HTML5 like sticking ul (meaning a list of items) inside a nav (meaning a list of navigation links).... it has to be one or the other.

I dnn't know what you mean by this? Nav is where you place your navigation, and the norm used method to produce navigation is to use unordered list because of its hierarchical structure makes it perfect for creating menu which can be produce dropdown submenus when required.

Shaan_007 · January 9, 2016

No harsh words basically translates to I want praise, not an honest evaluation.

So we can just deal with the fact that the template produces over 140 error before the validator gives up and quits:

https://validator.w3.org/check?uri=http%3A%2F%2Fwww.dreamtemplate.com%2Ftemplates%2F777%2F0776.html&charset=%28detect+automatically%29&doctype=Inline&group=0

That ia with an extremely weak transitional DOCTYPE; I hate to think what it would report if the page used a modern strict doctype.

As for the code you posted, I don't no what that has to do with the template. The code does not really do anything except demonstrate a misunderstanding of the correct semantics of HTML5 like sticking ul (meaning a list of items) inside a nav (meaning a list of navigation links).... it has to be one or the other.

first of all buddy there is a difference between what i said "No harsh Words" And What you read "PRAISE"

and i don't know about template i just searched it on google

and i know the code i post above has many errors and or may be whole code is wrong that is why i posted it here so that you guys can help me

anyways thanks for the reply i appreciate

Shaan_007 · January 9, 2016

Not necessarily. It could just mean he wants a tactful honest evaluation.

Exactly

COBOLdinosaur · January 9, 2016

and the norm used method to produce navigation is to use unordered list because of its hierarchical structure...

Is there somewhere in the W3C specifications that applies semantics making a list inside a nav semantically correct? In html4 and XHTML we used unordered list because there was no better alternative. The nav tag was introduced in HTML5 to address the lack of a structure that was specifically for navigation links.

If this was a multilevel dropdown menu then there would be some justification for the UL, but I cannot see any logical or practical reason to nest ul inside of nav thus creating an accessibility issues by confusing screen readers trying to comprehend the incomplete semantic model of HTML5.

Ingolme · January 9, 2016

The <nav> element is used to indicate a region on the page used for navigation. It is actually semantically correct and preferable to indicate that you have a list of links inside your navigation area, hence a <ul> inside the <nav> region.

Is there something in the W3C specifications that specifies that a list inside a navigation region is incorrect? The W3C can't make a comprehensive list of every possible situation that might occur by using semantic elements in conjunction with each other. Unlike with language syntax, there is not specific strict set of rules governing the semantic web because it's all about giving meaning to the content, which is subject to interpretation.

COBOLdinosaur · January 9, 2016

Try that with a screen reader, and tell me it makes sense.

COBOLdinosaur · January 9, 2016

Actually the definition in the specification defines it pretty narrowly:

"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links."

The fact that neither w3c or WHATWG provide correct usage for nav/ul relationships is indicative of them not being considered for use together unlike the kind of detail for the relationship for figure and pre or figure and img which are expected to be used together. so will it get misused as a wrapper for UL? Probably; the percentage of pages on the internet that actually validate is such that semantics are irrelevant for most sites anyway; and the only user who care are those who to use enabling devices to use web sites.

thescientist · January 9, 2016

The fact that neither w3c or WHATWG provide correct usage for nav/ul relationships is indicative of them not being considered for use together

You're entitled to your interpretation then, but I don't think most would see it that way. i personally have started using <ul> within <nav> and find it to be semantic for my needs and for others reading the same code.

To get the focus back on the OP, what are your expectations with this code? Are you looking for this to be responsive design, or just for desktop? Typically, the best way to at least ensure the code works as expected is to run it on the browsers / devices you want to support and make sure it passes the new HTML5 DTD validation checker. Aside from that, I don't see you using positioning, which is good. It is the number one bad habit I see new developers get into, so make sure you only use it when appropriate.

Ingolme · January 9, 2016

I see nothing in that paragraph explicitly stating that you can't have more than just <a> elements inside a <nav>. It even refers to the <nav> as a section of the page.

In other words, a perfectly good use for the nav could be this structure:

<nav>
  <h2>Area 1</h2>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>

  <h2>Area 2</h2>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

Please do not criticize code from beginners, especially if it isn't clear that they are wrong. I find that most of your posts are actually discouraging beginners from pursuing web development, there are ways to help people learn what's wrong in their code without trying to emotionally scar them.

COBOLdinosaur · January 12, 2016

The nav can contain most other elements which makes it possible to apply a heading, p, or span to label them; unlike ul and ol which cannot contain anything except li elements. So if you want to label a list you have to either do it externally or use the semantically questionable technique of using the first item in the list to define the content of the list.

As for the structure posted what is wrong with:

<nav>
  <h2>Area 1</h2>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
<h2>Area 2</h2>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</nav>

Less to parse; a lighter load for the rendering engine, a more efficient DOM; less code to maintain. With CSS it can be styled for any presentation format that you might need, and requires less complex CSS and is less likely to need scripting support.

I am starting to think that lists are today what the Table was in 15 years ago; a comfort zone where they can continue with antique methods.

Ingolme · January 13, 2016

That's one valid way to use the <nav>, of course, but it has its drawbacks, for example you can't style the elements of the second list differently than the ones in the first list. You also lose the ability to have a hierarchy of links.

You cannot compare this to the usage of tables because the navigation of the page continues to be a list of links and that has not changed with the introduction of the <nav> element.

Here are a few reputable sources that endorse the usage of lists for navigation:

http://html5doctor.com/nav-element/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

http://stackoverflow.com/questions/5544885/should-i-use-uls-and-lis-inside-my-navs

Where are your sources?

COBOLdinosaur · January 14, 2016

for example you can't style the elements of the second list differently than the ones in the first list.

Really nav h2:nth-of-type() is no longer valid ... see this page

as for the list of "reputable sources"... reputation has nothing to do with it. None of them is the authoritative site for setting the standards. If we go back far enough we can probably find "reputable sources" advocating all kinds of things like table layouts, framesets, activeX, and transitional doctypes; all quite legitimately, and with the best of intentions. However web sites present content to attract users and sell adds not set the standards.

The only research I have done is the effect on SEO. When I changed a number of internal link lists from ul to nav the search traffic on those pages increased by 4.6% over the next 6 weeks while the overall increase across my site was 1.7% during the same period. Unfortunately, I just did it out of curiosity instead of serious research and did not set up a control where I changed from nav to ul. So the result does not carry much weight in my mind. I have a couple of clients interested in participating in more detailed testing, so I should be able at some point be able to say whether Google prefers nav, ul, or a nested nav/ul structure.

Ingolme · January 15, 2016

Well, I wouldn't say that's grounds to tell a beginner they're doing it wrong.

All we have right now to determine the semantic meaning of any element is vague descriptions by the W3C and explanations by some of the top web developers. Mozilla is part of the W3C, so I wouldn't take their word lightly.

dsonesuk · January 15, 2016

All examples that I've seen that suggest that you should remove ul list completely, are for one single row of links ONLY (wait.... there is one! but involves wrapping divs with SPAN! A SPAN?????, which at the end, it basically gave you the same structure as ul li). NOT one suggests an alternative if you have a multi hierarchy of links, so unless they include an working better alternative for ALL websites that have been using ul list for many, many, many years now, it just waste of time discussing it, we have no alternative, unless you want a third of the top of page filled with all links available every time on every single page.

COBOLdinosaur · January 16, 2016

While

<ul>

<li> <a> ... etc.

is at least clear on semantics it is a list and if the list contains links I guess they can be treated a item.

However

<nav>

<ul>

<li> <a>... etc

does not make semantic sense because it says this is a list of navigation link; no wait it is a list of items! So it is wrong.

BTW concerning the reputable sites. I am a member of the communities for three of them and the support for list inside of nav is split in those communities.. I was going to let it pass, but if I have to justify pointing out that something is wrong then I guess we need to also clear up the "endorsements" as well.

The issue and debate have little to do with the semantics as it does with maintenance issues because poorly written CSS declarations will have to be changed so developers do not continue to bloat the code with unnecessary ul and li tags that carry styling that should have been inherited from a wrapper. If you look at the supporters of the nested format they are also the one who use things like
#nav ul li a {properties...

instead of #nav a{ properties

The second works for either format, but the first first format ties presentation to content structure and fails if you don't keep the ul and li tags.

Ingolme · January 16, 2016

I don't see how it does not make semantic sense. It is a list of links.

Again, how would you semantically describe a hierarchical menu? Such as

- Home
- Products
  - Product type 1
  - Product type 2
- Blog
  - Category 1
  - Category 2
- About us
  - Our Philosophy
  - Contact information

COBOLdinosaur · January 22, 2016

I would just use a nav for each link list within a div wrapper to cascade the styling I want to use.

<div class="menu">
 <nav>
   <h2> Cat1 </h2>
   <a etc...>
   <a etc...>
  </nav>
 <nav>
   <h2> Cat2 </h2>
   <a etc...>
   <a etc...>
 </nav>
</div>

Edited January 22, 2016 by COBOLdinosaur

dsonesuk · January 23, 2016

I would just use a nav for each link list within a div wrapper to cascade the styling I want to use.
<div class="menu">
 <nav>
   <h2> Cat1 </h2>
   <a etc...>
   <a etc...>
  </nav>
 <nav>
   <h2> Cat2 </h2>
   <a etc...>
   <a etc...>
 </nav>
</div>

That is NOT! what Ingolme asked for? that has only a single hierarchical level.

Ingolme · January 23, 2016

Whatever the correct semantic structure is, my point is that this is not something a beginner needs to be worrying about and there are no grounds to telling them that the way they're doing it is wrong.

COBOLdinosaur · January 25, 2016

my point is that this is not something a beginner needs to be worrying about

Hmmm. at what point do we teach children the right way to cross a street; is it ever alright to just let them learn without guidance. when someone care enough about what they are doing to post in a forum for help with it, then they deserve enough respect to receive an honest response whether it is positive or negative.

With modern browsers and the range of CSS presentation options available then is no menu presentation or effect that cannot be presented in a nav wrapper. If we are going to go to the silly approach of multi-level drop downs it is irrelevant and ul or nav does not matter because the amount of damage a multi-level drop down does is far more than can be mitigated by semantics. It is the single worse way to do navigation in terms of higher bounce rates, lost ad presentation opportunities, lost opportunities to upsell, reduce page exposure for potential backlinks and a reduced footprint in the SE index.

When someone is a novice developer it is not a favor to ignore flaws so they learn bad practices and then need to "unlearn" the bad habits if they decide they want to do the work professionally. If I come across as harsh it is because I care about people struggling to learn what I already know; and I respect them enough to express honest opinions which frequently are not what they want to hear or padded with soft expression to please mods.

Ingolme · January 26, 2016

But we have not even established whether or not what they've done is a flaw. We don't teach people things if we haven't established them as correct yet. From my research, I have seen nothing wrong in the way he was structuring his menu.

I'm not sure where your information is coming from, but many top results in Google searches yield sites with hierarchical menus. There are many reasons why you might want a hierarchical menu, namely that many sites are hierarchically built in the first place. It's always good to organize data to make things easier to access.

I have already provided you with several sources, where are yours? All I have right now supporting your position is your word alone.

COBOLdinosaur · January 26, 2016

many top results in Google searches yield sites with hierarchical menus.

Of course. Why would that not be the case. You will also see top results for pages with no doctype, misspelled titles, no keywords, broken layouts, hundreds of validation errors, and duplicate content. They are all there because because they have enough content of value to be well placed in the index. They are also likely to have been around for a while, be in a specialize niche, carry Google ads, by ads from Google, or are cross-domain login partners. All of which add to Google juice.

I'm only going to give you a single reference where I'm sure you will be impressed by the example and the source:

http://www.w3schools.com/TAgs/tag_nav.asp

When W3C upgraded HTML3.2 to HTML4 it took 4 or 5 years to figure it out and there was enough disagreement that W3C had to create the transitional doctype that made things worse. There is no agreement on most of HTML5 among developers, manufacturers ot W3C itself where the gap between traditional W3C methods and the helter skelter WHATWG approach where anything is allowed that Hixie says is okay. Somewhere down the road it might shake out so one of us (or possibly both us) turns out to be right.

Html/css Template

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in