SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    link: need centered, display:block & saran wrapped...

    from mockup:
    http://www.mayacove.com/dev/button.gif

    how can I make this link display:block, centered, and saran-wrapped? (don't want to have to give it a width..)

    if I make display:block it autom. takes up wicth of containing element

    display:inline-block works, but what about IE 7 & 8?

    thank you....



    PS: actually inline-block doesn't work (it won't center with margin: 0 auto; )

  2. #2
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    actually, I just realized I don't need to do display:block...

    ????

    I thought any time you needed to set padding for link you had to give make display:block...

    so sorry, disregard...

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Probably better to set it to some kind of block display, though. You could set it to display: inline-block and then add text-align:centre to the parent, or set it to display: table.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here all all your options. You have quite a few. http://www.websitecodetutorials.com/...center-nav.php

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    813
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    as mentioned previously, I found that giving it padding works very well for making it look like a block (box), but what if need two of them, stacked, (one on top of the other)??? i.e.,

    http://mayacove.com/dev/buttons.jpg

    I can't give them display:block (as then they would take with of containing element), but need margins.......;-o

    this doesn't work... margin:0 auto 50px auto;

    (obviously inline-block won't work here either... man, is there a solution here, without giving them a width?
    don't see a solution here other than applying <br><br> betw buttons...;-)

    thank you

    (and thank you for posting link for the diff navs, this is very useful for nav situations, but I don't think it applies to my one-button problem...;-)

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    maya90,

    Will you PLEASE post some code so we can understand the problems you have and suggest a workable solution and maybe some useful explanation about how and why it works?


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
  •