igmar

Сделал шапку. http://codepen.io/anon/pen/QjXYLY

1) Потому что нужно было сделать слова черными, как на образце. Я хотел чтобы надпись была такая же как заголовок sidebar-a, поэтому сделал таким же стилем, а 2 слова пришлось отдельно закрасить. 2) Думал, что зарезервированные слова (цвета) можно без кавычек писать. 3) <br> для верхнего отступа, иначе верхний отступ был не как на образце. 4) Чтобы сместить ul вправо, по центру. Я пытался сделать центрированием align, text-align - но у меня не получилось, этот список не никак выравнивался. В крайнем случае текст смещался, а маркеры оставались слева. Поэтому я его обернул и сдвинул через margin-left к центру. 5) clear: both потому что вначале я делал правый плавающий блок, но у меня не получилось сделать темный фон под ним из-за высоты. Потом я переделывал среднюю часть другими способами, а это осталось с первого варианта - забыл удалить. ОК.

Сделал. http://codepen.io/anon/pen/gaNmMW Там что-то с картинками не заладилось. Вчера они показывались на том компе, с которого делал, а сегодня нет. Поэтому то же самое, только картинки кинул к себе на хостинг для верности. Если нужно ширину меньшую, можно просто обернуть в общий div и задать ему max-width. http://codepen.io/anon/pen/EVBpJG

Мне нужно сверстать сайт максимально похожий на эту картинку, но со своим логотипом и главной картинкой и сделать его своими шрифтами? ОК. Но это займет время. Сегодня не успею.

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

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

Сделал через flexbox. Странно, что в инете особо нет примеров такого построения колонок. Если не знать название, то и не найти. http://codepen.io/anon/pen/KdLBOB Вот плавающим блоком. Если фон у обоих блоков сделать белым, то не будет заметно, что они разной высоты. http://codepen.io/anon/pen/EVzegx

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

Не могу сделать. Это самое лучшее, что удалось. http://codepen.io/anon/pen/wKZVGX Проблема в том, что текст из main затекает под картинку из sidebar если не задавать ширину или main, или sidebar. Если сделать sidebar плавающим с обтеканием, то все равно надо как-то задавать его высоту (не меньше, чем main), чтобы под него текст не затекал. Или нужно для main задать margin-left для ограничения затекания текста, но для этого нужно знать ширину картинки. Дайте мне подсказку. В инете всякие примеры и статьи для колонок, где задана ширина хотя бы 1 колонки.

Сделал с разным размером картинок в левой колонке. http://codepen.io/anon/pen/RWOMaW

Пока могу сделать только таблицами. Пускай будет, чтоб сам не забыл. http://codepen.io/anon/pen/megXRg

AkuSer,в разделе для лодырей и бездельников есть моя тема Помогите сделать макет, где меня этому учат. Присоединяйтесь. Ваш п.1 я уже сделал. Можете посмотреть как. По поводу п.2 у меня тоже такой вопрос был. Пока не дошли. Но могу сказать, что можно задать для нужного div overflow: auto; тогда появится скроллбар при избытке контента.

http://codepen.io/anon/pen/dYLMEx Сделал такие 3 колонки. Но я этого не понимаю. Везде написано, что padding - это внутреннее расстояние блока до контента, значит оно не должно увеличивать размер блока. А блок увеличивается от padding, поэтому приходится величиной margin сдвигать средний блок, чтобы он не наезжал на соседний. В данном случае пришлось еще относительным left сдвинуть блок от левого sidebar. Уже приходится все высчитывать.

Вот 3 колонки, но они будут разные по высоте в зависимости от количества контента. http://codepen.io/anon/pen/XmQbBq

Вот 2 колонки. http://codepen.io/anon/pen/XmQbBq

Great Rash, .я не до конца понял задание - должен ли быть подвал, как на картинке. Делаю это первый раз и не знаю какие размеры принято делать по умолчанию. Сделал как понял. http://codepen.io/anon/pen/XmQbBq

Это все продумано, я только не знаю как сделать. В #main (главный div цвета silver) будет только картинка, больше там не будет ничего. Картинка может быть разных размеров. Она должна масштабироваться по текущему размеру этого div (а он должен изменяться по размеру окна). Размеры остальных блоков заданы. Это стандартный макет всех фоточных сайтов - фотка и некая навигация. Как пример, такие сервисы есть везде и они однотипны: https://fotki.yandex.ru/next/users/igor-i-markin/album/505775/view/1314661?page=0 https://plus.google.com/photos/104813863092745605730/albums/6212490813253195057/6212491610184665154?pid=6212491610184665154&oid=104813863092745605730

http://codepen.io/anon/pen/MaxReW Ссылка. Расшаренная ссылка от Гугл+ тоже работает, но нужно иметь логин в Гугл. Нужна помощь. 1. Как сделать ширину на весь экран? Если я задаю width:100% для #content, то не знаю как задать ширину #main. Если задаю ему 100%, то он уходит под #sidebar, а если ширину не задаю, то он растягивается только на длину содержимого и может не заполнять все пространство слева. 2. Как сделать эту страничку на высоту окна, чтобы #content не вылезал за высоту окна?

Я сделал там сайт, но не знаю как его показать. У меня есть сохраненный zip оттуда. Попробовал это расшарить в Google+, но не знаю, всем ли это доступно. https://plus.google.com/share?url=http://codepen.io/anon/pen/MaxReW

OK! Сделаю. Сейчас не могу - поздно вечером сделаю. И надо будет разобраться сначала как эта штука работает. Спасибо!

Вот мой макет. Если нужно, то выложу куда-то еще - пока такой хостинг. http://igmar.hop.ru/test1.html 1. Не знаю как сделать, чтобы блок Комменты находился под блоком Навигация, (в нижнем правом углу). То же происходит с блоком Нижний текст - сейчас он выжат картинкой вниз, а если ее нет, то он тоже находится в самом верху сразу под блоком Верхний текст. 2. Картинка (синяя полоса) выжимает правый красный блок, хотя у них всех задано display: inline-block; и у боковых красных блоков задано float: left; и float: right; 3. Не знаю как сделать, чтобы картинка помещалась в центральный белый блок по ширине и высоте, сама не выходила из этого блока и не выжимала другие блоки из макета. 4. Если я не задаю размеры блоков в px, а делаю блок #container в размер экрана width:100%; height:100%, то все плохо: блоки или не доходят друг до друга или выжимают друг друга. Если подскажете хоть что-то - заранее спасибо!

Не выходит каменный цветок. Не хватает умения. То картинка выезжает за блок, то по высоте/ширине не получается блоки уместить и все съезжает вниз. Если кто-то поможет, то будет здорово. Хотя бы советами, где какое позиционирование должно быть, где какую ширину/ высоту задавать. Можно поэтапно - это не срочно, для себя. Вот картинка макета. https://img-fotki.yandex.ru/get/3914/289412621.b5/0_144caf_17d58f18_orig

Да, оказалось из-за body margin Не знал, что они есть. Спасибо.

Не смог найти ответ. Если задать style="position: absolute; top: 0px; left: 0px;" то элемент располагается точно в левом верхнем углу, а если не задать, то остается пространство в несколько px сверху и слева. Почему так?

Но все же он уже есть. И у меня все показывает, достаточно ткнуть в ссылку. Chrom Версия 46.0.2490.86 m, IE11. Не все сразу, работа оставляет мало времени. Про любой случай не понял. Т.е. нужно так задавать размеры блоков, чтобы до ширины окна, скажем, в 800px все умещалось без скроллов? А какое разрешение сейчас массовое? Я думаю 1024х800 - наверное, такой основной размер надо делать. И поставить min-width/ min-height: 800/600. А вы как делаете с размерами?