CSSでコンテンツをプッシュダウンするページ：

私は現在作業中のWebページで、以下のコンテンツを部分的に隠すためにnavを含む固定#topセクションを持っています。CSSでコンテンツをプッシュダウンするページ：

ページはこれです：http://s361608839.websitehome.co.uk/pt-build/templatebuild/私がしようとすると離れてお互いをプッシュするが、それらのどれも働いていないために#topトップために#sliderするマージントップ及びマージン下を追加しようとしました

。

アイデア？

出典

2011-10-13 Tim

とdivの上だけで私はあなたがtranslateYながら、あなたのコンテンツをダウンシフトします

div.anythingSlider{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

top: 50%を使用することができます0から110px

出典

2011-10-13 07:30:27 Emil

これはスマートな解決策ではありません。もし彼が別のページを追加する/ページを変更して 'anythingSlider'を削除すると、新たに上にある要素に' padding 'を追加する必要があるからです。 '＃top'で問題を解決する方が良いでしょう。 – Kokos

@kokos、それはすべて相対的です。サイトの計画が何であるか分かりません。私はそれに多くの解決策があることに同意しますが、それは全体のサイトに依存します。すべてのページに固定ナビゲーションがある場合は、ボディにパディングを追加します。 – Emil

を追加すると、top: 0;~#topwrapとmargin-top: 100px~bodyが追加されます。（あなたが好きな値を持つ100pxにに取って代わる、100pxには、最初の見出しを見るために最低限ですが、あなたの#topwrapは151px背が高い - ちょうどウィッヒが最もよく似合うしてみてください）

出典

2011-10-13 07:27:11 oezi

あなた#topがfixedので、余白が動作しません。

あなたはこの問題解決するために2つのことを行う必要があります：

を与えるあなたのbodypadding-topまたは（151px）
を与える#topの高さに等しいmargin-toptop:0;がそう、それはまだにこだわっ#topページの上部。

出典

2011-10-13 07:27:43 Kokos

パッディングトップ：150px;クラスanythingSlider

出典

2011-10-13 07:28:51 LAW

...サイトがリオーダリングされた場合、すべてが再び壊れます。ココスのような '＃topwrap'を変更することでこれを解決する方がいいですか？ – oezi

あなたはサイトのレイアウトを知らないと、落ち着きはかなりディッキーです。サイトのページにヘッダーがない場合は、本文マージンが間違った方法であることは明らかです。私は、サイトのすべてのページがどのようなものかわからない限り、サイトのすべてのページのレイアウトを変更することを支持しません。 – LAW

にトップのパディングを変更

div.anythingSlider { 
    position: relative; 
    padding: 110px 350px 28px 45px; 
}

を変更それを元に戻します。

出典

2017-01-09 15:25:19 DeeJay

CSSでコンテンツをプッシュダウンするページ：

答えて

関連する問題