SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    dropping the long text within the #navigator box

    With the code below the #navigator at http://dot.kr/x-test/layOut/09/ is aligned-centered
    So far so good, but...

    Code:
    #navigator {
    display:inline;
    padding:2px 10px;
    border:1px solid #555;
    background:#fff;
    }
    Since the text in #navigator can be short or long, there are unexpectedly two #navigator boxes at http://dot.kr/x-test/layOut/08/ which has long text in the #navigator.

    How can I making the text dropping within the #naviagator box instead of dropping the text with making another #navigator box when the text in #navigator is very long?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I don't think CSS can do this. I may be wrong, of course. But to make this behavior dynamic, you'd need JS of the sorts.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    But to make this behavior dynamic, you'd need JS of the sorts.
    I do this behavior dynamic in PHP which is a serverscript language not in CSS.

    What I want is CSS code which makes that the white #navigator box is centered when the text is short and the text is dropped within the white #navigator box when the text is very long.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hi, then I'd use display:inline-block instead of display:inline, though that will not work in legacy IE (6-7).
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Hi, then I'd use display:inline-block
    http://dot.kr/x-test/layOut/11/ which has the code "inline-block" works fine in chrome, fireFox and safari, and IE8. Thank you.


    Quote Originally Posted by kohoutek View Post
    though that will not work in legacy IE (6-7).
    I don't mind it is not work in legacy IE(6~7).
    but sadly it's not work in IE9 as I test it.
    IE9 is rather future than legacy
    Should I ignore IE9 or Should I back to navigator table instead of navigator div?

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I currently don't have my Windows emulator working, so I can't test, but try display:table instead of display:inline-block. Let me know if that works.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's not working in IE9 for you? Try clearing your cache. It's working for me.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Try clearing your cache. It's working for me.
    As I clear my cache, it's working for me, too. Thank you.


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
  •