Вы здесь

Помогите с css

0

здравствуйте. подскажите пожалуйста в чем может быть дело?

html такой

     <div class="header-wrapper">
        <div class="banner-wrapper">...</div>
        <div class="page-header-wrapper">
           <div class="breadcrumb">...</div>
           <div class="page-title">...</div>
        </div>
     </div>
     <div class="page"> ... </div>
    <div class="footer"> ... </div>

scss такой

.header-wrapper { 
   position: relative; 

   .banner-wrapper {   // настройки цветов //   ...    }   
    .page-header-wrapper {
        height: 500px; // !!!
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
        // настройки цветов //
            .page-title {
                position: absolute;
                bottom: 0;
                // настройки цветов //
                }   
     }
}

в итоге основная страница div class="page" прижимается к div class="banner-wrapper".../div , а не к div class="header-wrapper" как хотелось бы. т.е. .header-wrapper не реагирует на height:500px у .page-header-wrapper как хотелось бы.)

спасибо за внимание.

Версия Drupal: 
7.x
Категория: 
Theming
Вопрос задан 03.08.2015 - 21:49

не вижу в коде div class="page". Полнее распишите плз.

Комментарий оставлен 03.08.2015 - 22:00

не пойму как там задать вопрос. ?

Комментарий оставлен 04.08.2015 - 07:17

Свой код там запустите и ссылку к здесь оставьте.

Комментарий оставлен 04.08.2015 - 12:00

Ответы

1

Так у .page-header-wrapper стоит position: absolute же. Уберите его. Лучше banner-wrapper сделайте абсолютом если надо, что они были на одном уровне.

Ответ дан 04.08.2015 - 09:16

да, отличный авриант! большое спасибо за подсказку!!!
НО
стоит position: absolute у дочернего контейнера. на мой взгляд, очень странно, что так происходит.

Комментарий оставлен 04.08.2015 - 18:19

Если вы ставите блоку position: absolute, то он выходит из потока и уже не влияет ни на родителей, ни на соседей. Есть довольно старые статьи на тему css, но основы рассказывают очень подробно и понятно.
http://softwaremaniacs.org/blog/category/primer/

Комментарий оставлен 04.08.2015 - 18:49
0

ответ ясен. спасибо! просто смутил тот факт, что свойство position у родителя играет роль на отсчет координат потомка...

по горячим следам возник еще вопрос. ) условно... ставлю родителю width: 500px, и хочу поставить одному из потомков width:1000px. возможно ли это осуществить?

т.е., если представить, что эта страница (на которую мы смотрим) шириной 500рх, а форма ответа (поле, куда мы пишем) - 1000рх.

в любом случае большое спасибо за участие! тему можно закрывать.

Ответ дан 04.08.2015 - 19:26

Можно. Но родитель все равно останется 500px. И соседние блоки родителя тоже будут видеть его как 500px.
Рекомендую почитать ссылку, которую я оставил в комментах, там подробно про ЦСС блоки.

тему можно закрывать

Чтобы закрыть тему поставьте галочку возле верного ответа.

Тот текст, который вы написали выше надо было добавить комментарием, а вы добавили как ответ на свой вопрос. Будьте внимательны :-)

Комментарий оставлен 04.08.2015 - 19:58