[CSS] Tagcloud - Unterschiedlich grosse Schriftarten gleiche Höhe

Dieses Thema im Forum "Webdesign" wurde erstellt von juppwatis, 21. November 2011 .

  1. 21. November 2011
    Tagcloud - Unterschiedlich grosse Schriftarten gleiche Höhe

    Hallo zusammen,

    ich arbeite an einer neuen Website. Da will ich für den Blog auch eine Tagcloud erstellen bzw. habe ich schon gemacht:

    http://drinkinggames.de/test/index.php/beer-pong-blog.html

    jetzt will ich aber, dass ich die tags - je nach häufigkeit der nennung - anders darstellen kann. also mir ist schon klar, wie es geht, aber wenn ich z.B. folgendes mache:

    Code:
    .mod_tagcloudnews .cloud .size1 {
    font-size: 100%; 
    }
    
    .mod_tagcloudnews .cloud .size2 {
    font-size: 120%; 
    }
    
    dann werden die schriften unterschiedlich gross dargestellt. Das ist soweit auch gut Aber jetzt will ich noch, dass die Schriften dann auf einer Linie sind, d.h. wenn man unten eine Linie hätte, würden sie alle gleich anfangen. So wie im folgenden Link unter "Suchbegriffe" will ich es gerne machen:

    Das Contao Extension Repository durchsuchen - Contao Open Source CMS

    kann mir jemand sagen wie ich das hinbekomme?
     
  2. 22. November 2011
    AW: Tagcloud - Unterschiedlich grosse Schriftarten gleiche Höhe

    was ist das problem?
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
    <title>Unbenannt</title>
    <style type="text/css">
    .cloud li {
     list-style: none;
     display: inline-block;
     padding: 12px;
     border: 1px solid #f00;
    }
    .size1 {
     font-size: 12px;
    }
    .size2 {
     font-size: 30px;
    }
    .size3 {
     font-size: 46px;
    }
    </style>
    </head>
    
    <body>
    
    <div class="mod_tagcloudnews block">
    <ul class="cloud">
     <li class="size2 ball"><a href="index.php/news/tag/ball.html" title="ball (3)">ball</a></li>
     <li class="size2 beer_pong"><a href="index.php/news/tag/beer%20pong.html" title="beer pong (2)">beer pong</a></li>
     <li class="size3 bier"><a href="index.php/news/tag/bier.html" title="bier (5)">bier</a></li>
     <li class="size1 pong"><a href="index.php/news/tag/pong.html" title="pong (1)">pong</a></li>
     <li class="size2 tisch"><a href="index.php/news/tag/tisch.html" title="tisch (3)">tisch</a></li>
    </ul>
    </div>
    
    
    </body>
    </html>
    
     
  3. 22. November 2011
    AW: Tagcloud - Unterschiedlich grosse Schriftarten gleiche Höhe

    das problem ist, dass ich es nicht hinbekomme wie auf der beispielseite. sobald ich einer ".size x" eine andere schriftgröße zuweise, dann sind sie nicht mehr auf der gleichen linie. versteht ihr wie ich mein?
     
  4. 23. November 2011
    AW: Tagcloud - Unterschiedlich grosse Schriftarten gleiche Höhe

    geht doch
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
    <title>Unbenannt</title>
    <style type="text/css">
    .cloud {
     width: 320px;
    }
    .cloud li {
     list-style: none;
     display: inline-block;
     padding: 12px;
    }
    .size1 {
     font-size: 12px;
    }
    .size2 {
     font-size: 30px;
    }
    .size3 {
     font-size: 46px;
    }
    </style>
    </head>
    
    <body>
    
    <div class="mod_tagcloudnews block">
    <ul class="cloud">
     <li class="size2 ball"><a href="index.php/news/tag/ball.html" title="ball (3)">ball</a></li>
     <li class="size2 beer_pong"><a href="index.php/news/tag/beer%20pong.html" title="beer pong (2)">beer pong</a></li>
     <li class="size3 bier"><a href="index.php/news/tag/bier.html" title="bier (5)">bier</a></li>
     <li class="size1 pong"><a href="index.php/news/tag/pong.html" title="pong (1)">pong</a></li>
     <li class="size2 tisch"><a href="index.php/news/tag/tisch.html" title="tisch (3)">tisch</a></li>
     <li class="size2 ball"><a href="index.php/news/tag/ball.html" title="ball (3)">ball</a></li>
     <li class="size2 beer_pong"><a href="index.php/news/tag/beer%20pong.html" title="beer pong (2)">beer pong</a></li>
     <li class="size3 bier"><a href="index.php/news/tag/bier.html" title="bier (5)">bier</a></li>
     <li class="size1 pong"><a href="index.php/news/tag/pong.html" title="pong (1)">pong</a></li>
     <li class="size2 tisch"><a href="index.php/news/tag/tisch.html" title="tisch (3)">tisch</a></li>
     <li class="size2 ball"><a href="index.php/news/tag/ball.html" title="ball (3)">ball</a></li>
     <li class="size2 beer_pong"><a href="index.php/news/tag/beer%20pong.html" title="beer pong (2)">beer pong</a></li>
     <li class="size3 bier"><a href="index.php/news/tag/bier.html" title="bier (5)">bier</a></li>
     <li class="size1 pong"><a href="index.php/news/tag/pong.html" title="pong (1)">pong</a></li>
     <li class="size2 tisch"><a href="index.php/news/tag/tisch.html" title="tisch (3)">tisch</a></li>
     <li class="size2 ball"><a href="index.php/news/tag/ball.html" title="ball (3)">ball</a></li>
     <li class="size2 beer_pong"><a href="index.php/news/tag/beer%20pong.html" title="beer pong (2)">beer pong</a></li>
     <li class="size3 bier"><a href="index.php/news/tag/bier.html" title="bier (5)">bier</a></li>
     <li class="size1 pong"><a href="index.php/news/tag/pong.html" title="pong (1)">pong</a></li>
     <li class="size2 tisch"><a href="index.php/news/tag/tisch.html" title="tisch (3)">tisch</a></li>
    </ul>
    </div>
    </body>
    </html>
    
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.