こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

dreamweaverでHP作成練習

HP作成練習をしています。

http://webkisomondai.jounin.jp/practice_ouyou/drill01.html#menu14
一番下の基本的な3カラムレイアウトその1のフラワーショップのHPなのですが、
右上のご注文方法、プライバシーポリシー、お問合わせのところを右上にするやり方が分かりません。
前にoverflowを使ってできたような気もするのですが使い方もわからなくなりました。一番やりやすい方法があれば教えて下さい。
それと、3カラムの一番右側の列がうまく右側に入らず、フッターの上のところにきてしまいます。bodyとheaderを1000pxの幅で設定し、1つ目は、210、真ん中は580、3つ目は190にして、真ん中と三つ目にfloat:rightを設定しています。
初心者なのでわかりやすく教えていただけると助かります。よろしくお願いします。

投稿日時 - 2017-10-19 22:46:17

QNo.9387724

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

>>右上のご注文方法、プライバシーポリシー、お問合わせのところを右上にするやり方が分かりません。

一応、作ってみました。
https://thimbleprojects.org/yoyama1208/338971

右寄せするには、overflowではないです。
marginを使います。
marginの左側だけautoすることで右寄せになります。
※ 右上の緑色のボタン(「リミックスする」のボタン)が邪魔なので、80pxに下げて表示しています。


>>1つ目は、210、真ん中は580、3つ目は190にして、真ん中と三つ目にfloat:rightを設定しています。3つ目が下に来ます。

どういうコードになっていますか?
htmlとCSSを教えてください(URLを掲示すればどこかが原因なのか?検証できます)。

「3つ目が下に来ます。」は、恐らく、全体のボックスの幅に対して3つのボックスの幅やmarginなどの幅を合わせた幅が全体のボックスの幅を超えてカラム落ちしたのが原因だと思われます。

投稿日時 - 2017-10-21 21:29:54

補足

わざわざ作成していただきありがとうございます。助かりました。

コードは
body{
margin:0;
padding:0;
width:1000px;
}
#header{
width:1000px;
margin:0px auto 0px auto;
}
#navi {
width:1000px;
margin:0px auto 0px auto;
}
#main1{
width:210px;
}
#main2{
width:580px;
float:right;
}

#main3{
widht:190px;
float:right;
}

#footer {
clear:both;
width:1000px;
margin:0px auto 0px auto;
}

と作りました。

投稿日時 - 2017-10-22 22:34:10

ANo.2

ちょっと現状どうしてるのか、そしてどうしたいのか、わかりません。

>>お問合わせのところを右上にするやり方が分かりません。

どう組みたいのですか?
float使うのか、display:inline-block;text-align:rightでやるのか、position:absoluteで相対座標つかってやるのかいくらでも組み方有ると思います。

>>1つ目は、210、真ん中は580、3つ目は190にして

何を?(笑

https://qiita.com/ritukiii/items/fdc63532d31cc1ed2c50
こういう所みればまだ自力でやれるかと思います。

投稿日時 - 2017-10-20 08:14:45

補足

どう組みたいのかと聞かれるとよくわからないのですが・・。
参考にあった画像をとりあえず順番に配置していったら、お問い合わせとかの項目が真ん中あたりにあって、それを動かす方法が分からなかったのです。
3つ並んでいる1つ目の幅を210px、真ん中580px、最後のカラムを190pxに設定してみましたが、3つ目が下に来ます。
教えていただいたサイト拝見させていただきます。
ありがとうございます。

投稿日時 - 2017-10-21 01:04:50

ANo.1

できれば広告のないサービスでやってみてください。
今の状態(広告だらけ)だと、新手のアフィリエイトと誤解されかねませんよ。
実際、私は90%ぐらい疑ってます。

投稿日時 - 2017-10-20 04:30:41

補足

広告があるのですね。
そんなつもりは全くないのですが、とにかく一番上の3つの項目を右上に置くやり方が知りたかっただけです。。

投稿日時 - 2017-10-21 01:05:54