CODEWITHSUNDEEP
htmlcss
mhsc90
mhsc90

Reputation: 374

CSS3 HTML5 Layer

I'm doing my Website but I have a problem. I have one background image and in this image, different layers: layer are with exactly the same size and same position. I tried this :

HTML

<body>
   <div id="1">
   </div>
   <div id="2">
   </div>
</body>

CSS

body {
    background-color: #feecc5;
    font-size: 13px;
    position: absolue;
    background-image: url(images/fond.png);
    width: 600px;
    height: 960px;
    background-position: center top;
    background-repeat: no-repeat;
}

#1 {
    background-image: url(images/formation.png);
    width: 600px;
    height: 960px;
    z-index: 1;
}

#2 {
    background-image: url(images/experiences.png);
    width: 600px;
    height: 960px;
    z-index: 2;
}

The background image for the body is perfect, after the different layers are very bad... I don t understand after i tried also a position: center for the div, nothing. Also put all the div "layer" in the general div, it doesn't work too. I don t know that i have to do. Thank you very much for your help.

Upvotes: 1

Views: 658

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241078

In CSS, identifiers cannot start with a digit. This is why your styling isn't being applied.

CSS2.1

Syntax and basic data types / 4.1.3 Characters and case

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

CSS3

Syntax and basic data types / 4.1.3 Characters and case

In CSS3, identifiers (including element names, classes, and IDs in selectors (see [SELECT] [or is this still true])) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit or a hyphen followed by a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". (See [UNICODE310] and [ISO10646].)

This obviously won't work (example):

#1 {
    color:red;
}

It would clearly work if you prepend a letter and changed the markup (example)

#p1 {
    color:red;
}

As a work-around, you could use the attribute selector in order to select an id beginning with a number: (example)

[id="1"] {
    color:red;
}

Upvotes: 5

Related Questions