SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    setting width of li problem

    hi folks, i have couple of listed item's which i want it wrap when reached a certain width. i m applying the width but its not happening. does li support widths? or is there is another work around. here is my css
    Code CSS:
    ul.dockcaption{width:1200px; position:absolute; margin-top:30px; left:-20px;}
    .dockcaption li{display:inline;margin:10px; margin-left:27px; width:100px}
    i did tried to give one li a lot of text but it doesn't wrap to next line when reached maximum width. am i missing something or li doesn't work with width
    All those who wander aren't lost.

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does work with width.

    Did you try
    Code CSS:
    display: block;

    instead of
    Code CSS:
    display: inline;

    Try to read the definitions for display block and inline

    W3schools

  3. #3
    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)
    As the above poster indicted, display:inline elements (or elemenets with that generated display value) are inline elements. And as a result of them being inline, widths/heights do not apply to them. You could either do one of these options (note, that IE6/7 need a fix/hack for it to work)

    1) Change your setup to display:inline-block
    2) Change your setup to floats isntead of display:inline;
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thanks. that help though i fail to achieve margin:0 auto; on text, i want text to center, for now i am using margin-left:50px; on dockcaption.li and it isn't generic.
    what i m trying to achieve here is when something is commented its image and its respective text, the other element slides in center to fill in the gap. i bet its confusing now but i wonder why i can't get the text to be center of screen. here the link
    P.S, don't paste the whole code here just point me out as its personal and none indexded. thanks
    All those who wander aren't lost.

  5. #5
    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)
    If you want the text to be centered within the <li>, just give the parent text-align:center
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •