gaps

BubikolRamios · 02-21-2012, 09:41 AM

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 ?

abduraooft · 02-21-2012, 10:08 AM

Add

Code:

*{margin:0;}

to remove any margins that you've missed.

BubikolRamios · 02-21-2012, 10:31 AM

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:

Lerura · 02-21-2012, 01:45 PM

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>

BubikolRamios · 02-21-2012, 02:18 PM

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 ....

teedoff · 02-21-2012, 02:49 PM

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.