id tags

Question

my id tags are simply not working in css. please help :(

Answer 1 · 2014-06-16T12:45:50Z

June 16, 2014 12:45pm

Id tags? Tags are things like <p> and <body>. Think you mean the id-selectors? Those #id things?

Answer 2 · 2014-06-16T12:47:28Z

June 16, 2014 12:47pm

id selectors sorry ie. <div id="wrapper">

Answer 3 · 2014-06-16T12:48:13Z

June 16, 2014 12:48pm

Maybe you can post your code (html & css)?

Answer 4 · 2014-06-16T12:56:01Z

June 16, 2014 12:56pm

<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a>
</li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playin with blending modes</p> </a>
</li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 1970's style</p> </a>
</li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using photoshop</p> </a>
</li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a>
</li> </ul> </section> <footer> <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a> <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a> <p>© 2014 Danny Mckenna.</p> </footer> </div>

Answer 5 · 2014-06-16T12:56:38Z

June 16, 2014 12:56pm

lol well that didnt work too well. Is there somewhere I can post the code?

Answer 6 · 2014-06-16T13:26:15Z

June 16, 2014 1:26pm

Look just above the Post Answer Button for the small text that contains bold lettering that says Markdown Cheatsheet

This shows what characters to wrap around your HTML snippet of code, links, pictures, etc. so you are able to post it with your messages. The one you are looking for is Code and you use "backticks" which is the keyboard button just under the ESC key on your keyboard.

Answer 7 · 2014-06-16T15:28:34Z

June 16, 2014 3:28pm

code  <div id="wrapper">
     <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playin with blending modes</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 1970's style</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition</p>
            </a>        
         </li>
        </ul>
      </section>
      <footer>
          <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a>
          <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a>
        <p>&copy; 2014 Danny Mckenna.</p>
      </footer>
   </div>

Answer 8 · 2014-06-16T15:29:04Z

June 16, 2014 3:29pm

oh dear, im having a nightmare arent i

Answer 9 · 2014-06-16T15:29:44Z

June 16, 2014 3:29pm

<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playin with blending modes</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 1970's style</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using photoshop</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a> </li> </ul> </section> <footer> <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a> <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a> <p>© 2014 Danny Mckenna.</p> </footer> </div>

Answer 10 · 2014-06-16T15:30:33Z

June 16, 2014 3:30pm

CSS - ``` body {font-family: 'Lobster', Cursive; font-size: 1.2em;

}

a { text-decoration: none;}

img {max-width: 100%;}

wrapper

{max-width: 22px; margin: right; padding: 5%; }

logo

{text-align: center; margin: 0; }

h1 {font-family: 'Oxygen', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }```

Answer 11 · 2014-06-16T15:31:19Z

June 16, 2014 3:31pm

the highlighted wrapper text has a hashtag in my CSS

Answer 12 · 2014-06-16T15:35:22Z

June 16, 2014 3:35pm

I've putted it into a codepen: http://codepen.io/arthur_versch/pen/Jlvyf And it looks like the styling for the id's are working.

Answer 13 · 2014-06-16T15:38:07Z

June 16, 2014 3:38pm

All of your Id tags are not working or is it only a select few?

If all of them arent working, Is any code from your CSS code working?

try doing a simple

``` body{ background-color: black; } ```

in your CSS and make sure the stylesheet is being applied to your HTML.

Answer 14 · 2014-06-16T15:43:44Z

June 16, 2014 3:43pm

Thats what I thought but, its only a select few that dont work ie wrapper and gallery. everything on my css is working apart from when i use the id selector of wrapper and gallery

Answer 15 · 2014-06-16T15:52:26Z

June 16, 2014 3:52pm

Actually, none of my id selectors are working ??

Answer 16 · 2014-06-16T15:53:41Z

June 16, 2014 3:53pm

Hmmm. Your wrapper and gallery id have a hashtag before the w and the g with no space or any other character before or between it correct? 1 missed typo can mess up entire code segments. Or even missing a closing semi-colon.

Answer 17 · 2014-06-16T15:55:00Z

June 16, 2014 3:55pm

Look on this: http://codepen.io/arthur_versch/pen/Jlvyf

When i apply a really simple style to the #wrapper, it works! Your id selectors are working.

Is your css-file correctly linked?

Answer 18 · 2014-06-16T15:56:47Z

June 16, 2014 3:56pm

Are you using inline styling (that is where your css is on the same page as your HTML just in between style tags. Or are you using one of these in the HEAD section?

<link rel="stylesheet" type="text/css" href="someFile.css">

Answer 19 · 2014-06-16T16:02:14Z

June 16, 2014 4:02pm

Chris - Yes I am typing both with a hashtag before the W and the G. And I am using a different file to write my css.

Arthur - All of my other css works fine so I imagine that the file is linked properly.

I will copy and paste the entire html and css.....

Answer 20 · 2014-06-16T16:02:38Z

June 16, 2014 4:02pm

<!DOCTYPE html>
<html>
  <heac>
    <meta charset="utf-8">
    <title>Danny Mckenna | Entrepreneur</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Lobster|Oxygen:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">

  </heac>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Daniel Mckenna</h1>
          <h2>Creative genius</h2>
        </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected"> Portfolio</a></li>
          <li><a href="about.html"> About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
     <div id="wrapper">
     <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playin with blending modes</p>
            </a>        
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 1970's style</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop</p>
            </a>        
         </li>
         <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition</p>
            </a>        
         </li>
        </ul>
      </section>
      <footer>
          <a href="https://www.facebook.com/danny.mckenna2?ref=tn_tnmn"><img src="img/facebook-wrap.png"></a>
          <a href="https://twitter.com/dannymc1985"><img src="img/twitter-wrap.png"></a>
        <p>&copy; 2014 Danny Mckenna.</p>
      </footer>
   </div>
  </body>  
</html>

Answer 21 · 2014-06-16T16:05:13Z

June 16, 2014 4:05pm

http://codepen.io/anon/pen/JaeFL

Answer 22 · 2014-06-16T16:09:27Z

June 16, 2014 4:09pm

your HEAD tag says HEAC

Answer 23 · 2014-06-16T21:40:13Z

June 16, 2014 9:40pm

Thanks Chris

Ive corrected the head tag. Still cant find out why my selectors arent working though

Answer 24 · 2014-06-17T02:04:48Z

June 17, 2014 2:04am

The only other thing I am noticing in your CSS is you have body and gallery selected twice.

Answer 25 · 2014-06-17T02:23:24Z

June 17, 2014 2:23am

Could you explain what your ID selectors aren't doing. What you are seeing? CodePen seems to be reflecting your CSS on all of my browsers. (Firefox, IE 11, and Google Chrome).

I also saved your code to a file and placed the CSS in a css subfolder within the same directory as the html code and it is working and reflecting the changes.

Answer 26 · 2014-06-17T11:15:54Z

June 17, 2014 11:15am

I am typing attributes to the selectors ie. align, color, padding etc. and nothing is happening when i refresh the browser. I was saving and refreshing. I am only a few hours into the track I may start again. I suppose that way, the method will stick in my mind. Thanks for your help guys, didnt expect such a quick/great response, it seems the development community is a very helpful one.

Danny

Answer 27 · 2014-06-17T11:40:15Z

June 17, 2014 11:40am

Hey Daniel,

So I think I found your problem, I just did some skimming and seen what we missed.

The CSS sheet is the problem.

So if you take a look at your CodePen link again, you will notice that you are defining multiple colors for different selectors in the same area.

For example: Your header tag wraps around the logo ID selector which is setting the selector of the a tag that states your name which is inside an h1 tag.

In your CSS you are setting these

    header{ background:#6ab47b; border-color: #599a68; }
    h1, h2 { color: #fff; }
    a { color:#6ab47b; }

since some are HTML elements and id selectors they are very general and apply to everything on your page. So they basically are fighting and 1 of them wins. All you have to do really is clean up the code a little bit. Combine the multiple occurrences of the same selectors or elements and combined them.

Welcome to the Treehouse Community

Looking to learn something new?

Daniel mckenna

Daniel mckenna

id tags

27 Answers

Arthur Verschaeve

Arthur Verschaeve

Daniel mckenna

Daniel mckenna

Arthur Verschaeve

Arthur Verschaeve

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

Arthur Verschaeve

Arthur Verschaeve

Chris Howell

Chris Howell

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

wrapper

logo

Daniel mckenna

Daniel mckenna

Arthur Verschaeve

Arthur Verschaeve

Chris Howell

Chris Howell

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

Chris Howell

Chris Howell

Arthur Verschaeve

Arthur Verschaeve

Chris Howell

Chris Howell

Daniel mckenna

Daniel mckenna

Daniel mckenna

Daniel mckenna

Chris Howell

Chris Howell

Daniel mckenna

Daniel mckenna

Chris Howell

Chris Howell

Daniel mckenna

Daniel mckenna

Chris Howell

Chris Howell

Chris Howell

Chris Howell

Chris Howell

Chris Howell

Daniel mckenna

Daniel mckenna

Chris Howell

Chris Howell

Chris Howell

Chris Howell