ブログのデザインで、サイドバーを右に、メインを左にしたいです。

プログラムをいじってです。
http://q.hatena.ne.jp/1197144474#modparam-form
の質問の続きになります。
当方のスタイルシートは↓のようであり、
ブログ自身はhttp://d.hatena.ne.jp/my_name_is_joe1029/となります。
.hatena-body{
width: 800px;
margin: 0 auto;
padding: 0;
}

.main{
float: left;
width: 595px;
padding: 0px;
}
.section p{
margin: 0 1em;
text-align:left;
padding: 0;
}
.sidebar {
width: 195px ;
padding: 0;
margin: 0 0 0 600px ;
text-align: left;
border: none;
}

僕の中では、上のもので解決されるはずなんですが、、、。
なにせプログラムの知識0(ゼロ)で間違っている場所がわかりません。

具体的な改善策を与えてくださると嬉しいです。
よろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2007/12/11 15:38:23
  • 終了:2007/12/11 21:54:44

回答(4件)

id:tukihatu No.1

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322007/12/11 16:55:00

ポイント20pt

これでいけませんか?

.hatena-body{
width: 800px;
margin: 0 auto;
padding: 0;
}

.main{
float: left;
width: 595px;
padding: 0px;
}
.section p{
margin: 0 1em;
text-align:left;
padding: 0;
}
.sidebar {
float: left;
width: 195px;
padding: 0;
text-align: left;
}


html↓
<div class="hatena-body">
<div class="main">ほげ</div>
<div class="sidebar">ほげ~</div>
</div>

サイドバーのスタイルにfloat:leftを足してマージンとっただけです。

これでだめなら、mainやsideberの中に入っているコンテンツが大きすぎてwidthが広がってしまっていて、折りかえってしまう、ということだと思います。

お試しあれ。

id:my_name_is_joe1029

回答ありがとうございます。

これだけでは、ダメでした。divをつけなければならなかったようです。

2007/12/11 21:41:19
id:blanccasse No.2

blanccasse回答回数142ベストアンサー獲得回数152007/12/11 17:02:13

ポイント50pt

cssの指定の仕方に問題があるようです。


質問者さまは「.main」など、クラス指定のみをしていらっしゃいますが、

オリジナルのcssでは、「div.main」という指定になっています。

cssの書式解釈(?)では、「.main」より「div.main」の方が詳細な指定ということになり、

より詳細な指定を優先する仕組みになっています。

そのために質問者さまの指定が反映されないようです。


div.hatena-body {
	width: 800px;
	margin: 0 auto;
	padding: 0;
}
div.main {
	float: left;
	width: 595px;
	margin: 0;
	padding: 0;
}
div.sidebar {
	width: 195px ;
	padding: 0;
	margin: 0 0 0 600px ;
	text-align: left;
	border: none;
}

上記cssでサイドバー移動出来ました。


cssを修正する場合、テーマオリジナルcssの指定方法を確認し、

それを変更すると楽に弄れますよ。

id:my_name_is_joe1029

回答ありがとうございます☆

blanccasseさんのとおりスタイルシートを変更したら、できました(^^)

divがポイントだったのですね。勉強になります!

ありがとうございます(^0^)

2007/12/11 21:43:31
id:tezcello No.3

tezcello回答回数457ベストアンサー獲得回数682007/12/11 18:13:46

ポイント40pt

ローカルでテストしていたので、実際とは異なった結果になってしまって申し訳ないです。

<link rel="stylesheet" href="http://d.hatena.ne.jp/css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="http://d.hatena.ne.jp/headerstyle?color=wh" type="text/css" media="all">
<link rel="stylesheet" href="http://d.hatena.ne.jp/theme/delta/delta.css" type="text/css" media="all">

この3行でスタイルシートを定義しているのですが、

そこでの指定の仕方が質問文での書き方よりも優先順位が高いものでした。

<style type="text/css">
<!-- 
body {
	width: 800px;
}

div.hatena-body{
	position: static;
	width: 800px;
	margin: 0 auto;
	padding: 0;

}

div.main{
	position: static;
	margin: 0px;
	float: left;
	width: 595px;
}
.section p{
	margin: 0 1em;
	text-align:left;
	padding: 0;
}
div.sidebar {
	position: static;
	width: 195px ;
	margin: 0 0 0 600px ;
	text-align: left;
	border: none;
}-->
</style>

こんな感じでどうでしょうか。

本当に全部必要なのかまではチェックできていませんが、上記の外部スタイルシートでの指定を打ち消すようにしてあります。

body 要素の幅を 800px にしているのは、「最新の日記~」の部分がブラウザのウィンドウにつられて右に寄ってしまっていたからです。

これ以外にも、細かい修正が必要かも知れません。

id:my_name_is_joe1029

回答ありがとうございます☆

blanccasseさんと同様、tezcelloさんの指定でもできました!

やはり、divで指定を行うのが基本のようですね。

最終的に、↓のようにしてみました。relativeの方が、ブラウザのサイドバーの長さを調整したとき、対応してくれましたので。


div.hatena-body {

width: auto;

margin: 0 auto;

padding: 0;

}

div.main {

float: left ;

width: 80%;

margin: 0 auto;

padding: 0;

}

div.sidebar {

width: 19% ;

padding: 0;

margin: 0 0 0 81% ;

text-align: left;

border: none;

}

div.section p{

margin: 0 1em;

text-align:left;

padding: 0;

}

2007/12/11 21:53:19

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 rikuo 18 16 2 2007-12-11 20:55:31
  • id:ffmpeg
    だから、はじめからそうおしえてるじゃないの。
    わからんくせに、おしえたとおりにやらないんだから。

    div.sidebar {

    position: absolute;

    top: 10px;

    left: 75%;

    width: 15%;

    }

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません