CSS Forum

**spuckle** · 02-17-2010, 08:40 AM

I have too many items for one row of tabs, how do I get the second row?

You'll also need to DL this pic as tab.png

Here's my working fine one row code ()

design.css

Code:

ol#toc {    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
ol#toc li {
    float: left;
    margin: 0 1px 0 0;
}
 
ol#toc a {
    background: #bdf url(tab.png);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}
 
ol#toc a:hover {
    background-color: #3af;
    background-position: 0 -120px;
}
 
ol#toc a:hover span {
    background-position: 100% -120px;
}
 
ol#toc li.current a {
    background-color: #48f;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}
 
ol#toc li.current span {
    background-position: 100% -60px;
}
 
ol#toc span {
    background: url(tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}
 
div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

h1.html

Code:

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1 row</title>
    <link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>1 row</h1>
<ol id="toc">
    <li class="current"><a href="h1.html"><span>H1</span></a></li>
    <li><a href="h2.html"><span>H2</span></a></li>
    <li><a href="h3.html"><span>H3</span></a></li>
</ol>
<div class="content">
    <h2>H1</h2>
    <p>Pic and text...</p>
</div>
</body>
</html>

Here's my attempt at 2 rows!
design2rows.css

Code:

ol#toc {    height: 2em;list-style: none;
    margin: 0;
    padding: 0;
}
 
ol#toc li.first {
    float: left;
    margin: 0 1px 0 0;
}
 
ol#toc li.drop {
    clear: left;
    margin: 0 1px 0 0;
    padding:0 0 0 6px;
}
 
ol#toc a {
    background: #bdf url(tab.png);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}
 
ol#toc a:hover {
    background-color: #3af;
    background-position: 0 -120px;
}
 
ol#toc a:hover span {
    background-position: 100% -120px;
}
 
ol#toc li.current a {
    background-color: #48f;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}
 
ol#toc li.current span {
    background-position: 100% -60px;
}
 
ol#toc span {
    background: url(tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}
 
div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

q1.html

Code:

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tab 2 row</title>
    <link href="design2row.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tab 2 row</h1>
<ol id="toc">
    <li class="first">
    <li class="current"><a href="q1.html"><span>1</span></a></li>
    <li><a href="q2.html"><span>2</span></a></li>
    <li><a href="q3.html"><span>3</span></a></li>
    <li><a href="q4.html"><span>4</span></a></li>
    <li><a href="q5.html"><span>5</span></a></li>
    <li><a href="q6.html"><span>6</span></a></li>
    <li><a href="q7.html"><span>7</span></a></li>
    <li><a href="q8.html"><span>8</span></a></li>
    <li><a href="q9.html"><span>9</span></a></li>
    <li><a href="q10.html"><span>10</span></a></li>
    <li><a href="q11.html"><span>11</span></a></li>
    <li><a href="q12.html"><span>12</span></a></li>
    <li><a href="q13.html"><span>13</span></a></li>
    <li><a href="q14.html"><span>14</span></a></li>
    <li><a href="q15.html"><span>15</span></a></li>
    <li><a href="q16.html"><span>16</span></a></li>
    <li><a href="q17.html"><span>17</span></a></li>
    <li><a href="q18.html"><span>18</span></a></li>
    </li>
    <li class="drop">
    <li><a href="q19.html"><span>19</span></a></li>
    <li><a href="q20.html"><span>20</span></a></li>
    <li><a href="q21.html"><span>21</span></a></li>
    </li>
</ol>
<div class="content">
    <h2>1</h2>
    <p>Pic and text...</p>
</div>
</body>
</html>

**chrishirst** · 02-17-2010, 11:41 AM

break the floats where you want the "turn around" to happen.