CODEWITHSUNDEEP
htmlcss
Vishnu
Vishnu

Reputation: 2452

creating simple tag cloud in css

I am trying to create tag cloud in css.

For example If i have 5 links (<a href) in same line , I want one to appear little up and another link little down , but in same line.I tried padding-top:20px and display:block but its making the link move to next line.

enter image description here

 <style>
    .cloud
    {
    height:200px;
    }
    .cloud1
    {
    font-size:26px; 
    margin-top:2px;
    }
    .cloud2
    {
    font-size:18px; 
    margin-top:5px;
    }
    </style>




   <div class="cloud">
     <a class="cloud1" target="_blank" href="">Movie</a> </span>
     <a class="cloud2" target="_blank" href="">news</a> </span>
     <a class="cloud2" target="_blank" href="">Movie</a> </span>
     <a class="cloud1" target="_blank" href="">123</a> </span>
    <br>
     <a class="cloud1" target="_blank" href="">rand</a> </span>
     <a class="cloud2" target="_blank" href="">news</a> </span>
     <a class="cloud2" target="_blank" href="">Movie</a> </span>
     <a class="cloud1" target="_blank" href="">ok</a> </span>

     </div>

Here is http://jsfiddle.net/fznjydyd/ to play.I tried various things in display,position,margin,padding .But nothing seems to help me.

Upvotes: 0

Views: 2665

Answers (1)

Yandy_Viera
Yandy_Viera

Reputation: 4380

You can set position: relative to .cloud , position: absolute to .cloud-X and then give it the position desired to each.

like this

<div class="cloud">
    <a href="" class="tag cloud1">aaaaa</a>
    <a href="" class="tag cloud2">bbbbb</a>
    <a href="" class="tag cloud3">ccccc</a>
    <a href="" class="tag cloud4">ddddd</a>
    <a href="" class="tag cloud5">ddddd</a>
</div>

.cloud{
    height: 200px;
    width: 200px;
    position: relative;
}

.tag{
    position: absolute;
}

.cloud1{
    top: 10px;
    left: 5px;
}

.cloud2{
    right: 10px;
    top: 15px;
}

.cloud3{
    bottom: 20px;
    left: 55px;
}

.cloud4{
    top: 90px;
    left: 155px;
}

.cloud5{
    top: 70px;
    left: 65px;
}

It is hard to do if you have to many tags but it works, and you can do it.

I code this jsfiddle to show you that you can. :)

Upvotes: 2

Related Questions