X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

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

Открыть тему
Тема закрыта
> Прошу помочь с DIV`ной версткой макета
igorlesnoj
igorlesnoj
Topic Starter сообщение 28.2.2010, 5:58; Ответить: igorlesnoj
Сообщение #1


Прошу помочь с DIV`ной версткой макета

Условие:
[IMG]http://www.imagepost.ru/images/66/pCVn01E.png[/IMG]
Fix - помечены фиксированные размеры

Мое решение:

<div class="main">
<div class="string1">
<div class="box2_3">
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="box1"></div>
</div>
<div class="string2">
<div class="box4"></div>
</div>
<div class="string3">
<div class="box6"></div>
<div class="box5_7">
<div class="box5"></div>
<div class="box7"></div>
</div>
</div>
<div class="string4">
<div class="box8"></div>
<div class="box9_10_11_12">
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</div>
</div>
<div class="string5">
<div class="box13"></div>
</div>
</div>
Вот порядок и логика моих действий:

1. Блок main я использую я для выравнивания всего содержимого в окне браузера;
2. Определяю основные блоки (строки) располагающиеся вертикально друг под другом: string1, string2, string3, string4, string5;
3. Далее начинаю по порядку их заполнять:
string1: box1, box2+3, box2, box3;
string2: box4;
string3: box5+7, box 5, box7, box6;
string4: box8, box9+10+11+12, box9, box10+11, box10, box11, box12
string5: box13;
4. Далее начинаю заниматься их выравниванием;
Первая строка:
html - порядок: box2+3 включает box2 и box3, box1 // box2+3 прописываю первым поскольку этот бокс имеет фиксированную ширину
css
box2+3: float:right, width;
box1: margin-right;
Вторая строка:
css
box4: сlear: right;
Третяя строка:
html - порядок: box6, box5+7 включает box5 и box7
css
box6: float:right, width;
box5+7: margin-right;
Четвертая строка:
html - порядок: box8, box9+10+11+12, box9, box10+11, box10, box11, box12
css
box8: float:left, width;
box9+10+11+12: margin-left;
box10: float: left // как сделать box10 и box11 равными не знаю, разве что используя таблицы
box12: clear: left;
Пятая строка:
css
box13: сlear: left;
Что я делаю не так?

Еще вопросы:

1. Нужно ли разделять блоки на box1 и box2 если можно обойтись одним? Когда нужно это делать?
Или можно всеголишь задать float для блока который должен быть справа?
Пример string1 - можно обойтись без box1 просто зафлотив right box2+3, а остальное содержимое string1 (h1 название сайта и описание) займет позицию box1

2. Ранее я создавал топик http://www.html.by/showthread.php?t=7089 но не могу сказать что на практике это так "остановить float можно взяв блоки с float во внешний див". Когда заканчивается родитель всеровно нужно делать clear иначе последующие блоки также флотятся.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 28.2.2010, 12:01; Ответить: klenovnn
Сообщение #2


Где это у тебя все работает покажи и свяжись, сразу исправим. А так сидеть читать твой код, все равно что решение сейчас тебе на блокноте написать и отсканировать ~ много времени займет и ни чего не поймешь пока не попробуешь.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
igorlesnoj
igorlesnoj
Topic Starter сообщение 28.2.2010, 12:47; Ответить: igorlesnoj
Сообщение #3


Меня как раз и интересует пошаговая проверка, где я сбиваюсь, где начинаю допускать ошибки. Я просто не могу понять логику верстки дивами. На первый взгляд правила просты и их не много, но на деле все обстоит иначе. В принципе с задачами я справляюсь всегда но мне не нравится моя методология а вернее ее отсутствие.

Что же думаю вы правы действительно в том что я написал разбираться тяжело. Тогда выложу ссылку когда переведу проект в онлайн.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sikwel_hb
sikwel_hb
сообщение 28.2.2010, 19:08; Ответить: sikwel_hb
Сообщение #4


уважаемый, igorlesnoj, ваша картинка очень смахивает на макет под верстку при помощи какого-то фреймворка, grid940 либо blueprint (погуглите если интересно) но я бы не советовал начинать учиться верстать макеты на основе слоев используя фреймворки.

Фреймворки это своего рода "кирпичи" или я бы даже сказал "шлакоблоки" :) для сооружения каких-то монолитных и неизменных макетов по заранее заданной сетке. Своего рода конструктор для тех кто не умеет и не хочет учиться верстать. Очень не рекомендую.

А по поводу того, с чего начать изучать верстку макетов на основе слоев а не таблиц, я ответил в этом сообщении http://www.html.by/showpost.php?p=57871&postcount=3 , успехов Вам;)

зы. кстати, я бы не сказал что "все просто")) если вы раньше верстали таблицами и хотите перейти на слои, вы столкнетесь с ОГРОМНЫМ количеством нюансов верстки под разные браузеры в основном можете уже догадаться под какие "всемизвестныебраузеры")), матерных слов будет произнесено не мало, пока овладеете более менее всеми браузерами)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
igorlesnoj
igorlesnoj
Topic Starter сообщение 1.3.2010, 8:36; Ответить: igorlesnoj
Сообщение #5


Моя картинка это обычный принтскрин из Microsoft Office Excel который я давно счел удобным использовать для визуального представления структуры сайтов.

Про ОГРОМНОЕ количество ньюансов я в курсе, но их я и отношу именно к ньюансам, правил же позиционирования в css не так много. У меня мало опыта но я взял для себя правило: вначале делаю основной каркас по всем правилам и стандартам а дырки (ньюансы) латаю после. Так вот еще на шаге с "каркасом" у меня возникают сложности к примеру до сих пор так и не могу полностью понять логику float. Вот вы мне можете ответить на вопрос №2 который я задавал в теме http://www.html.by/showthread.php?t=7089 и где про это вообще пишут?

Я был бы очень признателен если бы вы подсказали мне проверенную методологию step2step которой можно пользоваться при верстке. На практике же еще раз повторюсь я справляюсь с поставленными задачами, но меня интересует грамотность и чистота верски, когда оправдано применение тех или иных методов к примеру когда в дивах можно и нужно использовать таблицы и т.п. Я смотрю на чужие решения тех или иных задач и они могут отличаться от моих и содержать некоторые селекторы значения которых в данном контексте я просто не понимаю и это все не смотря на то и те и другие в итоге как мне кажется работают одинаково.

Возможно я придумал и строгих правил не существует? Однажды мне один товарищ сказал что это так и что главное это чтобы в браузере все выглядело так как надо.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 1.3.2010, 12:00; Ответить: klenovnn
Сообщение #6


igorlesnoj, смотри принцип:
Если имеется по горизонтали два дива и у первого float:left, то второй автоматически прижимается к нему с правой стороны на его уровне ~ чтобы этого избежать требуется прописать clear:both для второго.

Если оба имеют float:left, float:right тогда следующий див встанет нормально ниже (если не содержит float, если содержит, снова указывает clear:both;)

К примеру первые три блока в твоем случае можно сделать так:

<div id="header">
<div id="1" style="float:left;">1</div>
<div id="2" style="float:right;">2</div>
<div id="3" style="float:right; clear:both; margin-top:10px">3</div>
</div>


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
10 muratastana 1545 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) Нужна помочь с переносом сайта
3 karambas 2301 2.1.2023, 5:11
автор: kuz999
Открытая тема (нет новых ответов) Годный дизайн с последующей версткой 2.0
9 pronlex 8899 24.7.2022, 23:15
автор: pronlex
Открытая тема (нет новых ответов) Верстка и внедрение на сайт макета главной страницы
Требуется: с Figma на Laravel
2 ARsHi 1650 27.3.2021, 0:57
автор: Ogaelath
Открытая тема (нет новых ответов) Нужен дизайн с версткой для сайта
Недорого
1 tygrytsa 2973 21.8.2019, 13:11
автор: Димон98


 



RSS Текстовая версия Сейчас: 29.3.2024, 2:19
Дизайн