August 20, 201016 yr Hello I really might need some help... So I've got main box - with limited width. User with CMS can add as many buttons as he likes... And these buttons are created from three parts- so they can adjust to content. While there is no more space for buttons: last button should become "two-storey" - with two lines of text... Has anybody got an idea how I can achieve that? Any help really appreciated! (I'm front-end guy not cms-maker;p)
August 20, 201016 yr Not 100% sure what you mean but what cms are you using and are you using a theme
August 20, 201016 yr Author I'm not sure I've chosen correct forum's section;p I'm html coder - but still - my code will be used by cms-makers Anyway: there's no theme, cms is from scratch I guess.
August 20, 201016 yr Author what do you mean? I don't think float alone will help I was thinking maybe conditions.. if number of tabs is something and their width is something then words start to locate above themselves;p hmm or tables?
August 20, 201016 yr Just let the link containers *float* naturally, and when there's no more room they will automatically flow to a second line.
August 20, 201016 yr Author I don't want containers to flow;p but text inside them to be in two lines;p
August 20, 201016 yr <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> #floats {} #floats ul {margin: 0; padding: 0;} #floats ul li {list-style-type: none; float: left; display: inline;} #floats ul li a {color: #fff; display: block; background: #900; margin: 5px 2px; padding: 5px 10px;} </style> </head> <body> <div id="floats"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> </ul> </div> </body> </html>
Create an account or sign in to comment