[sonya777]

Всем привет, возможно ли осуществить такой календарь как на этом сайте http://povody.ru/ при помощи html и css ? И если возможно, то как! Подскажите пожалуйста!

[Асмодиан]

Эммм... хмммм... тут как ни крути нужен JavaScript...

[Niemans]

А вырезать с этого сайта никак?

[Асмодиан]

Я тебя спешу огорчить. Более отвратной реализации календаря я ещё не встречал. Он же не сдвинут по дням недели. Просто список дней для каждого месяца!!!
PS (с жёстким высокосным годом)

[sonya777]

В общем сайт хочу сделать о праздниках, а у нас каждый день как известно празднил! Вот мне надо чтобы посетитель мог как можно проще попасть на любую страницу сайта с главной! И все это при помощи html и css !

[Асмодиан]

посмотрите код страницы, и приложенные к ней js. там всё найдёте...

[sonya777]

Сообщение от Асмодиан

посмотрите код страницы, и приложенные к ней js. там всё найдёте...

Ага, спасибо! Ооооооооооооооооооочень помог ! знал бы я еще как это все приложить

[Асмодиан]

Ну блинский нафик. Ну хорошо:
вот html внутрь head

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="/js/user.js"></script>

вот те html (вставить туды, где должен быть календарь)

<div id="calendar"><select name="month" id="month_select"><option value="january" selected>Январь</option><option value="february">Февраль</option><option value="march">Март</option><option value="april">Апрель</option><option value="may">Май</option><option value="june">Июнь</option><option value="july">Июль</option><option value="august">Август</option><option value="september">Сентябрь</option><option value="october">Октябрь</option><option value="november">Ноябрь</option><option value="december">Декабрь</option></select><div id="january" class="month"><a href='/january/1' class='curr'>1</a><a href='/january/2'>2</a><a href='/january/3'>3</a><a href='/january/4'>4</a><a href='/january/5'>5</a><a href='/january/6'>6</a><a href='/january/7'>7</a><a href='/january/8'>8</a><a href='/january/9'>9</a><a href='/january/10'>10</a><a href='/january/11'>11</a><a href='/january/12'>12</a><a href='/january/13'>13</a><a href='/january/14'>14</a><a href='/january/15'>15</a><a href='/january/16'>16</a><a href='/january/17'>17</a><a href='/january/18'>18</a><a href='/january/19'>19</a><a href='/january/20'>20</a><a href='/january/21'>21</a><a href='/january/22'>22</a><a href='/january/23'>23</a><a href='/january/24'>24</a><a href='/january/25'>25</a><a href='/january/26'>26</a><a href='/january/27'>27</a><a href='/january/28'>28</a><a href='/january/29'>29</a><a href='/january/30'>30</a><a href='/january/31'>31</a></div><div id="february" class="month"><a href='/february/1' class='curr'>1</a><a href='/february/2'>2</a><a href='/february/3'>3</a><a href='/february/4'>4</a><a href='/february/5'>5</a><a href='/february/6'>6</a><a href='/february/7'>7</a><a href='/february/8'>8</a><a href='/february/9'>9</a><a href='/february/10'>10</a><a href='/february/11'>11</a><a href='/february/12'>12</a><a href='/february/13'>13</a><a href='/february/14'>14</a><a href='/february/15'>15</a><a href='/february/16'>16</a><a href='/february/17'>17</a><a href='/february/18'>18</a><a href='/february/19'>19</a><a href='/february/20'>20</a><a href='/february/21'>21</a><a href='/february/22'>22</a><a href='/february/23'>23</a><a href='/february/24'>24</a><a href='/february/25'>25</a><a href='/february/26'>26</a><a href='/february/27'>27</a><a href='/february/28'>28</a><a href='/february/29'>29</a></div><div id="march" class="month"><a href='/march/1' class='curr'>1</a><a href='/march/2'>2</a><a href='/march/3'>3</a><a href='/march/4'>4</a><a href='/march/5'>5</a><a href='/march/6'>6</a><a href='/march/7'>7</a><a href='/march/8'>8</a><a href='/march/9'>9</a><a href='/march/10'>10</a><a href='/march/11'>11</a><a href='/march/12'>12</a><a href='/march/13'>13</a><a href='/march/14'>14</a><a href='/march/15'>15</a><a href='/march/16'>16</a><a href='/march/17'>17</a><a href='/march/18'>18</a><a href='/march/19'>19</a><a href='/march/20'>20</a><a href='/march/21'>21</a><a href='/march/22'>22</a><a href='/march/23'>23</a><a href='/march/24'>24</a><a href='/march/25'>25</a><a href='/march/26'>26</a><a href='/march/27'>27</a><a href='/march/28'>28</a><a href='/march/29'>29</a><a href='/march/30'>30</a><a href='/march/31'>31</a></div><div id="april" class="month"><a href='/april/1' class='curr'>1</a><a href='/april/2'>2</a><a href='/april/3'>3</a><a href='/april/4'>4</a><a href='/april/5'>5</a><a href='/april/6'>6</a><a href='/april/7'>7</a><a href='/april/8'>8</a><a href='/april/9'>9</a><a href='/april/10'>10</a><a href='/april/11'>11</a><a href='/april/12'>12</a><a href='/april/13'>13</a><a href='/april/14'>14</a><a href='/april/15'>15</a><a href='/april/16'>16</a><a href='/april/17'>17</a><a href='/april/18'>18</a><a href='/april/19'>19</a><a href='/april/20'>20</a><a href='/april/21'>21</a><a href='/april/22'>22</a><a href='/april/23'>23</a><a href='/april/24'>24</a><a href='/april/25'>25</a><a href='/april/26'>26</a><a href='/april/27'>27</a><a href='/april/28'>28</a><a href='/april/29'>29</a><a href='/april/30'>30</a></div><div id="may" class="month"><a href='/may/1' class='curr'>1</a><a href='/may/2'>2</a><a href='/may/3'>3</a><a href='/may/4'>4</a><a href='/may/5'>5</a><a href='/may/6'>6</a><a href='/may/7'>7</a><a href='/may/8'>8</a><a href='/may/9'>9</a><a href='/may/10'>10</a><a href='/may/11'>11</a><a href='/may/12'>12</a><a href='/may/13'>13</a><a href='/may/14'>14</a><a href='/may/15'>15</a><a href='/may/16'>16</a><a href='/may/17'>17</a><a href='/may/18'>18</a><a href='/may/19'>19</a><a href='/may/20'>20</a><a href='/may/21'>21</a><a href='/may/22'>22</a><a href='/may/23'>23</a><a href='/may/24'>24</a><a href='/may/25'>25</a><a href='/may/26'>26</a><a href='/may/27'>27</a><a href='/may/28'>28</a><a href='/may/29'>29</a><a href='/may/30'>30</a><a href='/may/31'>31</a></div><div id="june" class="month"><a href='/june/1' class='curr'>1</a><a href='/june/2'>2</a><a href='/june/3'>3</a><a href='/june/4'>4</a><a href='/june/5'>5</a><a href='/june/6'>6</a><a href='/june/7'>7</a><a href='/june/8'>8</a><a href='/june/9'>9</a><a href='/june/10'>10</a><a href='/june/11'>11</a><a href='/june/12'>12</a><a href='/june/13'>13</a><a href='/june/14'>14</a><a href='/june/15'>15</a><a href='/june/16'>16</a><a href='/june/17'>17</a><a href='/june/18'>18</a><a href='/june/19'>19</a><a href='/june/20'>20</a><a href='/june/21'>21</a><a href='/june/22'>22</a><a href='/june/23'>23</a><a href='/june/24'>24</a><a href='/june/25'>25</a><a href='/june/26'>26</a><a href='/june/27'>27</a><a href='/june/28'>28</a><a href='/june/29'>29</a><a href='/june/30'>30</a></div><div id="july" class="month"><a href='/july/1' class='curr'>1</a><a href='/july/2'>2</a><a href='/july/3'>3</a><a href='/july/4'>4</a><a href='/july/5'>5</a><a href='/july/6'>6</a><a href='/july/7'>7</a><a href='/july/8'>8</a><a href='/july/9'>9</a><a href='/july/10'>10</a><a href='/july/11'>11</a><a href='/july/12'>12</a><a href='/july/13'>13</a><a href='/july/14'>14</a><a href='/july/15'>15</a><a href='/july/16'>16</a><a href='/july/17'>17</a><a href='/july/18'>18</a><a href='/july/19'>19</a><a href='/july/20'>20</a><a href='/july/21'>21</a><a href='/july/22'>22</a><a href='/july/23'>23</a><a href='/july/24'>24</a><a href='/july/25'>25</a><a href='/july/26'>26</a><a href='/july/27'>27</a><a href='/july/28'>28</a><a href='/july/29'>29</a><a href='/july/30'>30</a><a href='/july/31'>31</a></div><div id="august" class="month"><a href='/august/1' class='curr'>1</a><a href='/august/2'>2</a><a href='/august/3'>3</a><a href='/august/4'>4</a><a href='/august/5'>5</a><a href='/august/6'>6</a><a href='/august/7'>7</a><a href='/august/8'>8</a><a href='/august/9'>9</a><a href='/august/10'>10</a><a href='/august/11'>11</a><a href='/august/12'>12</a><a href='/august/13'>13</a><a href='/august/14'>14</a><a href='/august/15'>15</a><a href='/august/16'>16</a><a href='/august/17'>17</a><a href='/august/18'>18</a><a href='/august/19'>19</a><a href='/august/20'>20</a><a href='/august/21'>21</a><a href='/august/22'>22</a><a href='/august/23'>23</a><a href='/august/24'>24</a><a href='/august/25'>25</a><a href='/august/26'>26</a><a href='/august/27'>27</a><a href='/august/28'>28</a><a href='/august/29'>29</a><a href='/august/30'>30</a><a href='/august/31'>31</a></div><div id="september" class="month"><a href='/september/1' class='curr'>1</a><a href='/september/2'>2</a><a href='/september/3'>3</a><a href='/september/4'>4</a><a href='/september/5'>5</a><a href='/september/6'>6</a><a href='/september/7'>7</a><a href='/september/8'>8</a><a href='/september/9'>9</a><a href='/september/10'>10</a><a href='/september/11'>11</a><a href='/september/12'>12</a><a href='/september/13'>13</a><a href='/september/14'>14</a><a href='/september/15'>15</a><a href='/september/16'>16</a><a href='/september/17'>17</a><a href='/september/18'>18</a><a href='/september/19'>19</a><a href='/september/20'>20</a><a href='/september/21'>21</a><a href='/september/22'>22</a><a href='/september/23'>23</a><a href='/september/24'>24</a><a href='/september/25'>25</a><a href='/september/26'>26</a><a href='/september/27'>27</a><a href='/september/28'>28</a><a href='/september/29'>29</a><a href='/september/30'>30</a></div><div id="october" class="month"><a href='/october/1' class='curr'>1</a><a href='/october/2'>2</a><a href='/october/3'>3</a><a href='/october/4'>4</a><a href='/october/5'>5</a><a href='/october/6'>6</a><a href='/october/7'>7</a><a href='/october/8'>8</a><a href='/october/9'>9</a><a href='/october/10'>10</a><a href='/october/11'>11</a><a href='/october/12'>12</a><a href='/october/13'>13</a><a href='/october/14'>14</a><a href='/october/15'>15</a><a href='/october/16'>16</a><a href='/october/17'>17</a><a href='/october/18'>18</a><a href='/october/19'>19</a><a href='/october/20'>20</a><a href='/october/21'>21</a><a href='/october/22'>22</a><a href='/october/23'>23</a><a href='/october/24'>24</a><a href='/october/25'>25</a><a href='/october/26'>26</a><a href='/october/27'>27</a><a href='/october/28'>28</a><a href='/october/29'>29</a><a href='/october/30'>30</a><a href='/october/31'>31</a></div><div id="november" class="month"><a href='/november/1' class='curr'>1</a><a href='/november/2'>2</a><a href='/november/3'>3</a><a href='/november/4'>4</a><a href='/november/5'>5</a><a href='/november/6'>6</a><a href='/november/7'>7</a><a href='/november/8'>8</a><a href='/november/9'>9</a><a href='/november/10'>10</a><a href='/november/11'>11</a><a href='/november/12'>12</a><a href='/november/13'>13</a><a href='/november/14'>14</a><a href='/november/15'>15</a><a href='/november/16'>16</a><a href='/november/17'>17</a><a href='/november/18'>18</a><a href='/november/19'>19</a><a href='/november/20'>20</a><a href='/november/21'>21</a><a href='/november/22'>22</a><a href='/november/23'>23</a><a href='/november/24'>24</a><a href='/november/25'>25</a><a href='/november/26'>26</a><a href='/november/27'>27</a><a href='/november/28'>28</a><a href='/november/29'>29</a><a href='/november/30'>30</a></div><div id="december" class="month"><a href='/december/1' class='curr'>1</a><a href='/december/2'>2</a><a href='/december/3'>3</a><a href='/december/4'>4</a><a href='/december/5'>5</a><a href='/december/6'>6</a><a href='/december/7'>7</a><a href='/december/8'>8</a><a href='/december/9'>9</a><a href='/december/10'>10</a><a href='/december/11'>11</a><a href='/december/12'>12</a><a href='/december/13'>13</a><a href='/december/14'>14</a><a href='/december/15'>15</a><a href='/december/16'>16</a><a href='/december/17'>17</a><a href='/december/18'>18</a><a href='/december/19'>19</a><a href='/december/20'>20</a><a href='/december/21'>21</a><a href='/december/22'>22</a><a href='/december/23'>23</a><a href='/december/24'>24</a><a href='/december/25'>25</a><a href='/december/26'>26</a><a href='/december/27'>27</a><a href='/december/28'>28</a><a href='/december/29'>29</a><a href='/december/30'>30</a><a href='/december/31'>31</a></div></div>

Вот css, отвечающий за эту хрень:

#calendar{
width:170px;
height:170px;
position:relative;
top:320px;
left:65px;
text-align:center;
font-size:11pt;
}
#month_select{
width:150px;
margin-bottom:20px;
}
.month{
display:none;
}
.month a{
width:20px;
height:20px;
text-align:center;
display:block;
float:left;
text-decoration:none;
font-weight:700;
margin:0px 2px 2px 0px;
color:#000;
background-color:#fff;
border:1px solid #ccc;
}
.month a.curr{
color:#ccc;
background-color:#f22;
border:1px solid #c88;
}
.month a:hover{
color:#fff;
background-color:#f00;
border:1px solid #f66;
}

и вот те файлик js/user.js (второй не нужен, так как он берётся с законного места.

// JavaScript Document
$(document).ready(function(){											 
	var month =	$('#month_select').attr('value');
	$('#'+month).css('display', 'block');
	
	$('#month_select').change(function(){
		var month = $(this).attr('value');
		$('.month').each(function(){
			$(this).css('display', 'none');
		});
		$('#'+month).css('display', 'block');
	});
});

ну сложно выдрать чтоли?????

[sonya777]

У меня только вот эта штука получились! а дней нет

[Асмодиан]

Вы javascript подключили?

Добавлено через 21 секунду

(если да, то выберите месяц)