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

[igmar]

Не выходит каменный цветок. Не хватает умения. То картинка выезжает за блок, то по высоте/ширине не получается блоки уместить и все съезжает вниз.

Если кто-то поможет, то будет здорово. Хотя бы советами, где какое позиционирование должно быть, где какую ширину/ высоту задавать. Можно поэтапно - это не срочно, для себя.

 

Вот картинка макета.

https://img-fotki.yandex.ru/get/3914/289412621.b5/0_144caf_17d58f18_orig

 

 

[Great Rash]

Что именно не получается?

[igmar]

Вот мой макет. Если нужно, то выложу куда-то еще - пока такой хостинг.

http://igmar.hop.ru/test1.html

 

1. Не знаю как сделать, чтобы блок Комменты находился под блоком Навигация, (в нижнем правом углу). То же происходит с блоком Нижний текст - сейчас он выжат картинкой вниз, а если ее нет, то он тоже находится в самом верху сразу под блоком Верхний текст.

2. Картинка (синяя полоса) выжимает правый красный блок, хотя у них всех задано display: inline-block; и у боковых красных блоков задано float: left; и float: right;

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

4. Если я не задаю размеры блоков в px, а делаю блок #container в размер экрана width:100%; height:100%, то все плохо: блоки или не доходят друг до друга или выжимают друг друга.

 

Если подскажете хоть что-то - заранее спасибо!

[Great Rash]

Начнём по порядку. Зайдите вот сюда и сверстайте мне двухколоночный макет.

[igmar]

OK! Сделаю. Сейчас не могу - поздно вечером сделаю.

И надо будет разобраться сначала как эта штука работает.

 

Спасибо!

[igmar]

Я сделал там сайт, но не знаю как его показать. У меня есть сохраненный zip оттуда. Попробовал это расшарить в Google+, но не знаю, всем ли это доступно.

 

https://plus.google.com/share?url=http://codepen.io/anon/pen/MaxReW

Edited November 19, 2015 by igmar

[Нарек]

Я сделал там сайт, но не знаю как его показать.

Пишешь код, как закончишь жмешь Save в правом верхнем углу первый в ряде кнопок, в то же время увидишь, что ссылка в браузере изменилась. Потом копируешь ссылку и кладешь сюда. 

[igmar]

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

 

Ссылка.

Расшаренная ссылка от Гугл+ тоже работает, но нужно иметь логин в Гугл.

 

Нужна помощь.

1. Как сделать ширину на весь экран? Если я задаю width:100% для #content, то не знаю как задать ширину #main. Если задаю ему 100%, то он уходит под #sidebar, а если ширину не задаю, то он растягивается только на длину содержимого и может не заполнять все пространство слева.

2. Как сделать эту страничку на высоту окна, чтобы  #content не вылезал за высоту окна?

Edited November 20, 2015 by igmar

[Igor Schnaider]

1. Например, можно сделать для #main отрицательное поле на ширину сайдбара и добавьте отступ на ту же ширину (это все с учетом box-sizing: border-box). Как-то так.

2. Тут сразу возникает вопрос: а если содержимое #container не поместиться в высоту окна, тогда что.

А вообще, первое, что приходит в голову :-)

/* 1 */#container {    height: 100vh;    overflow: hidden;}/* 2 */html {    height: 100%;}#container {    height: 100%;    overflow: hidden;}

[igmar]

2. Тут сразу возникает вопрос: а если содержимое #container не поместиться в высоту окна, тогда что.

Это все продумано, я только не знаю как сделать. В #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

Edited November 20, 2015 by igmar

[Igor Schnaider]

 

2. Тут сразу возникает вопрос: а если содержимое #container не поместиться в высоту окна, тогда что.

Это все продумано, я только не знаю как сделать. В #main (главный div цвета silver) будет только картинка, больше там не будет ничего. Картинка может быть разных размеров. Она должна масштабироваться по текущему размеру этого div (а он должен изменяться по размеру окна). Размеры остальных блоков заданы. Это стандартный макет всех фоточных сайтов - фотка и некая навигация.

 

Ну тогда можно так.

[Great Rash]

igmar, вы не выполнили моё задание. Вы опять написали говнокод который был у вас в первом посте. Я готов помочь вам избавиться от говнокода и научить вас верстать правильный и чистый код. Но для этого вам нужно чётко следовать моим указаниям. Сверстайте мне вот такой макет:

 

Левая колонка - 300 пикселей

Правая колонка - всё остальное пространство

[igmar]

Great Rash, .

я не до конца понял задание - должен ли быть подвал, как на картинке. Делаю это первый раз и не знаю какие размеры принято делать по умолчанию.

Сделал как понял.

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

[Great Rash]

На картинке нет никакого подвала. Мне нужно от вас, чтобы вы сделали просто две колонки. Размеры я вам указал по ширине. Высота меня не интересует.

[Нарек]

я не до конца понял задание - должен ли быть подвал, как на картинке

Этот "подвал" логотип clip2net и не имеет никакого отношения к картинке)

[igmar]

Вот 2 колонки.

 

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

[Great Rash]

Отлично. Теперь сделайте 3 колонки.

Левая - 300

Правая - 300

Центральная - всё, что осталось

И бросайте использовать id для стилизаци. Id нужны только для скриптов, для стилей - классы.

[igmar]

Вот 3 колонки, но они будут разные по высоте в зависимости от количества контента.

 

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

[Great Rash]

но они будут разные по высоте в зависимости от количества контента.

Это абсолютно нормально.

Теперь посложнее, 3 колонки как сейчас:

Левая - 25%

Правая - 300 пикселей

Центр - остальное

[Нарек]

 

но они будут разные по высоте в зависимости от количества контента.

Это абсолютно нормально.

Теперь посложнее, 3 колонки как сейчас:

Левая - 25%

Правая - 300 пикселей

Центр - остальное

 

Блин, а учи и меня яваскрипту таким образом))

[Great Rash]

А чего в нём непонятно?

[Нарек]

Так то теория понятна, а вот набивать руку таким образом гораздо лучше) Вот например ТС не забудет уже как делать подобную разметку (если конечно не скопировал откуда то а написал сам).

[Great Rash]

Ну просто все задачи которые нужны для веба достаточно тривиальны. Действительно интересные задачи в основном относятся к реализации каких-либо распространённых алгоритмов. Но в плане фронтэнда они вам наврядли пригодятся. Если это не смущает, то я могу поставить кучу интересных задач из области геймдева Придётся повспоминать математику как я в своё время, когда мы с Максом арканоид пилили.

[Нарек]

Кажется для этого мне еще нужно доползти) 

[Анна]

А я тоже сейчас за JS взялась, Great Rush, может на самом деле будешь нам давать примитивные задания(больше связанные с "тривиальным web-ом"), постепенно усложняя их? Так хоть интересно будет и интерактивно. Вопрос, конечно, твоего времени ((

Edited November 20, 2015 by Анна