SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Centering an Image

    Hi

    I am going for it and redoing my whole website with NO TABLES!

    Anyway, I am still learning CSS so I need some help.

    I have a column with an image in it, this is code for that bit:

    position : absolute;
    width : 150px;
    top : 20px;
    left : 20px;
    border : 1px dotted black;
    background-color : #cccccc;
    padding : ?????;
    z-index : 2;

    How do I center the image I am placing here? I thought it might have something to do with the PADDING attribute, but I don't know what the command is!

  2. #2
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats a bit tricky, I remember reading some articles about it, but sadly not where I read them. How about div align=center ??

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd probably want to use:
    Code:
    #affectedImg {
     margin: auto;
    }
    but depending on the context, text-align may be more appropriate (i.e. if it's part of a block of text).

    Finally, taking the plunge, huh? :-)

    ~Ian

  4. #4
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ian I alredy tried that but it didn't work, maybe I was doing it wrong!

    And yes, I am finally taking the plunge! I have already been using external style sheets but now I have gotten rid of all table tags.

    Maybe you can help me with something else, I have some images in the main middle bit of this page and they are not showing up!!!!

    http://www.nickydanino.com/test/about.shtml

  5. #5
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky, your images are showing up in opera just not IE

    If its the image on the right that your trying to center then try
    Code:
    #rightcol {
    BORDER-RIGHT: thin dotted;
    BORDER-TOP: thin dotted;
    Z-INDEX: 1;
    RIGHT: 20px;
    BORDER-LEFT: thin dotted; 
    BORDER-BOTTOM: thin dotted;
    POSITION: absolute;
    TOP: 20px;
    width: 150px;
    BACKGROUND-COLOR: #ffffff;
    voice-family: inherit;
    text-align: center;
    padding: 5px;
    }
    Last edited by iTec; Apr 6, 2002 at 15:36.

  6. #6
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink in good browsers??

    just a guess, but it may be the way you're combining the use of z-index and relative positioning that it causing these images to be "invisible" in the Insufferable Encumbrance - I never seem to have much luck "stacking" - they display in N6 as well as Opera, and you get the alt tag display mouseover and the correct "list" of options when you right-click where they should be in IE

  7. #7
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, what can I do to fix this then?

  8. #8
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky, ive fixed your image problem

    place this in your css file
    Code:
    img {  z-index: auto; position: relative; visibility: inherit}

  9. #9
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation sins of the parents

    does that follow from this?
    There are however some complicating factors. z-indexes are not applicable to the whole page, but only within a particular containment hierarchy. This means that the z-index of parent elements is important in determining which element obscures another.
    from this page

  10. #10
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    iTec that worked thanks a lot!

    So what do zindex do exactly? I am a bit confused!

    At the moment I am just numbering them at random, but I assume there is sme sort of system to it?

  11. #11
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try to explain z-index as best I can. Ya see, on standard Web pages, there's only two dimensions (x, the horizontal; y, the vertical). Well, CSS changed that by using the third dimension, commonly called z in mathematics.

    The use of the z-index is as follows. When you use absolute positioning on an element, it is possible for some elements to overlap. By setting a value for the z-index, you can choose in what order the elements will overlap. A higher value for the z-index will send an element farther to the top.

    So, as an example, a <div> with a z-index of 4 will always be on top of a <div> with a z-index of anything less than 4 (3, 2, etc.).

  12. #12
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that makes sense!

    One more question.

    I have the main content bit and the footer apecified in the CSS file:

    .content {
    position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width : auto;
    min-width : 120px;
    margin : 0px 210px 20px 170px;
    border : 1px solid black;
    background-color : white;
    padding : 10px;
    z-index:1; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    }

    .footer {
    position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width : auto;
    min-width : 120px;
    margin : 0px 210px 20px 170px;
    border : 1px solid black;
    background-color : white;
    padding : 10px;
    margin: auto;
    z-index:1; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    }

    Now they are both set to automatic widths. However, I would like the footer to be the same width as the main content bit WITHOUT setting absolute widths.

    Is this possible?

  13. #13
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your problem is that you've got margin defined twice for the class footer. Remove margin: auto; and they should both be the same size (unless your content stretches one or the other out).

  14. #14
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Duh, I could I have missed that?

    Anyway, I LOVE CSS.

    I am really getting into it and it has so many possibilities, I feel an article coming along.

    Can I use the style sheet to specify all link to open in a new window? Similar to adding target="_blank" to all a hrefs!

  15. #15
    SitePoint Zealot Tiggy's Avatar
    Join Date
    Mar 2002
    Location
    Lancashire, UK
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky, not sure if the link targets can be set in CSS, as it is "function" rather than "form"...

    You should be able to set the target for your links by using a <base> tag in the head of your document tho if you want them all to open in a new window... if you use this remember that your default link behaviour changes and you'll have to add a target=_self to links you want to open up in the same page...

  16. #16
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tiggy, that just defeats the purpose as it still means adding it to all seperate links. I just wondered if there was a way round adding it to all with only one change.

    Wishful thinking.

  17. #17
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ...and the saga continues!

    I have three columns to the website and I would like the spacing between all three to be the same. At the moment the middle column seems to be closer to the left on than to the right.

    Can anyone make any suggestions?

    Thanks.

  18. #18
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a url? - I get 404 on http://www.nickydanino.com/test/about.shtml

  19. #19
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry I moved it to my "real" site now!

    www.nickydanino.com

  20. #20
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Target: the future

    I don't think you can set the link target because in the CSS/XML future there is no such thing.

    The theory (and I think it is just theory at this stage) is that CSS can do windows-within-windows etc, so the whole frames idea can be phased out, and that includes the target attribute.

    Check out XHTML for the proof - there's a separate transitional DTD for framed sites, because the main spec has removed all support for frames.

  21. #21
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Nicky
    ...and the saga continues!

    I have three columns to the website and I would like the spacing between all three to be the same. At the moment the middle column seems to be closer to the left on than to the right.

    Can anyone make any suggestions?

    Thanks.
    Nicky,

    you could try changeing margin to;
    Code:
    margin : 0px 210px 20px 188px;
    in .header .content .footer and that should work!

  22. #22
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't think that has fixed it!

  23. #23
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to have done the trick on IE6, what are you using?

  24. #24
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have IE 5.0 on one machine and 5.5 on the other. I know I know I should upgrade but my laptop needs reformatting so I will upgrade then.


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
  •