Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 01.06.2013
Сообщений: 6

Вёрстка страницы по макету

21.09.2016, 09:43. Показов 1181. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Столкнулся с проблемой. Не могу сверстать подобный шаблон (извиняюсь за корявое изображение, нарисовал на скорую руку в паинте ). Вобщем есть блок меню (оранжевый) и есть контейнер (зеленый). В контейнере могут быть другие контейнеры. Нужно чтобы меню было слева вверху (как на рисунке), а зеленый контейнер занимал оставшуюся область. Пробовал менять свойство float по разному у обоих элементов и никогда не получалось так как нужно.
P.S. Сверху над этими блоками располагается шапка, и, наверное, position:absolute не прокатит.

Название: 1.png
Просмотров: 12

Размер: 6.3 Кб
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.09.2016, 09:43
Ответы с готовыми решениями:

Вёрстка страницы по макету
Добрый день. Прикрепил страничку о которой идёт речь. Белые края страницы расположены с помощью float: left и right. Задана ширина в...

Вёрстка страницы по макету
По возможности помогите пожалуйста с макетом

Верстка страницы по макету
Помогите. Как сделать такой фон для комментария, он есть картинкой, но когда ставлю фонов криво получается.

2
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
21.09.2016, 10:26
CSS
1
2
3
4
5
6
7
8
9
10
.wrapper{
  width:300px;
  border:1px solid black;
}
.menu{
  float:left;
  width:50px;
  height: 50px;
  border:1px solid black;
}
HTML5
1
2
3
4
<div class="wrapper">
<div class="menu"></div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod in repellendus doloremque, accusantium, at fugit earum distinctio ex ea! Corporis odit doloribus inventore nam, culpa hic impedit illum eos ducimus!
</div>
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
21.09.2016, 10:31
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="wrapper">
    <div class="header">Здесь хэдер</div>
    <div class="content">
      <div class="menu">
        <ul>
          <li><a href="">item1</a></li>
          <li><a href="">item2</a></li>
          <li><a href="">item3</a></li>
          <li><a href="">item4</a></li>
          <li><a href="">item5</a></li>
        </ul>
      </div>
      Разнообразный и богатый опыт начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий. Таким образом новая модель организационной деятельности требуют определения и уточнения дальнейших направлений развития. С другой стороны постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании форм развития. Таким образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров в значительной степени обуславливает создание новых предложений.
 
      Задача организации, в особенности же укрепление и развитие структуры требуют от нас анализа новых предложений. Таким образом консультация с широким активом в значительной степени обуславливает создание модели развития.
 
      Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют от нас анализа модели развития. Повседневная практика показывает, что реализация намеченных плановых заданий позволяет оценить значение новых предложений. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании модели развития.
 
      Идейные соображения высшего порядка, а также сложившаяся структура организации требуют от нас анализа соответствующий условий активизации. С другой стороны новая модель организационной деятельности влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что новая модель организационной деятельности в значительной степени обуславливает создание модели развития.
 
      Значимость этих проблем настолько очевидна, что новая модель организационной деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям. С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения существенных финансовых и административных условий.
 
      Таким образом дальнейшее развитие различных форм деятельности позволяет оценить значение направлений прогрессивного развития. Таким образом начало повседневной работы по формированию позиции влечет за собой процесс внедрения и модернизации новых предложений. Задача организации, в особенности же консультация с широким активом требуют от нас анализа дальнейших направлений развития. Повседневная практика показывает, что начало повседневной работы по формированию позиции позволяет оценить значение направлений прогрессивного развития.
 
      Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке направлений прогрессивного развития. Таким образом реализация намеченных плановых заданий способствует подготовки и реализации дальнейших направлений развития. Задача организации, в особенности же новая модель организационной деятельности требуют определения и уточнения направлений прогрессивного развития.
 
    </div>
  </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.wrapper{
      width:1000px;
      margin: 0 auto;
    }
    .header{
      height:50px;
      background-color:orange;
    }
    .menu{
      background-color: green;
      float: left;
      width: 200px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 10px;
      margin: 10px;
    }
    .menu li{
      list-style-type:none;
    }
    .content{
      background-color: #d7d7d7;
    }
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
21.09.2016, 10:31
Помогаю со студенческими работами здесь

Верстка страницы по макету
Как сделать такую штуку, как только не пытался, всё не получается

Верстка страницы по макету
Выручите студента!) Нужно повторить точь в точь web-не идёт))

Верстка страницы по макету
Помогите сделать дизайн сайта только на html и css

Верстка адаптивной страницы по макету
Доброго дня. Сегодня наконец взялся за изучение HTML i CSS (вернее вспоминаю, последний раз дело было лет 7 назад), теперь все смотрю...

Верстка страницы по макету - HTML, CSS
Как сделать чтобы при наведение на фото появлялась полоса с социальными сетями, можно ли это сделать с помощью CSS или нужен JS?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru