Нужен совет по резиновой вёрстке блока

@Evgeniy55 · Регистрация: 14.03.2014

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите пожалуйста, то что ниже я опишу, правильно ли я думаю что делать нужно именно так, если это костыль, то как лучше тогда сверстать при резиновой верстке ? суть в следующем:

1) весь контент на сайте отцетрован и имеет ширину 941px
2) а вот ширина слайдера и интерактивной карты 1289px

как я понимаю здесь прийдется делать контейнер в контейнере, т.е.

HTML5
1
2
3
4
5
6
7
8
9
10
<body>
<div class="main-container"> ширина по умолчанию 100%
     <div class="container">        а тут задать (941px / 1289px *100) = 73% ширину блока и с помощью левого и правого маргина центровать
         <header class="main-header">
             <nav class="main-nav">.........</nav>
         </header>
     </div>
   <div class="slider">Slider</div> для слайдера ширина будет как и у родителя по умолчанию 100% и картинку для него залить бэкграундом
</div>
</body>

ну и ограничение сделать через медиа квери например при более чем 1650px чтобы и основной контейнер "main-container" тоже начинал центроваться, инче качество растровых картинок будет уже не ахти включая сам слайдер

еще как вариант не создавать див "main-container", а этот класс задать body, но это как мне кажется не очень хорошо

@Xteda · 15.06.2016, 12:10

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<body>
   <section>
        <div class="container small-container">
             .....
        </div>
   </section>
   <section>
        <div class="container big-container">
             .....
        </div>
   </section>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
  box-sizing: border-box;
}
.container {
    padding: 0 20px;
    margin: 0 auto;
    width: 100%;
}
.small-container {
    max-width: 981px;
}
.big-container {
    max-width: 1329px;
}

@Kenworth · 15.06.2016, 15:16

А почему бы просто не воспользоваться такой структурой? Просто не указывать контейнер

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <header> ... </header>
 
  <main>
     <section>
       <div>
            секция под Ваш слайдер
       </div>
     </section>
 
     <section>
       <div class="container">
            Обычный контент
       </div>
     </section>
  </main>
 
  <footer> ... </footer>
</body>

@Evgeniy55 · 15.06.2016, 17:44 **[ТС]**

Сообщение от Kenworth

А почему бы просто не воспользоваться такой структурой? Просто не указывать контейнер

да вполне можно, возьму на заметку тоже, а там где слайдер просто диву присвоить класс ".slider" и ему указать max-with, и там где у вас класс ".content" - запихнуть все блоки которые одинаково центрируются, только не пойму, а зачем лишняя разметка в виде "section" ? ведь все висит же на дивах которые внутри

@Xteda · 15.06.2016, 19:45

Сообщение от Evgeniy55

только не пойму, а зачем лишняя разметка в виде "section" ? ведь все висит же на дивах которые внутри

Понимание семантики и желание не экономить на структурных элементах придет с опытом

@Evgeniy55 · 15.06.2016, 19:54 **[ТС]**

Сообщение от Xteda

Понимание семантики и желание не экономить на структурных элементах придет с опытом

вас понял, пожалуй тогда более детально просмотрю применение section и article

@Cdelphi78 · 15.06.2016, 21:04

Сообщение от Xteda

желание не экономить на структурных элемента

Дак ведь наооборот нужно стремитьтся умешьшить html файл?

@Xteda · 15.06.2016, 21:11

Не по теме:

Сообщение от Cdelphi78

Дак ведь наооборот нужно стремитьтся умешьшить html файл?

Кто вам сказал, что нужно уменьшать размер файла - элементов должно быть столько, сколько нужно - для seo и чтобы удобно было и фронтендеру и бэкендеру. Откуда вы берете всю эту сомнительную информацию?

Комментарий модератора

Xteda, если на ветку html/css понадобится цензор Вы первый в списке... Здесь любой может высказать своё мнение, если даже оно не всегда оптимальное... Не надо всех мерить по себе... Если видите, что человек не прав, ему надо объяснить в чём он не прав, аргументируя свою точку зрения, а не флудить и поучать форумчан! Так что настоятельно Вас прошу держать себя в руках и соблюдать правила форума, в частности пункт 3.1 иначе выпишу предупреждение

@Evgeniy55 · 21.06.2016, 13:33 **[ТС]**

еще один вопрос, на картинке что я прикрепил есть слайдер, подскажите как правильно сделать чтобы текст и радио переключатели отображались поверх слайдера а не за или перед ним ?

1) как я понимаю первый вариант это залить бэкграундом саму секцию .slider, но как тогда он будет переключаться для меня вопрос, с JS и JQuery я не знаком и не знаю можно ли так

2) если вставляю как картинку через img то текст и кнопки получается снизу или сверху, тут разве что задать контейнеру .slider относительное позиционирование, а тексту, радиокнопкам и переключателям лево/право - абсолютное

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="slider">
    <img src="https://www.cyberforum.ru/images/slider-1.jpg" alt="Slider" width="1289" height="448">
    <p class="slide-tittle">
        <span><b>welcome</b> to website</span><br>
        <span>get in touch and <b>join with us</b></span>
    </p>
    <p class="slider-content">Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
    <form class="slider-form" action="#">
        <input class="slider-radio slider-radio-1" type="radio" name="radio">
        <input class="slider-radio slider-radio-2" type="radio" name="radio">
        <input class="slider-radio slider-radio-3" type="radio" name="radio">
        <input class="slider-radio slider-radio-4" type="radio" name="radio">
        <input class="slider-radio slider-radio-5" type="radio" name="radio">
    </form>
    <button class="slider-btn-prev"></button>
    <button class="slider-btn-next"></button>
</section>

@Xteda · 21.06.2016, 13:39

Остыньте, это не радиобатоны - это обычная dot-navigation, которая есть в практически в любом слайдере, например тут http://kenwheeler.github.io/slick/ - абсолютно позиционируете в родительском блоке и вуаля

PS. я смотрю вы слайдер сделали статикой простой. Нужен плагин

@Evgeniy55 · 21.06.2016, 13:48 **[ТС]**

Сообщение от Xteda

Остыньте, это не радиобатоны - это обычная dot-navigation, которая есть в практически в любом слайдере, например тут http://kenwheeler.github.io/slick/ - абсолютно позиционируете в родительском блоке и вуаля

спасибо, постараюсь разобраться тогда с разметкой и подключением плагина

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	21.06.2016, 13:39
	Остыньте, это не радиобатоны - это обычная dot-navigation, которая есть в практически в любом слайдере, например тут http://kenwheeler.github.io/slick/ - абсолютно позиционируете в родительском блоке и вуаля PS. я смотрю вы слайдер сделали статикой простой. Нужен плагин 0