#footerのpositionがfixedになっていますが、これをrelativeに変更するのはどうでしょうか。
返信ありがとうございます。
#footerのpositionですがrelativeに変更しましたが、改善されませんでした。
positionを全て試したんですが、relativeの場合にはサイドバーの左上に重なってしまいます。
fixedの場合は画面の左下に固定されるのですが、サイドバーの下に配置されません。
スクロールすると、左下に固定されたままスクロールします。
absolulteにすると、左下に配置されてサイドバーの下には配置されません。
今の状態としては、
#wrap{
margin-top: 60px;
margin-left: 225px;
}
#main{
width: 600px;
}
#sidebar {
position:absolute;
top: 60px;
left: 0px;
width: 180px;
height: auto;
padding: 20px;
}
そのもっとしたに
#footer{
color: #999;
position:absolute;
font-size: 11px;
bottom: 20px;
left: 20px;
{
このようになっています。
サイドバーの長さを短くすれば重ならないのですが、サイドバーがスクロールするくらいに長くなるとフッターがサイドバーの下に配置できません。なにか方法があるのでしょうか？
お分かりになる方宜しくお願い致します。
こんにちは。
これでどうでしょうか？
#wrap {
/* margin-left: 225px; コメントアウト、又は削除 */
margin-top: 80px;
}
#sidebar {
float: left; /* 追加 */
/* left: 0; コメントアウト、又は削除 */
padding: 20px;
position: relative; /* 変更 */
/* top: 80px; コメントアウト、又は削除 */
width: 180px;
}
#footer {
/* bottom: 20px; コメントアウト、又は削除 */
color: #999999;
font-size: 11px;
/* left: 20px; コメントアウト、又は削除 */
margin: 0 0 20px 20px; /* 追加 */
position: relative; /* 変更 */
}
以下を新しく追加します。
#masonry-wrap {
float: left;
}
orbit様、お答えありがとうございます。
お答えにあったように書き換えますと、
サイドバーとフッターの配置がうまくサイドバーの下にフッターが配置できました。
そこでまた配置がおかしくなってしまいまして、サイドバーにカスタムメニューを配置しているのですが、カスタムメニューから固定ページを表示すると、今まではサイドバーの横に固定ページの内容が表示されていたのですが、今はサイドバーの横にタイトルは表示されるのですが、
内容がサイドバーの下から表示されるようになってしまいました。
固定ページのphpファイルは
<?php
/**
* @package WordPress
* @subpackage Pronto Theme
*/
?>
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”post clearfix”>
<div class=”entry clearfix”>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<!– END entry –>
</div>
<!– END post –>
<?php endwhile; ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
このようになっています。お分かりになりますでしょうか？
これで固定ページも崩れることなく表示されると思います。
.post {
position: relative;
width: 600px;
float: left; /* 追加 */
}
リンク先のデモページを使って検証してるのですが、これで検証するのにも限界があるので、ご自身のページで崩れている箇所がないか調べてください。
Orbit様
お答え頂き有り難うございます。
ご指示あった通りにfloat:left;を追加し
.post{
width: 600px;
position: relatvie;
float: left;
}
.full-width{
float:left;
width: 98% !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
固定ページのfloatをnone! important;だったのをleftに変更して固定ページがサイドバーの横に表示されるようになりました。
固定ページのテンプレートにFull-Widthがあるのですが、そのテンプレートを選択するとサイドバーの下に表示されてしまいます。どの部分を変更すれば同じようにサイドバーの横に表示できるのでしょうか？
頭がこんがらがってしまい、どうすればなおるのか分からずお助けいただけたらと。。
floatを使うとどうしてもfull-widthのページのレイアウトが困難になるため、absoluteを使うことにしました。ただ、これも問題点があって、コンテンツがサイドバーの高さより低い場合、フッターがサイドバーに重なります。そのため、質問の根本的な解決にはなってないかもしれません。
混乱させてしまってすみませんが、これまでに僕が教えたものは元に戻してください。
その上で下記の変更を加えてください。
#sidebar {
position: absolute; /* 変更 */
top: 80px;
left: 0px;
width: 180px;
padding: 20px;
}
#footer {
color: #999;
font-size: 11px;
position: relative; /* 変更 */
float: left;
width: 100%;
/* bottom: 20px; コメントアウト、又は削除 */
/* left: 20px; コメントアウト、又は削除 */
padding: 0 0 20px 20px;
}
個人的には、フッターに表示したい内容をサイドバーの最後に書くのがレイアウトが崩れることなく一番楽かな、とも思っています。
追記
すいません。この方法は試されたんですね。別の方法を考えます。
いろいろ考えて試してみましたが、
position:relativeで、floatやdisplay:inline-blockを使って横並びにするとフッターを重ならないように表示はできるが、Full-WidthのページがFull-Widthで無くなる上、ブラウザ幅が狭いとカラムが落ちる。
position:absoluteを使うと、コンテンツに高さがないとフッターがサイドバーに重なる。
position:fixedを使うと、サイドバーの長さがブラウザの表示域の高さを超えた場合はフッターがサイドバーに重なる。
僕の知識不足のせいかも知れませんが、この問題はCSSのみでは回避不能な気がします。
別の方法として、デフォルトではフッターを非表示にしておいて、jQueryを使ってスクロール位置が最下部に来た時にフッターを表示するという方法もあります。
先のレスでも書きましたが、内容がサイドバーの幅に制限されるものの、フッターに表示したい内容をサイドバーの最後に書くのが一番スマートだと思います。
Orbit様
ご指示ありがとうございます。
私の勉強不足でまだまだ分からない事ばかりのなか、分かりやすい説明をしていただき
誠に有り難うございます。
jQueryを使った方法を試してみたいと思います。
また何か分からない事が有ればご質問させて頂く事もあるかと思いますので宜しくお願い致します。
