SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS img class doesn't work

    Hi,

    I want to align an image and I have the following code but it doesn't work.

    Page:
    HTML Code:
    <img class="aligncenter" src="image.jpg" />
    CSS File:
    HTML Code:
    .aligncenter {text-align:center}
    Am I missing something?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi

    The aligncenter class would need to be on the parent of the image for text-align:center to work (and as long as the image is an inline element still).
    If you want to address the image itself then set it to display:block and use auto:margins to center it.

    aligncenter is not a very good classname because if you decide at a later dat you want the image left aligned you woll end up having to change the html and the css otherwise the class will be confusing.

    Use something more appropriate depnding on the situation.

    e.g.
    img.caption{display:block;margin:auto}

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thank you very much. Now it works fine. I used .aligncenter because I saw it on WordPress and for this type of image on my site, the alignment will never change.

    By the way, is there a list of forbidden names to use as id or class in CSS? For example, for one case I used .center as a class name, is it a bad idea?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It's always a bad idea to use class names that are presentational by nature. Presentational elements were deprecated form html (in strict doctypes) and you should lkeep the same rationale for yopur class and id names.

    For example instead of saying class="red" you may prefer to say class="warning". Or instead of saying class="gold" you may prefer class="highlight". Use words that describe the function but not the presentation.

    That means that if you decide later that you want to change the color or look of the class then you can do so without conflict.

    Clients always change their mind so you don't want to have a class that says .center when you have changed the text to align right.
    There are no forbidden names but there are rules as to what characters are allowed and you can't start ids and classnames with digits and other some other characters.

  5. #5
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Use words that describe the function but not the presentation.

    There are no forbidden names but there are rules as to what characters are allowed and you can't start ids and classnames with digits and other some other characters.
    Paul, thanks for clarifying this, I will keep that in mind from now on. I know about the rules but wanted to make sure whether or not there were words that cannot be used.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ademmeda View Post
    I know about the rules but wanted to make sure whether or not there were words that cannot be used.
    CSS is NOT a programming language, as such it does not have "commands", "or "functions" or even "pre defined variables" (or variables of any kind really). Once you put a "." ( for class) or a "#" and no spaces before any word.. it becomes a class or ID; the name space is pretty much up to you, as long as you stick to the characters in Paul's link you are OK. remeber just because you CAN do something doesnt mean you SHOULD. "div.div" or ".h1 h1" are perfectly legal, but its bound to mess with your eyes and your mind when debugging.

    It is GOOD practice to make those names meaningful. YOU could name something ".leftRed"... but it could come back to bite you months later when you are trying to alter your code and wonder WHY something is "leftRed".. but if you can explain why.. then by all means.

    You have to keep in mind, since it seems you are working with prefabricated code that using names that have been used in the original Style Sheet will interfere and CAN override the previous code. Some times this si what you ant , especially if you know your way around CSS AND that specific Stylke template. If you don't it can be disastrous time consuming to debug.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •