S.O.S.!>CSSに詳しい方

ブログデザインを変更してはや1ヵ月。見慣れてきたものの、いまだに違和感が・・・。それは右カラムが中途半端なところにあることだ。いろいろCSSをいぢってみたが、どうしても上に行ってくれないのだ。
 
右カラムを上に!

そこでお願い。
どなたかCSSに詳しい方、右カラムをもっと上に(要するに、上に空きスペースを作らないように)表示させるには、どこをどう訂正すればいいのか教えてください。あ、できたら「左カラムを下げる」もついでにご教示ください。
 
CSSは次のページです(「...READ MORE」をクリックして下さい)。


body, h1, h2, h3, h4, form,p { margin: 0; padding: 0; }
table { border: 0; }

/* ページ全体の設定 */
body{
margin: 0px;
font-size : 10pt;
background-color: #f4dda5;
}

/* 投稿欄、ボタンの設定 */
input,textarea,select,button,submit{
font-size : 10pt;
line-height: 10.5pt ;
color: #636363;
font-family: "Verdana", "\30D2\30E9\30AE\30CE\20Pro\20W3", "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", "Osaka";
border-width: 1px;
background-color: #fafafa;
border-color: #cccccc;
}

a {
text-decoration : none ;
color : #000000 ;
}
a:hover {
text-decoration: none;
color: #FF6633;
}

/* 区切り線(コメント表示欄で使用)の設定 */
hr{
border:1px dashed #E7E3DF;
}


/* id */
#wrapper {
margin: 0 auto;
border-top: 10px solid #990000;
width: 912px;
}

#container {
padding-top: 5px;
}

/* admin */
#admin {
width: 100%;
color: #336600;
text-align: right;
}

#admin a:link {color: #669900; text-decoration: none;}
#admin a:active {color: #669900; text-decoration: none;}
#admin a:visited {color: #336600; text-decoration: none;}
#admin a:hover {color: #336600; text-decoration: none; background-color: #FFFF66;}

/* center main */
#centerWrapper {
width: 730px;
float: right;
}

#contents {
width: 100%;
}

/* title */
#header{
margin-top: 5px;
margin-bottom: 10px;
width: 548px;
height : 270px;
background: url(http://blog-imgs-10.fc2.com/u/m/a/umakara/top2.jpg) left top no-repeat #FFF;
overflow: hidden;
}

/* title detail */
h1 {
padding-top: 2px;
padding-left: 10px;
margin: 180px 0 0 0;
height: 28px;
font-size: 28px;
text-align: left;
color: #FFF;
background-color: none;
}

#header a {color: #F9C; text-decoration: none;}

/* blog description */
#site_description{
margin: 0;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
height: 20px;
text-align: left;
font-size : 10pt ;
color : #FFF;
overflow: hidden;
}

#site_description strong {
font-weight: normal;
}

#box_main {
width: 548px;
float: left;
}

#topentry {
width: 100%;
}

/* entry title */
h2 {
margin-top: 5px;
padding: 5px 10px 0px 10px;
height: 22px;
font-size: 12pt;
text-align: left;
background-color: #990000;
color: #FFF;
font-weight : bold;
}

h2 a {color: #FFF; text-decoration: none;}
h2 a:hover {text-decoration: none;}

/* entry article */
.main_txt {
padding-top: 2px;
padding: 5px 15px 8px 15px;
width: 518px;
font-size : 10pt;
color : #3D3D3D;
background-color: #FFF;
}

.main_txt a:link {color: #669900; text-decoration: none;}
.main_txt a:active {color: #669900; text-decoration: none;}
.main_txt a:visited {color: #336600; text-decoration: none;}
.main_txt a:hover {color: #336600; text-decoration: none; background-color: #FFFF66;}

.post_date {
margin-bottom: 15px;
font-size: 8pt;
color: #999;
text-align: right;
}

/* link to thema ,genre */
.community {
font-size: 8pt;
color: #999;
}

/* state (post date,etc) */
.state {
margin-top: 8px;
font-size: 8pt;
color: #C8A848;
letter-spacing : 1px;
text-align: right
}

/* comment and trackback title */
h3.entry_title{
margin-top: 5px;
padding: 5px 10px 0px 10px;
height: 22px;
font-size: 12pt;
text-align: left;
background-color: #990000;
color: #FFF;
font-weight : bold;
}


.comment {
width: 100%;
overflow: hidden;
}

/* to other pages */
.navi{
margin-top: 3px;
padding: 2px;
font-size : 9pt ;
color : #858275 ;
text-align: center;
}
.navi a:link {color: #3D3D3D; text-decoration: none;}
.navi a:active {color: #3D3D3D; text-decoration: none;}
.navi a:visited {color: #3D3D3D; text-decoration: none;}
.navi a:hover {color: #336600; text-decoration: none; background-color: #FFFF66;}

/* 両サイドバーの設定 */

/* left side */
#leftSideBar {
width: 175px;
float: left;
overflow: hidden;
}
/* right side */
#rightSideBar {
width: 175px;
float: right;
overflow: hidden;
}
/* side bar */
.side_bg{
margin-top: 5px;
width: 100%;
color : #3D3D3D ;
background: #FFF;
}

h3.side_title {
margin: 0;
padding: 2px 2px;
color : #FFF;
font-weight : bold;
font-size: 10pt;
background: #f7c114;
}

/* left_side, right_side */
.side_txt {
margin: 0px;
padding: 3px 2px;
font-size: 9.5pt;
}

.side_txt ul{
margin: 0 2px 0 2px;
padding : 0;
list-style-type: none;
}

.side_txt li{
padding: 0 0 0 13px;
background: url(http://blog-imgs-10.fc2.com/u/m/a/umakara/icon_yazi.gif) 0px 1px no-repeat;
}

.side_txt p{
}

/* 著作権表示の設定 */
#copyright{
margin-top: 3px;
width: 910px;
font-size : 8pt ;
color : #FFF;
background: #990000;
text-align: center;
}
#copyright a:link {color: #FFF; text-decoration: none;}
#copyright a:vlink {color: #FFF; text-decoration: none;}
#copyright a:hover {color: #FFF; text-decoration: none;}




/* 記事検索の設定 */
.search input{
font-size :12px;
line-height: 15px;
border-width:1px;
background-color:#fafafa;
border-color:#cccccc;
font-family: "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",Osaka ;
}


/* プロフィール画像の設定 */
.pay {
text-align: center;
margin: 5px 0px 0px 5px;
}

/* link to pagetop */
.pagetop {
text-decoration:none;
border-width: 0;
font-size: 8pt
text-align: right;
}

/*カレンダー*/
table.calender {
font-size: 13px;
margin: 1px 20px 8px 20px;
}
.calender caption {
padding: 1px 15px 0 15px;
}
.calender th {
font-weight: normal;
padding: 0 0 0.2em 0;
text-align: center;
font-family: georgia, serif;
}
.calender td {
width: 26px;
text-align: center;
padding: 1px 0;
background: #FFF;

}
.calender td a {
display: block;
font-weight: bold;
}
th#sun {
color: #CC3D3D;
}
th#sat {
color: #2996CC;
}
.calender td a:link, #calendar td a:visited, #calendar td a:hover, #calendar td a:active {
text-decoration: none;
}
.calender td a:link { background: #FFF; border: 1px solid #008000; }
.calender td a:visited { border: 1px solid #999; color: #004000}
.calender td a:hover, #calendar td a:active { background: #FFE080; border: 1px solid #FFE080; color:#FF6633; }

この記事に対するコメント

>sparrowさん
やはり<DIV>の位置とfloat設定あたりに問題があるんですね。参考にさせていただきます。

【2007/01/09 07:50】URL | K1郎 #suz0Agps[ 編集]

html内<div id="rightSideBar">の全てを<div id="centerWrapper">の直前に移動する。

css 「#centerWrapper」の width:730px を 548px に変更する。

css 「#rightSideBar」に margin-left:7px; を加える。

以上で如何でしょうか?

html内で、メインより右サイドの方が先に記述されてはしまいますが、表示はご要望どおりになると思います(たぶん、です。もちろん要バックアップですのでよろしくです)

【2007/01/09 04:11】URL | sparrow #Uh60rX9Y[ 編集]

>Professorさん
おっしゃる通りにすると、どういうわけか右カラムが左カラムの下に行っちゃう、つまり、2カラムになってしまうんですよ(;_;)

【2007/01/08 19:42】URL | K1郎 #suz0Agps[ 編集]

cssだけでなくテンプレート自体もいじられましたか? 右サイドバーの内容を表示する<div id="rightSideBar">〜</div>が中央コンテンツを表示する<div id="centerWrapper">の内側にあるのが原因のように思われます。

現在のテンプレートとCSSをテキストファイルなりなんなりにバックアップした上で、以下をためしてみてください。

1. テンプレートの、<div id="rightSideBar">から始まる右サイドバー表示部分を全部、<br clear="all" />の直前に移動させる。
2. cssの#centerWrapperのwidth: 730pxを548pxに変更。

テストできる環境がないので、これでうまくいくとは断言できませんが(前よりひどくなる可能性もあるので、バックアップは必ずとってくださいね)、ダメモトの気分になったときにお試しください。


【2007/01/08 12:34】URL | Professor #cf126YyM[ 編集]

この記事に対するコメントの投稿



管理者にだけ表示を許可する

この記事に対するトラックバック

トラックバックURL
http://umakara.blog67.fc2.com/tb.php/473-3826d93f
この記事にトラックバックする(FC2ブログユーザー)