Фиксированные блоки на странице (размер)

@Мефистофель · Регистрация: 06.02.2016

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

Здравствуйте, господа хорошие!
Давно пользуюсь материалами форума для обучения, но теперь зарегистрировался и это мое первое сообщение. Нужна помощь. Возникла необходимость создать сайт. Начал экспериментировать на одностраничнике. Много всего сделал, теперь остались доработки.

Суть проблемы:
На странице расположены шесть блоков (2х3). В них сделал подложку, графический элемент с анимацией, + заголовок + текст. Ширину каждого блока задал фиксированную в процентах. Вся сложность в том, что при масштабировании страницы меняется высота блока, поскольку меняется и размер шрифта внутри него. Мне бы хотелось видеть блоки максимально ровными, чтобы не нарушать общую гармонию. Всеми правдами и неправдами для одного из блоков (для шестого, последнего) задал размеры высота=ширина. При увеличении масштаба пропорции сохраняются, а часть текста скрывается.

Как хочу видеть при любом масштабе страницы: файл "1" в приложении. ссылка на радикал -
Как отображается при увеличении масштаба: файл "2" в приложении. ссылка на радикал -

Вот кусок кода HTML:

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
29
30
31
32
33
34
35
36
37
38
39
<!-- /.row -->
            </center>   
            <br/>
            <div class="row">
            <br/>
                <div class="col-sm-4 wow fadeInDown text-center newsblok" style="background-color: rgba(255, 255, 255, 0.8); border: 5px double black; max-width: 30%; float: left;">
                <br/>
                  <img class="rotate" src="img/icon/4.png" alt="Generic placeholder image">
                  <h3>Дизайнеры</h3>
                  <p class="lead">Стиль, вкус, изящество и строгость. Дизайнеры знают для этого общий множитель. </p>
                 <!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
                </div><!-- /.col-lg-4 -->
                
                <div class="col-sm-4 wow fadeInDown text-center" style="background-color: rgba(255, 255, 255, 0.8); border: 5px double black; max-width: 30%; float: center; margin-left: 5%;">
                <br/>
                  <img  class="rotate" src="img/icon/5.png" alt="Generic placeholder image">
                   <h3>Тренеры</h3>
                   <p class="lead">Эксперты. Эти люди готовы делиться своими знаниями. Это ваши будущие наставники.</p>
                   <!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
                </div><!-- /.col-lg-4 -->
                 
                <div class="col-sm-4 wow fadeInDown text-center cube" style="background-color: rgba(255, 255, 255, 0.8); border: 5px double black; max-width: 30%; float: right; hight: width;">
                <br/>
                    
                        <div class="cube__wrapper"> 
                            <div class="cube__content">
                            <img  class="rotate" src="img/icon/6.png" alt="Generic placeholder image">
                            <h3>Гении</h3>
                            <p class="lead">Для каждого проекта своя новая Эврика! <br/>Без эмоций!</p>
                            <!-- <p><a class="btn btn-embossed btn-primary view" role="button">View Details</a></p> -->
                            </div>
                        </div>
                    
                
                
                
                </div><!-- /.col-lg-4 -->
                
            </div><!-- /.row -->

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

@Мефистофель · 06.02.2016, 21:50 **[ТС]**

При желании можете посмотреть на сайте MADMARK.RU

@vuchastyi · 07.02.2016, 07:27

Даже не знаю, зачем ты добавил

HTML5
1
2
<div class="cube__wrapper"> 
    <div class="cube__content">

и этот класс cube в шестом div'е но причина того, что не позволяет блоку увеличиться как и остальным именно в этом. Класс cube__content и свойство position: absolute; не дают блоку увеличиться до нужное высоты, попробуй вот так:

HTML5
1
2
3
4
5
6
<div class="col-sm-4 wow fadeInDown text-center" style="background-color: rgba(255, 255, 255, 0.8); 
    border: 5px double black; max-width: 30%; float: center; margin-left: 5%;">
<br/>
<img  class="rotate" src="img/icon/6.png" alt="Generic placeholder image">
<h3>Гении</h3>
<p class="lead">Для каждого проекта своя новая Эврика! <br/>Без эмоций!</p>

И кстати, убери эту "типо" загрузку в начале страницы, она не нужна, если ты беспокоишься о том, что будут фото долго грузиться, просто добавь хеширование фотографий в браузере, у пользователя. А так она просто время тратит, и я не знаю какие должны быть нервы чтобы, когда пишешь сайт при каждом обновлении ждать пока гиф пропадёт.
Ладно бы у тебя какой-то flash плеер грузил информацию, а так это просто не нужно, по личному опыту знаю) И этот курсор на фотографиях меня просто убил х)

Новые блоги и статьи Все статьи Все блоги /
ПЛИС zxcha1ka_ 27.01.2026 AHDL Разработать программы для синтеза следующих устройств: 1. Параллельного регистра 4-х разрядного с синхронной загрузкой и асинхронным сбросом (обнулением); Пoмoгитe пoжaлyйстa	Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Мефистофель 0 / 0 / 1 Регистрация: 06.02.2016 Сообщений: 7
	06.02.2016, 21:50 [ТС]
	При желании можете посмотреть на сайте MADMARK.RU 0