0

I am trying to block a piece of code using a Div open and close tag as such:

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

However if I try and code in css using #header it won't follow any of the rules? I am new to HTML and CSS so please excuse my ignorance.

EDIT: Here is the required CSS needed to help me. Sorry for forgetting it, again I am new here.

.header{ 
    width:300px; 
    height:300px;
    display:block; 
    margin: auto;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;} 

The last part was copied from a help website as it allows it to fade in and out when the mouse hovers over it. Every time I try changing the '.' with a '#' it completely neglects the rules.

7
  • 1
    please include you CSS in your answer
    – Joren
    Sep 2, 2013 at 15:39
  • please add your CSS code so that the answer can be more than "it is labor day".
    – lucuma
    Sep 2, 2013 at 15:40
  • @Peter The markup (i.e. the HTML code) you provided is perfectly fine - although the formatting could need some second thought. Therefore the problem is caused by your CSS declarations. Please update your post.
    – aefxx
    Sep 2, 2013 at 15:48
  • 1
    Change <a href="www.hugowolfdesigns.tumblr.com"> to just <a href="/">
    – Xareyo
    Sep 2, 2013 at 15:50
  • 1
    really recommend writing your own code line by line as you learn this stuff. That way you will begin to understand each style attribute and how it behaves. Start small, then work to bigger stuff using transitions. Sep 2, 2013 at 16:22

2 Answers 2

3

The CSS in the answer is for the class header and not for the id header: .header {. In CSS the . refers to a class and a # to an ID. The CSS is currently applied on the image: http://jsfiddle.net/BjgvY/

2
  • Excuse me, you're right. But the issue of css has nothing to do with the href. So its not an answer and should be stated as comment
    – Joren
    Sep 2, 2013 at 16:10
  • 2
    Cool, so we'll leave it as incorrect. As long as you get a big shiny tick!
    – Xareyo
    Sep 2, 2013 at 16:12
1

No idea what your CSS is because you haven't included it, but I'm guessing that you're referring to the fact that you are trying to do things like this:

#header {
    height:50px;
}

And nothing is happening. This is because #header has a overflow value of 'visible' by default, and as the image is much larger, it'll overflow and take up as much room as needed.

If you don't want this to happen, you'll have to alter the overflow to a different value, for example:

#header {
    height:50px;
    overflow: hidden;
}

will hide any content that goes over the 50px height limit of the header.

If you're trying to alter the size of the image, set the height/width attributes on the image, not the header. Or preferably, link to a more suitably sized image; there's no point loading a ~1000x800 image if you're only going to scale it down to something like 200x160.

It's also probably a bad idea to have an ID and class with the same name. Just for clarity, if you're trying to get the image with the class 'header' to follow some css styling, you want to use the

.header {
}

selector, and not

#header {
}

If you post your CSS, I could provide a more relateable answer, other than just a shot in the dark based on what I think you might be doing wrong.

Edit:

It seems like you're having difficulty with CSS selectors,

#header {
}

will refer to any elements that have an ID of header, such as

<div id="header"></div>

whilst the css selector

.header {
}

refers to elements that have a CLASS of header, such as

<div class="header"></div>

So back to your code

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

    #header { // these styles will apply to your div with ID header
    }

    .header { // these styles will apply to your image with the class header
    }

It may seem like an annoyance, but if your new to CSS, i'd heavily recommend you read up about selectors. As they are pretty much vital to doing anything in CSS.

Here's the documentation

Chapter 5.8.3 talks about class selectors

Chapter 5.9 talks about ID selectors

(Off topic)

Your link is incorrect, and should either be

 <a href="http://www.hugowolfdesigns.tumblr.com">

if it's pointing to a different website, or it can just be

 <a href="/">

if it's pointing to the homepage of the same website

3
  • I've now included the CSS. However, I don't understand when I use # on all the other parts of my HTML (links etc) they all follow the rule but the header does not?
    – psti
    Sep 2, 2013 at 16:00
  • You Sir are an augur. Have a +1 from me.
    – aefxx
    Sep 2, 2013 at 16:01
  • @PeterStirrup Seems like the idea of different selectors is giving you some confusion, I've updated my answer with some additional information that might make it abit clearer for you, as well as documentation on the matter. Sep 2, 2013 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.