Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: gaps

  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts

    gaps

    Any thought why there are this giant gaps ? Not planned obviously:
    http://agrozoo.net/jsp/taxon-clouds/gobe.jsp

    Thinking it has something to do with paddina and margin, but my thought is, it should not ?
    Last edited by BubikolRamios; 02-21-2012 at 09:43 AM.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Add
    Code:
    *{margin:0;}
    to remove any margins that you've missed.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Nope, I think.

    Removed all margins, paddings. The long line in view source is server side generated,
    the divs differs now only in font size and containing text: http://agrozoo.net/jsp/taxon-clouds/gobe.jsp

    How to make this more nice looking (compact), preserving randome font size ?
    Click refreh a couple of times to see how randome effec affect whole thing.

    Trying to make something like this:
    Last edited by BubikolRamios; 02-21-2012 at 10:59 AM.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    I will recommend individual positioning. - And a combination of classes and inline styling.

    CSS:
    Code:
    #container {
      background-color:black;
      height:300px;
    }
    # container div {
      position:absolute;
      height:1px;
      width:1px;
      overflow:visible;
      white-space:nowrap;
      font-size:36px;
    
    }
    .s80 {font-size:80%;}
    .s90 {font-size:90%;}
    .s110 {font-size:110%;}
    .s120 {font-size:120%;}
    
    .cRed {color:red;}
    .cBrown {color:brown;}
    .cOrange {color:orange;}
    .cGreen {color Green
    The size of the sub-divs is kept as small as possible, as the are only used to tack the positions, with overflow and white-space defined, so the divs do not otherwise influence how the text is displayed.

    And height is set on #container because the sub divs will not stretch it in this case.

    Notice that I have not defined the positions yet.

    Now set a color class and a size class for each div and specify their positions:
    Code:
        <div class="s80 cRed" style="top:60px;left:200px;">Amazonas</div>
        <div class="s90 cOrange" style="top:120px;left:400px;">Grand Canyon</div>
        <div class="s110 cBrown" style="top:180px;left:100px;">Rocky Mountains</div>
        <div class="s120 cGreen" style="top:240px;left:300px;">Mount Everest</div>
        <div class="s90 cRed" style="top:200px;left:600px;">Kilimanjaro</div>
    to get a result like this:
    Code:
    <DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    #container {
      background-color:black;
      font-size:36px;
      height:300px;
    }
    #container div {
      position:absolute;
      height:1px;
      width:1px;
      overflow:visible;
      white-space:nowrap;
    }
    .s80 {font-size:80%;}
    .s90 {font-size:90%;}
    .s110 {font-size:110%;}
    .s120 {font-size:110%;}
    
    .cRed {color:red;}
    .cBrown {color:brown;}
    .cOrange {color:orange;}
    .cGreen {color:green}</style>
    <head>
    <body>
      <div id="container">
        <div class="s80 cRed" style="top:60px;left:200px;">Amazonas</div>
        <div class="s90 cOrange" style="top:120px;left:400px;">Grand Canyon</div>
        <div class="s110 cBrown" style="top:180px;left:100px;">Rocky Mountains</div>
        <div class="s120 cGreen" style="top:240px;left:300;">Mount Everest</div>
        <div class="s90 cRed" style="top:200px;left:600px;">Kilimanjaro</div>
      </div>
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,958
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Yes I did thinhk of absolute positioning, but my elements comes from db, are changed in characters length & changed in number of them.
    if you look at it now: http://agrozoo.net/jsp/taxon-clouds/gobe.jsp
    I'm getting close - figuring out centering ....
    Last edited by BubikolRamios; 02-21-2012 at 02:20 PM.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I'm a little confused, and your image didn't show up to see how you'd like the page to render. Can you try and repost an image?

    You have span tags wrapped around sections of text. The longer text wont line break from within the span tags i wouldnt think, if thats the gaps you're referring to.
    Teed


  •  

    Posting Permissions

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