dreamweaverでHP作成練習

質問

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

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

回答No.3

amaryllis_watch

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

一応、作ってみました。
https://thimbleprojects.org/yoyama1208/338971
↑
右寄せするには、overflowではないです。
marginを使います。
marginの左側だけautoすることで右寄せになります。
※ 右上の緑色のボタン(「リミックスする」のボタン)が邪魔なので、80pxに下げて表示しています。

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

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

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

補足

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

コードは
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;
}

と作りました。

回答No.2

muuming2001

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

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

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

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

何を？（笑

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

補足

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

回答No.1

tracer

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

補足

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