CODEWITHSUNDEEP
htmlcssword-wrap
FosAvance
FosAvance

Reputation: 2469

Wrap text in vertical menu

This is my simple code of menu

  <ul id="admin-ul">
    <li id="admin-li" class="no1"><a href="dodaj.php">Dodaj informacije za sdf dsf dsfdddd</a></li>
    <li id="admin-li" class="no2"><a href="pregledaj.php">Pregledaj</a></li>
    <li id="admin-li" class="no3"><a href="veterinari.php">Veterinari</a></li>
    <li id="admin-li" class="no4"><a href="../logout.php">Logout</a></li>
  </ul>

and CSS

ul#admin-ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}

li#admin-li
{
    display:inline-block;
    width:24%;
    height:270px;
}

ul li a
{
    display:block;
    height:270px;
    line-height:270px;
    text-align:center;
}

I would like to know how to wrap my text because it is showing like this enter image description here

Upvotes: 1

Views: 584

Answers (2)

insertusernamehere
insertusernamehere

Reputation: 23580

Simply use vertical-align: top on your <li>s. Please note that all ids must be unique so this is invalid HTML:

<li id="admin-li" class="no1"><a href="dodaj.php"></a></li>
<li id="admin-li" class="no1"><a href="dodaj.php"></a></li>

You can style all <li>s more easily using the child selector like this:

ul#admin-ul > li {
    /* other li rules */
    vertical-algin: top;
}

You can than update your list to this:

<ul id="admin-ul">
    <li class="no1"><a href="dodaj.php"></a></li>
    <li class="no1"><a href="dodaj.php"></a></li>
</ul>

Final demo: http://jsfiddle.net/eXKdG/

Update

As I didn't notice the vertical centering of the text within the block level <a>-tag: tesdki is right in simply using display: table-cell; on the <a>-tags.

Upvotes: 2

tedski
tedski

Reputation: 2311

Try this out:

ul#admin-ul
{
    list-style-type:none;
    margin:1em 0 0 0;
    padding:0;
}

li#admin-li
{
    display:table;
    width:24%;
    position:relative;
    float:left;
    overflow:hidden;
    height:270px;
    margin: 0 3px;
}

ul li a
{
    display:table-cell;
    vertical-align:middle;
    height:270px;
    text-align:center;
}

Derived from here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

This doesn't work in IE7 standard mode, but pretty much everything else is good.

Upvotes: 1

Related Questions