Система сеток 960 - у вложенных сеток проблемы с разметкой
Я только начал разрабатывать для себя сайт для хобби и пытался использовать 960 сеточную систему css для размещения своих элементов html. на экране.
Я получил основную идею и только что реализовал скелет веб-сайта здесь, на моем сервере
У меня есть несколько вопросов:
- log in
- faq
LOGO, TITLE and SLOGAN all go here!
Я использую шаблон на основе сетки 12, следовательно, общее количество «сеток» в каждой «строке» должно быть 12. Однако я могу создать только два элемента в одной «строке». Я считаю, что все еще можно использовать цветные границы при отладке вложенных сеток, есть специальный способ «обмануть»:
.grid_insider
{
border : 1px solid red;
margin : -1px; /* this will stop the element from 'expanding' its space */
}
10
задан Tomasz Błachowicz 5 June 2011 в 22:01
поделиться
1 ответ
Не уверен, что вы не поняли, но фреймворк предоставляет метод для вложенных элементов.
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
Это переопределяет поля, которые они дают всем элементам сетки, таким образом позволяя боковым элементам опираться на стороны своих контейнеров.
Что вам нужно сделать, так это присвоить левой строке меню класс alpha, а правой — класс omega. Затем вам придется удалить все границы, которые вы добавили к этим двум элементам и их контейнеру. Это связано с тем, что CSS float очень точен и сломается, если вы сделаете элементы больше, чем определенная структура.
Если вам нужно добавить границы, вам придется добавить некоторые дополнительные стили, которые переопределяют их и задают им ширину на два пикселя (по одному для каждой стороны границы) меньше, чем определено во фреймворке.