I want to get the semantics right within the HTML. I know I'm using a <section> tag when I should be using a <nav> tag, I prefer the word <section> I hope that it's not semantically wrong ?

 

This is two issue I have with the page; I want to randomly position the H1 and H2 tags horizontally. My original plan was to put each H1 & H2 tag in it's own class, I was then informed to do as such.

 

I can't style <h2 class="gallery"><h2>Gallery</h2></div> I've tried and tried, I'm asking for some help, as a book on HTML5 can't give me the answer

 

One more thing the word "skill level" is on two lines I want it one line, in other words "skill level" not skill

level

 

Ps. I buried page links within a word in my post.

 

first of all you have <h2 class=""><h2></h2></div>

This is wrong for two reasons

1) They are not the same tags so will mess up your html

2) why put a h2 in a h2

 

You can just use code like this

<style>
  h2 .left {
    text-align: left;
  }

  h2 .right {
    text-align:right;
  }
</style>
<h2 class="left">Left aligned heading</h2>
<h2 class="right">Right aligned heading</h2>

this might help too http://html5doctor.com/ - although there still seems room for interpretation in many places

The whole idea of the HTML5 elements such as section, nav footer etc are to add semantic meaning to your code. Before these were around almost all elements were a div which has zero semantic meaning.

 

For reasons of usability such as those with difficulties and require screen readers, and for SEO purposes you should use the tag that best describes it's purpose. Avoid using a section tag for navigation, use the nav tag. Article tag for articles. The section tag is for grouping important parts of a page into a section.

It might not look visually different if you ignore this but it's considered bad practice. These tags also make your code more readable to others developers.

doesn't it also help with screen readers too? with the outline and aria roles etc? (should be working so no time to check )

I updated the page.

 

 

h4.skillword {

margin: 0;

right: 0;

width: 150px;

}

Has a margin on the right, it is inheriting how can I find out ?

We need to see more of your css.

 

what is the right property for? This property only works with positioning set to something other than static. It doesn't affect margins if that's what you intended it for.

We need to see more of your css.

 

what is the right property for? This property only works with positioning set to something other than static. It doesn't affect margins if that's what you intended it for.

 

The right property was put in as a place holder, I didn't need it, so I left it at zero. If you use Firebug, and you inspect the h4.skillword there is a right margin which is effecting me from marginally positioning the that h4 tag. Since the margin is not on the h4 tag its self, where is the h4 tag inheriting the margin from ?

I have it figured out Getting use to using new things is always hard

Edited February 8, 201412 yr by CreativeSheep

The right property was put in as a place holder, I didn't need it, so I left it at zero. If you use Firebug, and you inspect the h4.skillword there is a right margin which is effecting me from marginally positioning the that h4 tag. Since the margin is not on the h4 tag its self, where is the h4 tag inheriting the margin from ?

 

If you have an inherited property value all you do is override it -

 

ha.skillword {
  margin: 0;
}

That sets all margins to 0, including the right side. If the margin persists then set the margin-right property. Using the alignment property 'right: 0;' is telling the browser to place your element on the right side of the page/frame but if you still have an inherited margin the 'right' will align against the margin and not against the edge.

 

If you have a property you don't wish to use for now comment it out -

h4.skillword {
  margin: 0;
  /* right: 0; */
}

and that will prevent browsers from trying to use it.

The problem is the class is being inherited by the body so my width is huge How can this be fixed ?

I am not being funny, rude, or attack you but it seems from using the 'developers tools' within chrome that you have missed most of the basics of css, and possibly of html as well.

 

So I think the best way to help you is to provide a link to a couple of tutorials that will get all the major parts of both in to perspective and get you moving forward rapidly.

 

For css try this echoecho.com tutorial It starts at the begining with explaining basic concepts and then moves forward rapidly in to more advanced usage.

For HTML try this HTML.net tutorial which has the same approach.

 

I hope you find these 2 links helpful, and are soon able to build static pages with confidence.

 

There are so many tutorials out there on these subjects, so if you don't like these simply google 'css tutorials' or 'html tutorials' and I am sure you will find plenty that you do like.

Stop insisting I don't know HTML or CSS, I may not be the best but these assumptions are ridicules. I'm currently trying to work out an issue with the HTML editor and FTP sync, once that is ironed out, I'll post an update.

Edited February 10, 201412 yr by CreativeSheep

Stop insisting I don't know HTML or CSS, I may not be the best but these assumptions are ridicules. I'm currently trying to work out an issue with the HTML editor and FTP sync, once that is ironed out, I'll post an update.

 

The only reason I offered those tutorials is that the way you have built the page is the actual cause of the problem. Elements are being used in the wrong place, h tags are being used for style reasons and not to depict order of importance etc. Your css is also causing some of the problems.

 

It may help to clear up your initial query about semantics if you was to read the tutorials, rather than any of us try and right several pages on the subject here.

 

This is not an attack, I refer to tutorials and blogs all the time. I don't know a dev that uses php and hasn't got the php manual bookmarked, it just makes sense. Sorry if you felt I was accusing you of knowing nothing.

Sometimes I think writing JavaScript code is easier then CSS HTML isn't that difficult, CSS takes some time to wrap the head around, I suppose it's trial and error; build a site and learn from it, then the next time it comes easier and so forth. If it wasn't like this there wouldn't be dozens of forums on the subject.

 

I'll be posting the page update, without code to look at, it doesn't help I knew a guy who started web dev at 54 by around 56 he was developing three sites a month, I don't know the prices he was charging I'm guessing he was making a pretty penny per month. BTW I'm not 54 yrs old, I'm not 24 (nor would I want to be, to be honest)

Edited February 11, 201412 yr by CreativeSheep

I'm with Weedy on this, We don't mean to come across as insulting but it is clear from looking at your code your understanding of the fundamentals is limited. If you take the time to study these fundamentals then you won't run into these problems. This is especially important if you plan on charging for your work.

 

You wouldn't want to hire a mechanic to fix the brakes on your car if they didn't fully understand what they were doing. This stuff can at first be hard to grasp but stick with it and you'll be able to enjoy a career in a fantastic industry.

I'm with Weedy on this, ...

 

This stuff can at first be hard to grasp but stick with it and you'll be able to enjoy a career in a fantastic industry.

 

A fantastic industry with an equally fantastic community that wants to help each other. There are not many industries where 'participants' are members of a bigger community like this.

Before I begin working on my own site, I created this site, it's nothing fancy. If you ever watched Saturday Night Live you'll get the dry humor of the page.

He He, I like the 'dump you out on google'

HaHa, I can use this site as a test site, or better yet, enhance it to add more of my own "deep thoughts"

Edited March 3, 201412 yr by CreativeSheep