CODEWITHSUNDEEP
csshtml
psti
psti

Reputation: 177

CSS isn't get applied

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.

Upvotes: 0

Views: 534

Answers (2)

SubjectCurio
SubjectCurio

Reputation: 4872

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

Upvotes: 1

Joren
Joren

Reputation: 3297

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/

Upvotes: 3

Related Questions