Блог

С чего бы мне начать, если бы я хотел сделать что-то вроде следующей иллюстрации, используя разметку, показанную ниже?

Макет http://img714.imageshack.us/img714/2126/asdasdegg9f583.png

Фрагмент разметки:

 <ul id="toc">
    <li>Lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>Sed</li>
    <li>elementum</li>
    <li>dictum</li>
    <li>elit</li>
    <li>sit</li>
    <li>amet</li>
    <li>hendrerit.</li>
    <li>Aenean</li>
    <li>eget</li>
    <li>dictum</li>
    <li>magna.</li>
    <li>Vivamus</li>
    <li>elementum</li>
    <li>sapien</li>
    <li>volutpat</li>
    <li>dapibus</li>
    <li>ipsum</li>
    <li>laoreet</li>
</ul>
<section id="page">
</section>
  

<section> Это была бы часть, заштрихованная красным, а элементами списка были бы поля, окружающие <section> .

Могу ли я просто использовать HTML и CSS для этого или мне нужно использовать Javascript? Я был бы признателен любому, кто мог бы помочь мне указать правильное направление. Спасибо.

У вас есть поля в верхней, правой и левой областях, для этого мне пришло в голову 2 решения:

1. Используйте три разных набора ul li для top, right и left, затем обрабатывайте их отдельно с помощью css для верхних блоков используйте float:left, height и overflow hidden, также указывайте ширину и высоту родительского тега «ul», а затем размещайте его сверху. Для тегов left вам не нужно использовать float для li, просто укажите их ширину, высоту и overflow hidden, а затем разместите его родительский ul. Проделайте аналогично с right.

2. Используя один и тот же набор ul li, вам нужно будет поместить имена классов в каждый li, чтобы расположить их в нужном месте.

Имеет смысл? 🙂

попробуйте использовать сетки oocss http://oocss.org/grids_docs.html