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

締切り済みの質問

HP作成中。Chromeブラウザのみレイアウト崩れ

見よう見まねで結構古くからHP造りをしています。
今は、レスポンシブデザインでのショップ作り中です。
HP造りながら、色々なブラウザでも表示状態を確認していますが、
いつもいつもIEの常用者でGoogle Chromeでの表示確認を怠っていました。

現在のHPはパソコン画面では、IE,サファリ、ファイアーフォックスで綺麗にレイアウトが出来ています。

ただ、Google Chrome ブラウザだけパソコン画面では、
トップから2段目の折り畳みのアコーディオンメニューが上下に2段になってしまいます。
他のブラウザでは問題なく1段に収まります。

http://www.waterplanet.jp/

何分、ネットでの独学勉強のHP造りなので、このChrome表示の修正を思い付きません。
どなたか、独学勉強の者に判り易く、適切なアドバイスをして戴ければ有難いです。
どうかご協力を宜しくお願い致します。

山田と言います。

投稿日時 - 2017-02-08 17:47:02

QNo.9291470

すぐに回答ほしいです

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

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

回答(3)

ANo.3

HTMLにもcssにも問題点はたくさんあるのですが、

問題の崩れの原因は
http://www.waterplanet.jp/style/style002.css
の85行目から始まっている以下のcssにあります。

.animenu >
ul > li {
float: left;
border-right: 1px solid #1e1e1e;
-webkit-box-shadow: 0px 0 0 #444444;
-moz-box-shadow: 0px 0 0 #444444;
box-shadow: 0px 0 0 #444444;
}
.animenu > ul > li > a {
float: left;
padding: 1em 3em;
text-transform: uppercase;
}
この書き方だとボタンの幅が文字数によって変わるし、ウィンドウの幅が狭い時にはどのブラウザでも崩れるでしょうね。



▼私だったら、以下のように修正します。
.animenu >
ul > li {
float: left;
border-right: 1px solid #1e1e1e;
-webkit-box-shadow: 0px 0 0 #444444;
-moz-box-shadow: 0px 0 0 #444444;
box-shadow: 0px 0 0 #444444;
width: 20%;
}
.animenu > ul > li > a {
padding: 1em 0;
text-align:center;
text-transform: uppercase;
display:block;
width: 100%;
}

この書き方でも、ウィンドウの幅によってはテキストが1行のボタンと複数行のボタンが混在するので、高さをそろえるjsを導入します。

投稿日時 - 2017-02-09 16:04:56

ANo.2

li の幅が明示的に指定されてないからだと思います。

.animenu > ul > li > a {
/*float: left;
padding: 1em 3em;*/
text-transform: uppercase;
}

このfloat:leftは意味がないと思います。paddingも消しましょう。


.animenu > ul > li {
float: left;
border-right: 1px solid #1e1e1e;
-webkit-box-shadow: 0px 0 0 #444444;
-moz-box-shadow: 0px 0 0 #444444;
box-shadow: 0px 0 0 #444444;
text-align:center;//追記
height:47px;//追記
line-height:47px;//追記
}

/*メニュー1番目の幅*/
.animenu > ul > li:nth-type-of(1){
width:145px;
}

/*メニュー2番めの幅*/
.animenu > ul > li:nth-type-of(2){
width:185px;
}

と言った感じで、、、後は調整してくんさい

投稿日時 - 2017-02-08 19:37:12

ANo.1

Windows 10 Pro
クロームバージョン 56.0.2924.87

ですが普通に見えていますが、何処の事でしょう、ページ番号を

投稿日時 - 2017-02-08 18:37:47

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-