Отвечу на вопросы по HTML, CSS, Jquery

icemen777, спасибо, помогло! Всё гениальное действительно просто.

Как понять семантику HTML5? :)

Столько вопросов про эти новые теги...

Например:

<aside> можно использовать как сайтбар, да?

В сайт баре обычно несколько колонок, значит код будет такой:

<section>

<aside>

  ...

</aside>

<aside>

  ....

</aside>

<aside>

....

</aside>

<section>

Или так логичнее будет?

<aside><!-- ЛЕВЫЙ САЙТБАР -->

        <section><!-- ПЕРВАЯ КОЛОНКА - НАВИГАЦИЯ -->

                <nav>

                        <ul>

                          <li></li>

                          <li></li>

                          <li></li>

                          <li></li>

                        </ul>

                </nav>

        </section>

        <section>

                <!-- ВТОРАЯ КОЛОНКА - РЕКЛАМА -->

        </section>

        <section>

                <!-- ТРЕТЬЯ КОЛОНКА - СТАТИСТИКА САЙТА -->

        </section>

</aside>

Короче вопросов море, а ответов мало :(

Если не сложно, дайте ещё ссылок на статьи, презентации, ...

Кроме htmlbook.ru я его уже покурил, но вопросов больше стало.

Как понять семантику HTML5?

Видите ли, я практик, мне важен результат. Для чего нужны эти красивые теги? Улучшают наглядность? Мне и так все видно хорошо. Поисковикам нужны? То же вопрос еще это. По мне так давайть классам понятные название да и все, за то стандартный див ведет себя надежно. Так что извините, я пока эти теги не хочу использывать. Уже не сколько раз пытался хотя бы шапку новыми тегами обозначить, все равно потом поменял на div id=head, консерватор, однако).

icemen777 добавил 10.10.2011 в 10:34

А на счет мануалов, самое сложное это помоему понять поведение разных типов блоков. Вот здесь товарищ очень хорошо все расписал - http://softwaremaniacs.org/blog/category/primer/

нужна помощь

есть блок с резиновой шириной, в нем мелкие блоки с float="left", каким образом их выровнять по центру?

у меня они жмутся к левому краю и справа иногда пустое место остается

<style type="text/css">

#block{

	float:left;

	padding:5px 10px;

	margin-top:5px;

	width:300px;

	height:400px}

#block img {

	width:300px; height:150px;

	float:none}

#block h3 {

	height:60px;}



</style>



<div id="content">

<div id="block" align="justify"><h3><a href="">Lorem ipsum dolor sit amet?</a></h3><img src="" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non massa lectus. Etiam neque libero, molestie id rhoncus vitae, semper nec erat. Vestibulum accumsan urna ut urna tincidunt sagittis porta sapien dapibus. Aenean in augue ipsum. Sed vitae sapien vel erat porttitor pellentesque at sit amet nulla. Donec mattis ante eu augue lobortis mattis. Morbi in risus ac ante rutrum tincidunt vel eget velit. Aliquam vitae tristique erat. Donec feugiat suscipit erat, sagittis vehicula arcu imperdiet eget. Nam aliquet nibh eu dui iaculis ullamcorper. Integer tristique auctor ipsum id blandit. Morbi commodo sapien sit amet quam viverra malesuada. Nunc eu diam ligula, et dignissim tortor.</p></div>



<div id="block" align="justify"><h3><a href="">Lorem ipsum dolor sit amet</a></h3><img src="" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non massa lectus. Etiam neque libero, molestie id rhoncus vitae, semper nec erat. Vestibulum accumsan urna ut urna tincidunt sagittis porta sapien dapibus. Aenean in augue ipsum. Sed vitae sapien vel erat porttitor pellentesque at sit amet nulla. Donec mattis ante eu augue lobortis mattis. Morbi in risus ac ante rutrum tincidunt vel eget velit. Aliquam vitae tristique erat. Donec feugiat suscipit erat, sagittis vehicula arcu imperdiet eget. Nam aliquet nibh eu dui iaculis ullamcorper. Integer tristique auctor ipsum id blandit. Morbi commodo sapien sit amet quam viverra malesuada. Nunc eu diam ligula, et dignissim tortor.</p></div>



<div id="block" align="justify"><h3><a href="">Lorem ipsum dolor sit amet</a></h3><img src="" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non massa lectus. Etiam neque libero, molestie id rhoncus vitae, semper nec erat. Vestibulum accumsan urna ut urna tincidunt sagittis porta sapien dapibus. Aenean in augue ipsum. Sed vitae sapien vel erat porttitor pellentesque at sit amet nulla. Donec mattis ante eu augue lobortis mattis. Morbi in risus ac ante rutrum tincidunt vel eget velit. Aliquam vitae tristique erat. Donec feugiat suscipit erat, sagittis vehicula arcu imperdiet eget. Nam aliquet nibh eu dui iaculis ullamcorper. Integer tristique auctor ipsum id blandit. Morbi commodo sapien sit amet quam viverra malesuada. Nunc eu diam ligula, et dignissim tortor.</p></div>



<div id="block" align="justify"><h3><a href="">Lorem ipsum dolor sit amet</a></h3><img src="" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non massa lectus. Etiam neque libero, molestie id rhoncus vitae, semper nec erat. Vestibulum accumsan urna ut urna tincidunt sagittis porta sapien dapibus. Aenean in augue ipsum. Sed vitae sapien vel erat porttitor pellentesque at sit amet nulla. Donec mattis ante eu augue lobortis mattis. Morbi in risus ac ante rutrum tincidunt vel eget velit. Aliquam vitae tristique erat. Donec feugiat suscipit erat, sagittis vehicula arcu imperdiet eget. Nam aliquet nibh eu dui iaculis ullamcorper. Integer tristique auctor ipsum id blandit. Morbi commodo sapien sit amet quam viverra malesuada. Nunc eu diam ligula, et dignissim tortor.</p></div>



<div id="block" align="justify"><h3><a href="">Lorem ipsum dolor sit amet</a></h3><img src="" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non massa lectus. Etiam neque libero, molestie id rhoncus vitae, semper nec erat. Vestibulum accumsan urna ut urna tincidunt sagittis porta sapien dapibus. Aenean in augue ipsum. Sed vitae sapien vel erat porttitor pellentesque at sit amet nulla. Donec mattis ante eu augue lobortis mattis. Morbi in risus ac ante rutrum tincidunt vel eget velit. Aliquam vitae tristique erat. Donec feugiat suscipit erat, sagittis vehicula arcu imperdiet eget. Nam aliquet nibh eu dui iaculis ullamcorper. Integer tristique auctor ipsum id blandit. Morbi commodo sapien sit amet quam viverra malesuada. Nunc eu diam ligula, et dignissim tortor.</p></div>



<div id="block" align="justify"><h3><a href="">Lorem ipsum dolor sit amet</a></h3><img src="" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non massa lectus. Etiam neque libero, molestie id rhoncus vitae, semper nec erat. Vestibulum accumsan urna ut urna tincidunt sagittis porta sapien dapibus. Aenean in augue ipsum. Sed vitae sapien vel erat porttitor pellentesque at sit amet nulla. Donec mattis ante eu augue lobortis mattis. Morbi in risus ac ante rutrum tincidunt vel eget velit. Aliquam vitae tristique erat. Donec feugiat suscipit erat, sagittis vehicula arcu imperdiet eget. Nam aliquet nibh eu dui iaculis ullamcorper. Integer tristique auctor ipsum id blandit. Morbi commodo sapien sit amet quam viverra malesuada. Nunc eu diam ligula, et dignissim tortor.</p></div>



</div>

icemen777, спасибо.

icemen777, ну вот такая вот задачка

Такая фигня наблюдается в Opere.

Если прокрутить слой вниз и что то начать вводить в поле ввода, то происходит прокрутка слоя наверх, кто знает как решить такую проблему (причем происходит это только если фиксированный слой выше основного).

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>

    <title></title>

    <meta http-equiv="Content-Language" content="ru">

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

    <meta name="author" content="">

    <meta name="keywords" content="">

    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="">

    <link rel="shortcut icon" type="image/x-icon" href="">

    <script language="JavaScript" type="text/javascript">

    <!--

      function stPr(e){

        return 1;

      }

    //-->

    </script>

    

  </head>

  <body>

    <div style="position:relative;height:700px;width:800px; overflow:auto;margin-top:100px;">

      <table cellspacing=0 cellpadding=0 width="100%" border="1px solid black">

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 1</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 2</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 3</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 4</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 5</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 6</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 6</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 7</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 8</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 9</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 10</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 1</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 12</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 13</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 14</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 1</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 2</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 3</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 4</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 5</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 6</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 7</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 8</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 9</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 1</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 1</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 1</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 2</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 3</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 4</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 5</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 6</div></td>      </tr>

        <tr>        <td width="50px"> <div style="height:30px">rrrrr 1</div></td>      </tr>

      </table>



      <div id="" style="position: fixed; left: 340px; top: 40px; z-index: 1002; background-color: #d3d3d3;

          width: 800px; height: 600px; overflow-x: auto; overflow-y: auto; display: block">



         <input size="40"  name="" type="text" value="jj"/>

      </div>

    </div>



  </body>

</html>

в моей теме мне никто не ответил, может вы знаете решение ?

YuLink, не используйте свойство margin-top, input лучше всегда обернуть form. А так честно говоря не ничего сказать, потому как в моей опере ничего никуда не прокручивает, но выглядит странно). А отступы для верхнего края элементов нужно использывать с осторожностью, потому как они всегда стремяться складываться с преыдущими блоками. Я вообще их не использую, только для глобальных самых верхних блоков, таких как page, например.

icemen777 добавил 11.10.2011 в 11:33

fizmatik, Вы будете смеяться), но выровнять без дополнительных ухищрений их не возможно. Нет таких правил CSS. Но, вот один из вариантов http://www.xiper.net/collect/html-and-css-tricks/pozitsionirovanie/inline-block.html

Весь прикол CSS2 в том, что мы его заставляем делать то, для чего он не был предназначен, мы хотим управлять графикой и вообще произвольным содержимым, а он был придуман лишь для работы с текстами. HTML абревиатура ведь нам и говорит, язык разметки текста. Отсюда все проблемы верстки. Хорошо хоть position:absolute; придумали и слои. Сначала и этого не было).

margin-top специально сделан чтобы смоделировать ситуацию, когда блок с position:fixed находится выше верхнего края родительского блока. Очень странно, что у Вас паразитная прокрутка не происходит... У меня и на 10 и на 11.51 опере этот нехороший эффект происходит

Позвольте, а что Вам не понравилось в новых тегах? С какой сложностью столкнулись, кроме собственного консерватизма :)

Выше края родительского блока? Так сделать родительским блок body и забыть про проблему, ведь для блока с таким позиционирыванием все равно кто у него родитель. Разве нет?

icemen777 добавил 11.10.2011 в 22:38

radova, Пока только консерватизм и сомнительность выгоды. Ну наверно так и должно быть, когда все таблицами верстали, потом тоже долго многие не хотели на блочную переходить.