Уезжает колонка с виджетами вниз :)

Решено kvv213
(@kvv213)

9 лет, 6 месяцев назад

Друзья, никак не пойму почему именно тут http://tint-it.ru/kvv213/ (тествоая установка) колонка с виджетами уезжает вниз, когда ширина экрана в районе 1140 пикселей.

В теме используется «резиновый» метод и в зависимости от ширины экрана, задаются размеры для site-content и windget-area. Но, 1140 пикселей, размер больше минимального для настроек для маленького экрана.

Если понаблюдать, то при уменьшении ширины, зазорчик между site-content и widget-area уменьшается и когда дальше некуда уже больше уменьшаться, виджеты выталкиваются вниз. Но, совершенно непонятно, что заставляет виджеты именно выталкиваться, а не продолжать ужиматься дальше.

И самое интересное, как с этим бороться лучше всего. Мне нужен зазорчик между site-content и widget-area. Не хочется так же, что бы плющило в ноль и виджеты. Но, не очень сильно хочется хардкодить размер панели в пикселях, поскольку размер шрифта может быть разный.

Как лучше избавиться от этого?

Просмотр 14 ответов — с 1 по 14 (всего 14)

Flector
(@flector)

9 лет, 6 месяцев назад
ну автор темы чуть-чуть неправильно выставил проценты. откройте style.css и измените там 80% на 75%:
```
.site-content { /* kvv */
		float: left;
		width: 80%;
	}
```
Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

ну автор темы чуть-чуть неправильно выставил проценты. откройте style.css и измените там 80% на 75%:

Получается немного не то. Получается слишком большой разрыв между site-content и widget-area. Хотя панель виджетов не сползает вниз.

Мне этот зазор не нужен. Он слишком большой, хочется его уменьшить и увеличить площадь, занимаемую site-content.

Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

пример

Flector
(@flector)

9 лет, 6 месяцев назад

ну просто не выйдет.
тема адаптивная — увеличите размер контента для полного разрешения — не будет влезать сайдбар при более мелком разрешении.

там в любом случае всегда будет зазор — если они впритык стоят при 1024×768 (к примеру), то при 950×768 впритык уже не будет — будет зазор.

Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

там в любом случае всегда будет зазор — если они впритык стоят при 1024×768 (к примеру), то при 950×768 впритык уже не будет — будет зазор.

А, что мешает виджетам сжиматься еще сильнее? Вроде бы пробежался по всем элементам, ни у кого нету хардкода в пикселях. Однако ж, что-то не резиновое у виджитов. Как понять?
Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад
Друзья, я так это просто не оставлю 🙂

Провел небольшое исследование. Нашел 100% работающий резиновый стиль. Он работает. Вот, его код:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
  <style type="text/css">
    .top {
    border: solid 1px black;
    margin-bottom: 15px;
   }
   .menu {
    border: solid 1px black;
    float: right;
    width: 15%;
   }
   .content {
    border: solid 1px black;
    margin-right: 16%;
   }
   .bottom {
    border: solid 1px black;
    padding: 3px;
   }
  </style>
 </head>
 <body>
  <div class="top">Top menu</div>
  <div class="menu">
   <a href="link1.html">Link 1</a><br>
   <a href="link2.html">Link 2</a><br>
   <a href="link3.html">Link 3</a><br>
   <a href="link4.html">Link 4</a><br>
  </div>
  <div class="content">
   <h1>Lorem ipsum dolor sit amet</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   </p>
  </div>
  <div class="bottom">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
 </body>
</html>
```
Реализовал точно такойже подход, но в рамках модели вложенности DIV-ов стандартной схемы. Подход не работает. Вот, собственно код:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <style>
        .MyText {
            margin-right: 20%;
        }
        .MyMenu {
            float: right;
            background-color: rgba(248, 248, 248, 0.69);
            padding: 24px;
        }
    </style>
</head>
<body>
<div style="border: solid 1px black;"> 
    <div style="border: solid 1px red;"> 
        <div class="MyText"> 
            <div> 
                <article>
                    <header>
                        <h1>Это заголовок статьи</h1>
                        <div>
                            <p>Ура!</p>
                            <p style="text-align: justify;">Это текст статьи</p> <br /> Stay tuned!
                        </div>
                    </header>
                </article>
            </div>
        </div>
        <div class="MyMenu" style="border: solid 1px green;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa enim, egestas id egestas eu, sollicitudin blandit justo. Sed vel nunc eget felis dignissim porta tincidunt sit amet lorem. Nullam pharetra dignissim felis, eget euismod nisi venenatis id. Curabitur eu tempor purus. Aenean egestas mi sed purus porttitor fringilla. Morbi non pretium turpis. Maecenas id vulputate felis. Aenean tempus, ante sit amet aliquet posuere, enim sapien pharetra dui, at tincidunt erat turpis id libero. Suspendisse a urna tortor.
        </div>
    </div>
</div>
</body>
</html>
```
Плюс, немного напрягает неверное отражение вложенности DIV-вов во втором примере. У нас MyMenu и MyText должны быть вложены в один и тот же DIV с красной рамкой. Но, браузер отображает красную рамку только вокруг верхней части.

В общем, либо лыжи не едут, либо я уже товойт, совсем ничего не понимаю.
Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад
Вкралась подлая ошибка во второй пример верный вариант вот такой (он все равно не работает):
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <style>
        .MyText {
            margin-right: 20%;
        }
        .MyMenu {
            float: right;
            background-color: rgba(248, 248, 248, 0.69);
            padding: 24px;
            width:18%;
        }
    </style>
</head>
<body>
<div style="border: solid 1px black;"> 
    <div style="border: solid 1px red;"> 
        <div class="MyText"> 
            <div> 
                <article>
                    <header>
                        <h1>Это заголовок статьи</h1>
                        <div>
                            <p>Ура!</p>
                            <p style="text-align: justify;">Это текст статьи</p> <br /> Stay tuned!
                        </div>
                    </header>
                </article>
            </div>
        </div>
        <div class="MyMenu">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa enim, egestas id egestas eu, sollicitudin blandit justo.
        </div>
    </div>
</div>
</body>
</html>
```
Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад
Так, дошло до маразма 🙂

Это работает:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
        .MyMenu {
            border: solid 1px black;
            float: right;
            width: 15%;
        }

        .MyText {
            border: solid 1px black;
            margin-right: 16%;
        }
    </style>
</head>
<body>
    <div class="MyMenu">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa enim, egestas id egestas eu, sollicitudin blandit justo.
    </div>
    <div class="MyText">
        Ура!<br />
        Это текст статьи<br />
        Stay tuned!
    </div>
</body>
</html>
```
А это уже нет:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <style>
        .MyMenu {
            border: solid 1px black;
            float: right;
            width: 15%;
        }

        .MyText {
            border: solid 1px black;
            margin-right: 16%;
        }
    </style>
</head>
<body>
    <div class="MyText">
        Ура!<br />
        Это текст статьи<br />
        Stay tuned!
    </div>
    <div class="MyMenu">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa enim, egestas id egestas eu, sollicitudin blandit justo.
    </div>
</body>
</html>
```
Разница только в том, в какой очередности выводятс в HTML блоки с правым меню и текстом :-/

Вообще бред какой-то….
Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

Попробовал вогнать этот же подход в основную модель. Заработало. Вот, ведь зараза какая.

Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

Ха. Получилось. И работает, так как надо. Отсалось проверить в разных браузерах, особенно отсталых.

PS. Столкнулся с эффектом, когда правая колонка с виджетами работает так, как надо, но ее содержимое спускается вниз после основного текста. Была засада с тегом h3, которыми были сделаны заговки у виджетов, а у нее стояла очистка всех параметров. Поэтому она позиционировалась в самый низ текста.

PS. Сейчас осталось подкрутить, что бы мобильная тема выглядела нормально.

Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

Все, сделал как и должно быть.
Ребята, просьба посмотрите в разных браузерах. Не шибко разъезжается?

Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

Сейчас только домены обновятся….

Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

Сайт в общем-то доступен на http://blog.kvv213.com

Автор kvv213
(@kvv213)

9 лет, 6 месяцев назад

Ну, собственно. Топик можно закрыть 🙂

Просмотр 14 ответов — с 1 по 14 (всего 14)

Тема «Уезжает колонка с виджетами вниз :)» закрыта для новых ответов.

Метки темы

Просмотр