CODEWITHSUNDEEP
css
sam
sam

Reputation: 10094

css position setup

Im trying to setup a centrally aligned div, both vertically and horizontally, im trying to do it by setting the width and height of the div, and then positioning it fixed center and offsetting the margins by 50%.

This is the css im using 

#404-wrapper    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-200px;}
#404-wrapper a  {font-size:14px; line-height:120%;}

ive also made a jsfiddle here - http://jsfiddle.net/wnGL3/

but i cant see why it isnt working, any ideas ?

Upvotes: 1

Views: 70

Answers (5)

No Results Found
No Results Found

Reputation: 102874

id attributes can legally start with a number in HTML5, but you'll still have a problem with it in CSS.

If you can't change the id, you can use an attribute selector:

[id="404-wrapper"] {}

Demo: http://jsfiddle.net/wnGL3/10/

Just for fun, there's another way to do it using unicode escape codes:

#\00003404-wrapper {}

\000034 represents the number 4. Demo: http://jsfiddle.net/wnGL3/11/

Upvotes: 2

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

ID's Cannot start with a number in css.

But you can fix it with change

#404-wrapper

to

[id='404-wrapper']

Here is an working example.

Upvotes: 0

rlemon
rlemon

Reputation: 17667

ID's cannot start with numbers unfortunately.

From the W3C spec on Id's

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

http://www.w3.org/TR/html4/types.html#type-name In this article it described what the 'name' for the ID can be.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).

Change the ID to wrapper-404 and it works. 

#wrapper-404    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-top:-100px; margin-left:-200px;}

#wrapper-404 a    {font-size:14px; line-height:120%;}​

http://jsfiddle.net/rlemon/wnGL3/3/

Upvotes: 1

s_p
s_p

Reputation: 4693

rename your markup and css without the number in the front

#wrapper    {width:400px; height:200px; position:fixed; left:50%; top:50%; margin-      top:-100px; margin-left:-200px;}
#wrapper a  {font-size:14px; line-height:120%;}

Upvotes: 3

GautamJeyaraman
GautamJeyaraman

Reputation: 545

Use position as relative instead of fixed. It should work.

Upvotes: 0

Related Questions