CSS Error =[

Twinkie

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
Why does this page's elements not center when a width is defined? I am sure I am missing some small detail. Images are just placeholders. Thanks for any help.
 
diabolo

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
Code: 
* {
   margin: 0 auto;
}

that should center the body
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
The inline content is centered; it's centered relative to its left and right sides, which depend on the parent element. By setting a width on <body>, you've restricted the left and right sides of its descendants. If you center the body (e.g. by setting margin to "auto" for modern browsers), everything centered within <body> will be appear centered relative to the viewport.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Don't count out Diablo's suggestion. It will center block elements with explicit widths, whereas using text-align won't.

The #menu definition list as used is non-semantic. An <ul> or <ol> would be better.
 
Twinkie

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
Well yes, but I plan to use the different elements in the definition list to distinguish between menu and sub menu items.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Are you implementing an accordion menu?
 
Twinkie

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
No, just a difference in style. It is like a drop down menu, except already dropped down.

Code: 
dl dt {
font-size: 100px;
color: pink
}

dl dd {
font-size: 9px;
color: black
}
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Looks like list abuse; <dt> denotes a term and <dd> it's definition. Any other use is non-semantic and means programs (such as search engine spiders) can't deduce as much information, or will deduce the wrong information. Better to use an unordered list and a class for whichever list items are the exceptions.

Also, using "px" for font sizes doesn't scale well with monitor resolution.
 
You must log in or register to reply here.
Top