Вход | Регистрация | FAQ
Anonymous

счётчик (counter-reset) внутри таблицы

+ Ответить

Сообщений: 6 Страница 1 из 1


счётчик (counter-reset) внутри таблицы

tambofff » Пн мар 10, 2014 6:07 am

Здравствуйте.
Для сайта понравился вот такой дизайн списка ссылок.
Именно хотелось бы - чтобы в два столбца.
Но проблема - не могу разобраться с настройками counter-reset: нужно, чтобы в правой ячейке продолжалась бы нумерация левого столбца, а не начиналось всё снова с 1.
Всё перепробовал - не получается.
Спасибо.

Код: Выделить всё
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8">
</HEAD>
<BODY bgcolor="#dddddd">
</TABLE>
<TABLE border=0 cellpadding=30 cellspacing=50>
<TR >
<TD>
    <style type="text/css">
    ol{
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 10px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 0px 0 rgba(255,255,255,.5);
    }

    ol ol{
    margin: 0 0 0 2em;
    }
 
    .rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em ;
    *padding: .4em;
    margin: 1.5em 0;
    background: #fff;
    color: #555;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
    }

    .rounded-list a:hover{
    background: #eee;
    }

    .rounded-list a:hover:before{
        transform: rotate(360deg);
    }

    .rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -0.9em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: 0.3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    }
    </style>

<ol class="rounded-list">
<li><a href="Ссылка на страницу" target="_blank">ffdgdg</a></li>
<li><a href="Ссылка на страницу" target="_blank">dfgdfgdf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfgfd</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfg</a></li>
<li><a href="Ссылка на страницу" target="_blank">fdgfd</a></li>
<li><a href="Ссылка на страницу" target="_blank">fdgfdgdf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfgfdg</a></li>
</ol>

</TD>

<TD>


<style type="text/css">
    ol{
  counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 10px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 0px 0 rgba(255,255,255,.5);
    }


    ol ol{
    margin: 0 0 0 2em;
    }
 
    .rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em ;
    *padding: .4em;
    margin: 1.5em 0;
    background: #fff;
    color: #555;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
    }

    .rounded-list a:hover{
    background: #eee;
    }

     .rounded-list a:hover:before{
        transform: rotate(360deg);
    }
 
    .rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -0.9em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: 0.3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    }
    </style>


<ol class="rounded-list">
<li><a href="Ссылка на страницу" target="_blank">sdfsdfds</a></li>
<li><a href="Ссылка на страницу/" target="_blank">dsdsdsf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">sddsfsdf</a></li>
<li><a href="Ссылка на страницу" target="_blank">dsfdsfdsf</a></li>
<li><a href="Ссылка на страницу" target="_blank">dfdsfdsf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">sdfdsfds</a></li>
<li><a href="Ссылка на страницу/" target="_blank">dsfdsfds</a></li>
</TD>
</TR>
</BODY>
  </HTML>

Аватара пользователя

tambofff

  • Сообщения: 3
  • Зарегистрирован: Пн мар 10, 2014 5:53 am

Re: счётчик (counter-reset) внутри таблицы

XainPro » Вт мар 11, 2014 10:36 am

<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8">
</HEAD>
<BODY bgcolor="#dddddd">
</TABLE>
<TABLE border=0 cellpadding=30 cellspacing=50>
<TR >
<TD>
<style type="text/css">
ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 10px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 0px 0 rgba(255,255,255,.5);
}

ol ol{
margin: 0 0 0 2em;
}

.rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em ;
*padding: .4em;
margin: 1.5em 0;
background: #fff;
color: #555;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}

.rounded-list a:hover{
background: #eee;
}

.rounded-list a:hover:before{
transform: rotate(360deg);
}

.rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -0.9em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: 0.3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
</style>

<ol class="rounded-list">
<li><a href="Ссылка на страницу" target="_blank">ffdgdg</a></li>
<li><a href="Ссылка на страницу" target="_blank">dfgdfgdf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfgfd</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfg</a></li>
<li><a href="Ссылка на страницу" target="_blank">fdgfd</a></li>
<li><a href="Ссылка на страницу" target="_blank">fdgfdgdf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfgfdg</a></li>
</ol>

</TD>

<TD>


<style type="text/css">
ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 10px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 0px 0 rgba(255,255,255,.5);
}


ol ol{
margin: 0 0 0 2em;
}

.rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em ;
*padding: .4em;
margin: 1.5em 0;
background: #fff;
color: #555;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}

.rounded-list a:hover{
background: #eee;
}

.rounded-list a:hover:before{
transform: rotate(360deg);
}

.rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -0.9em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: 0.3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
</style>


<ol class="rounded-list">
<li><a href="Ссылка на страницу" target="_blank">sdfsdfds</a></li>
<li><a href="Ссылка на страницу/" target="_blank">dsdsdsf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">sddsfsdf</a></li>
<li><a href="Ссылка на страницу" target="_blank">dsfdsfdsf</a></li>
</ol>
<ol class="rounded-list">
<li><a href="Ссылка на страницу" target="_blank">dfdsfdsf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">sdfdsfds</a></li>
<li><a href="Ссылка на страницу/" target="_blank">dsfdsfds</a></li>
</ol>

</TD>
</TR>
</BODY>
</HTML>
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm

Re: счётчик (counter-reset) внутри таблицы

tambofff » Ср мар 12, 2014 3:14 pm

Что-то не так. Нужно, чтобы нумерация в правом столбце начиналась с 8, а не снова с 1.
Аватара пользователя

tambofff

  • Сообщения: 3
  • Зарегистрирован: Пн мар 10, 2014 5:53 am

Re: счётчик (counter-reset) внутри таблицы

XainPro » Чт мар 13, 2014 6:44 am

<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8">
<style type="text/css">
ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 10px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 0px 0 rgba(255,255,255,.5);
}

ol ol{
margin: 0 0 0 2em;
}

.rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em ;
*padding: .4em;
margin: 1.5em 0;
background: #fff;
color: #555;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}

.rounded-list a:hover{
background: #eee;
}

.rounded-list a:hover:before{
transform: rotate(360deg);
}

.rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -0.9em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: 0.3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
</style>
</HEAD>
<BODY bgcolor="#dddddd">
<ol class="rounded-list">
<TABLE border=0 cellpadding=30 cellspacing=50>
<TR >
<TD>


<li><a href="Ссылка на страницу" target="_blank">ffdgdg</a></li>
<li><a href="Ссылка на страницу" target="_blank">dfgdfgdf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfgfd</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfg</a></li>
<li><a href="Ссылка на страницу" target="_blank">fdgfd</a></li>
<li><a href="Ссылка на страницу" target="_blank">fdgfdgdf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">fdgdfgfdg</a></li>


</TD>

<TD>



<li><a href="Ссылка на страницу" target="_blank">dfdsfdsf</a></li>
<li><a href="Ссылка на страницу/" target="_blank">sdfdsfds</a></li>
<li><a href="Ссылка на страницу/" target="_blank">dsfdsfds</a></li>


</TD>
</TR>
</TABLE>
</ol>
</BODY>
</HTML>
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm

Re: счётчик (counter-reset) внутри таблицы

tambofff » Вс мар 16, 2014 12:27 pm

Большое спасибо.
Аватара пользователя

tambofff

  • Сообщения: 3
  • Зарегистрирован: Пн мар 10, 2014 5:53 am

Re: счётчик (counter-reset) внутри таблицы

XainPro » Пн мар 17, 2014 12:10 pm

удача
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm


+ Ответить

Страница 1 из 1