8 Replies - 568 Views - Last Post: 21 February 2014 - 05:55 AM

#1 bg-ltd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 21-February 14

CSS and classes

Posted 21 February 2014 - 02:20 AM

Hey guys!

I recently started getting into HTML5 and CSS, and following a tutorial that used classes for each section, I ran into an issue that I have been unable to resolve.

So this is one part that I'm a bit confused about:

I use this HTML code to start of my navigation menu.
     <header class="mainHeader">
         <img src="not_important">
         
         <nav><ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Roster</a></li>
            <li><a href="#">Contact</a></li>
         </ul></nav>
     </header>



I then continued with a CSS code to modify each section specifically:


.mainHeader nav {
      width: 95%;
      background-color: #666;
      height: 40px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
}




Thing is, this doesn't make the navigation section get any of the things specified in the CSS code.
If I add a "," in between the ".mainHeader" and "nav", then it'll respond to it but it also did cause additional issues as I can't specifically edit each section that I want.

The guy in the tutorial I watched used this frequently for the different classes he had, and I thought it was pretty useful and easy to understand.
Any solutions or tips you may have will be greatly appreciated!

I'll also link to the tutorial video in case that helps as well:
http://www.youtube.c...vBQZjZso6fYfD6B

Sorry if this question makes no sense, but I just started out with HTML and CSS.

Thanks in advance for any helpful tips!

Regards,
Joakim

Is This A Good Question/Topic? 0
  • +

Replies To: CSS and classes

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • Joined: 08-June 10

Re: CSS and classes

Posted 21 February 2014 - 02:33 AM

do you have a demo page?
Was This Post Helpful? 0
  • +
  • -

#3 bg-ltd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 21-February 14

Re: CSS and classes

Posted 21 February 2014 - 02:50 AM

Hey Dormilich,

Thanks for taking the time to help me!

I currently do not have a demo page, only using it locally, but I guess I could attach the index and css file here on the forum if that helps?

If any additional info is required to resolve this, I'd gladly provide whatever needed!

Thanks again!

Regards
Joakim
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • Joined: 08-June 10

Re: CSS and classes

Posted 21 February 2014 - 02:57 AM

if I take the posted code an run it in my browser, I get the expected result.
Was This Post Helpful? 0
  • +
  • -

#5 bg-ltd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 21-February 14

Re: CSS and classes

Posted 21 February 2014 - 03:02 AM

Hey,

This is very awkward and feel free to laugh at my expense...

I just went through the code again and i just saw that a "=" was missing in the HTML code before the class. With that taken care of, it works as expected.

I'm very sorry that I wasted your time with this, but hopefully I provided a good little laugh at least.

Thanks again!

Regards,
Joakim
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • Joined: 08-June 10

Re: CSS and classes

Posted 21 February 2014 - 03:12 AM

Quote

I just went through the code again and i just saw that a "=" was missing in the HTML code before the class.

you seem to have corrected that when you posted the code here. there is no = missing (as you can see by your post not being edited in any way as there would be an edit notification)


Quote

This is very awkward and feel free to laugh at my expense...

what makes you think I would do that? the most common coding errors are small typos, eventually.
Was This Post Helpful? 0
  • +
  • -

#7 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 74
  • View blog
  • Posts: 541
  • Joined: 21-November 13

Re: CSS and classes

Posted 21 February 2014 - 03:50 AM

Hi,

I suggest you to paste your code in the W3C validator when you experience a bug with CSS or even Javascript. It helped me a lot when I was learning HTML.

One more thing : I would use an id instead of a class here. An easy way to choose is to wonder if you would use a definite or indefinite article before the class name. Here you would say "the main header" and not "a main header"
Was This Post Helpful? 0
  • +
  • -

#8 bg-ltd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 21-February 14

Re: CSS and classes

Posted 21 February 2014 - 04:10 AM

Hehe, I provided the correct input here in the example, but I didn't do that correctly on my local document.
I'm beginning to see just that Dormilich... I better go through the code again before it gets to long!

Thanks for that link geO, that solved a couple of errors that'd take me a while to find otherwise, cheers.

This is all so new, so I really appreciate all the help guys, thanks again.

Regards,
Joakim
Was This Post Helpful? 0
  • +
  • -

#9 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 74
  • View blog
  • Posts: 541
  • Joined: 21-November 13

Re: CSS and classes

Posted 21 February 2014 - 05:55 AM

You should try every code you put on a forum before posting, especially if it has been modified. It's a good thing to simplify your code to delimit the problem... if you can reproduce the problem ;)

I like to post (non-)working examples via this site : http://jsfiddle.net/. I even use it to try some spinets while I'm working. It helps detecting errors before the situation gets out of hands.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1