Помогите сделать макет

[igmar]

Не могу сделать.

Это самое лучшее, что удалось. 

 

http://codepen.io/anon/pen/wKZVGX

 

Проблема в том, что текст из main затекает под картинку из sidebar если не задавать ширину или main, или sidebar.

Если сделать sidebar плавающим с обтеканием, то все равно надо как-то задавать его высоту (не меньше, чем main), чтобы под него текст не затекал. Или нужно для main задать margin-left для ограничения затекания текста, но для этого нужно знать ширину картинки.

 

Дайте мне подсказку. В инете всякие примеры и статьи для колонок, где задана ширина хотя бы 1 колонки.

Edited November 24, 2015 by igmar

[Great Rash]

Дайте мне подсказку. В инете всякие примеры и статьи для колонок, где задана ширина хотя бы 1 колонки.

Даю подсказку:

1) Вместо таблиц, вы можете использовать flexbox. Туториал.

2) Об этом мало кто знает, хотя тут мы писали про такое решение (float для одной колонки + overflow: hidden; для второй). Решение основано на том, что overflow создаёт новый контекст в документе (flow context).

Надеюсь у вас нормально с английским.

[igmar]

float для одной колонки + overflow: hidden; для второй

Я пытался сделать что-то такое, но я там делал overflow: hidden; для внешнего оборачивающего блока и делал большую высоту колонок - но у меня не получилось.

 

ОК. Завтра поразбираюсь. Спасибо.

[igmar]

Сделал через flexbox. Странно, что в инете особо нет примеров такого построения колонок. Если не знать название, то и не найти.

 

http://codepen.io/anon/pen/KdLBOB

 

 

Вот плавающим блоком. Если фон у обоих блоков сделать белым, то не будет заметно, что они разной высоты.

 

http://codepen.io/anon/pen/EVzegx

Edited November 24, 2015 by igmar

[Great Rash]

Если фон у обоих блоков сделать белым, то не будет заметно, что они разной высоты.

 

Переставайте заморачиваться на разную высоту. Это абсолютно нормально, что колонки разной высоты.

 

Теперь можно переходить к практике Берите в руки графический редактор (Gimp, или Photoshop, или ещё что) и выделите мне на этом макете колонки:

 

Важно пока не приступать к вёрстке, а просто разными цветами выделить колонки на этом макете.

[igmar]

Две колонки синих. И внутри левой синей есть еще 2 колонки желтых.

[Great Rash]

А верх почему не разметили (лого и меню)? А низ - копирайт?

[igmar]

Потому что вы сказали - выделить колонки. Я думал только колонки основного блока.

 

На картинке вверху доразметил.

Edited November 26, 2015 by igmar

[Great Rash]

Ок, теперь начинайте верстать по тем колонкам, которые вы выделили. Рандомные картинки нужного размера поможет найти этот сервис. Шрифты и лого не нужно брать с картинки, сделайте свои. Чтоб удобней было опишу требования:

 

1) хедер - высота 100px

2) футер - высота 50px

3) правая колонка - ширина 300px

4) внутри колонок отступы по 10px со всех сторон

5) футер не должен быть прижат книзу, а идти сразу после контента

[igmar]

Мне нужно сверстать сайт максимально похожий на эту картинку, но со своим логотипом и главной картинкой и сделать его своими шрифтами?

 

ОК. Но это займет время. Сегодня не успею.

[igmar]

Сделал.

 

http://codepen.io/anon/pen/gaNmMW

 

Там что-то с картинками не заладилось. Вчера они показывались на том компе, с которого делал, а сегодня нет.

Поэтому то же самое, только картинки кинул к себе на хостинг для верности.

Если нужно ширину меньшую, можно просто обернуть в общий div и задать ему max-width.

 

http://codepen.io/anon/pen/EVBpJG

Edited November 27, 2015 by igmar

[Great Rash]

<font color=black>

1) Почему вы использовали этот элемент?

2) Почему атрибут тега без кавычек?

<p class="headsidebar"><br>select a service</p>

Для чего тут <br>?

<div class="selectsidebar">  <ul>    <li>Some amazing service</li>    <li>And another one</li>    <li>A service noon else offers</li>    <li>Some amazing service</li>    <li>And another one</li>    <li>A service noon else offers</li>  </ul></div>

Для чего оборачивать <ul> внутрь <div>?

<div class="footer">

Для чего у него стоит правило clear: both;?

Всё очень плохо. Делаем заново. Макет тот же, теперь я хочу, чтобы вы сделали мне только шапку (лого + меню).

[igmar]

1) Потому что нужно было сделать слова черными, как на образце. Я хотел чтобы надпись была такая же как заголовок sidebar-a, поэтому сделал таким же стилем, а 2 слова пришлось отдельно закрасить.

2) Думал, что зарезервированные слова (цвета) можно без кавычек писать.

3) <br> для верхнего отступа, иначе верхний отступ был не как на образце.

4) Чтобы сместить ul вправо, по центру. Я пытался сделать центрированием align, text-align - но у меня не получилось, этот список не никак выравнивался. В крайнем случае текст смещался, а маркеры оставались слева. Поэтому я его обернул и сдвинул через margin-left к центру.

5) clear: both потому что вначале я делал правый плавающий блок, но у меня не получилось сделать темный фон под ним из-за высоты. Потом я переделывал среднюю часть другими способами, а это осталось с первого варианта - забыл удалить.

 

ОК.

[igmar]

Сделал шапку.

 

http://codepen.io/anon/pen/QjXYLY

[Great Rash]

Снова неправильно. Вы же размечали колонки на картинке. Почему не по ним свёрстано?

[igmar]

Потому что там можно было без колонок обойтись и сделать проще. Я так и сделал.

 

Вот с колонками.

http://codepen.io/anon/pen/zvVXZQ

 

p.s. Было бы хорошо, если бы вы иногда давали ссылки на статьи или примеры, как нужно делать. Иначе, методом тыка, уходит слишком много времени. Обычно обучение строится по 2 схемам: 1) ученику даются какие-то основы, потом он их прорабатывает и на их основе решает задачи, 2) дается непонятное задание и нужно каким угодно способом сделать результат.

Пока я иду вторым путем. Как я сделаю правильно, если никогда не видел, как нужно делать правильно? Это слишком медленно.

Edited November 28, 2015 by igmar

[Great Rash]

p.s. Было бы хорошо, если бы вы иногда давали ссылки на статьи или примеры, как нужно делать. Иначе, методом тыка, уходит слишком много времени.

Вы уже умеете верстать две колонки как минимум 3-мя способами. Какие ещё вам статьи нужны?

Вот с колонками.

Ответьте на вопросы:

1) Вы обернули картинку в <div>, зачем вы это сделали если прямо картинке можно сказать display: block;?

2) Для чего вы обернули <ul> в дополнительный <div> если <ul> - и так блочный элемент?

[igmar]

Потому что я не знаю еще какие элементы какими свойствами обладают. Я знаю, что есть блок div, в него можно поместить какой-то другой элемент и блок двигать.

 

Сейчас переделаю.

[Great Rash]

Потому что я не знаю еще какие элементы какими свойствами обладают.

Срочно читать.

[igmar]

Новый адрес шапки. По старому пропала кнопка Save.

 

http://codepen.io/anon/pen/rOXGQM

 

Теперь я знаю, что такое блочные и строчные элементы и какие теги к ним относятся.

[Great Rash]

Отлично, другое дело. Теперь по плану следующая строка (та, что на макете вы обвели синим).

[igmar]

Сделал.

 

http://codepen.io/anon/pen/rOXGQM

[Great Rash]

Всё хорошо, но:

* {  margin: 0;  padding; 0;  font-size: middle;}

из-за этого у вас обнулились так же и отступы для параграфов (<p>), нужно или не обнулять ничего глобально, или восстановить назад те значения которые нужны.

<p class="headsidebar">  select a service</p>

Тут по смыслу должен быть заголовок вместо параграфа.

Ну собственно и всё. Теперь можете начинать практиковаться верстать. Ищите в сети макеты и тренируйтесь в их вёрстке. Принципы всегда одинаковые:

1) разбиваем макет на строки и колонки

2) верстаем сперва каркас (layout по-ихнему)

3) наполняем каркас мелкими элементами, используя различные техники построения колонок

Есть некоторые нюансы, как только столкнётесь с ними спрашивайте. Я думаю, что теперь у вас не должно возникнуть проблем с тем макетом, про который вы в самом первом посте спрашивали.

[igmar]

ОК. Спасибо.

 

На самом деле, вопросы у меня есть.

 

1. У меня есть div, в котором по высоте есть 2 div.Второй нижний, неизменного размера, я прижимаю вниз margin-bottom: 0; (ему нужно задать position: absolute; и родителю задать position: ...)

Но как мне сделать верхний блок на оставшуюся высоту? Это должен быть самостоятельный блок, чтобы ему сделать полосу прокрутки и свой стиль. По ширине я могу это делать - если родитель flex, то задать ширину для первого блока width: 100% и он займет всю оставшуюся ширину. Но с высотой это не проходит, height:100% не срабатывает.

 

2. Чтобы поместить картинку большого размера в div, я могу задать либо width:100% , либо height: 100%. Она пропорционально сожмется и поместится. Но я не знаю заранее, у нее больше ширина или высота. Как мне поместить в блок картинку неизвестных пропорций? Если задать width:100%; height:100%; то она исказится. Есть ли способ, не зная заранее размеры картинки, поместить ее в div от края до края?

Еще вопрос. Как в принципе сделан черный блок этой страницы?

https://fotki.yandex.ru/next/users/igor-i-markin/album/510268/view/1334869

 

Видно, что черный блок состоит из 2-х блоков (со стрелками). По ширине левый примерно 40%, правый 60%. Но сверху на них наложена картинка. Но при этом щелкая как бы по картинке, все равно эти щелчки принимают черные блоки. Они прозрачные и находятся сверху картинки? А черный фон под всеми ними? Или они под картинкой, но каким-то образом принимают щелчки?

[Great Rash]

1. У меня есть div, в котором по высоте есть 2 div.Второй нижний, неизменного размера, я прижимаю вниз margin-bottom: 0; (ему нужно задать position: absolute; и родителю задать position: ...) Но как мне сделать верхний блок на оставшуюся высоту? Это должен быть самостоятельный блок, чтобы ему сделать полосу прокрутки и свой стиль. По ширине я могу это делать - если родитель flex, то задать ширину для первого блока width: 100% и он займет всю оставшуюся ширину. Но с высотой это не проходит, height:100% не срабатывает.

Ну например флексы можно не только по горизонтали юзать Опять же.

 

2. Чтобы поместить картинку большого размера в div, я могу задать либо width:100% , либо height: 100%. Она пропорционально сожмется и поместится. Но я не знаю заранее, у нее больше ширина или высота. Как мне поместить в блок картинку неизвестных пропорций? Если задать width:100%; height:100%; то она исказится. Есть ли способ, не зная заранее размеры картинки, поместить ее в div от края до края?

Нужно указывать не ширину и высоту, а максимальную ширину и максимальную высоту. Пример.

Они прозрачные и находятся сверху картинки? А черный фон под всеми ними?

Скорее всего. А вообще вы можете в любом браузере нажать F12 и посмотреть как сделано.