[CSS]floatが聞かず画像が隠れてしまいます...

以下の画像のようにしたいのですが、floatが効かず画像が隠れてしまいます...
作成中の部分は「カートに登録しました」から上の「header」タグ内の部分です。
![]
以下は僕が作成したコードになります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>カートページ</title>
6    <link type="text/css" rel="stylesheet" href="./assets/EC_site.css">
7    
8</head>
9<body>
10    <header>
11        <div class="header_box">
12            <a href="item_list.php">
13                <img class="logo" src="assets/css_img/logo.png" alt="CodeSHOP">
14            </a>
15            <p class="menu">ユーザー名:</p>
16            <a class="cart" href="cart.php"></a>
17            <a class="menu" href="logout.php" alt="CodeSHOP"></a>
18            <a class="nemu" href="logout.php">ログアウト</a>
19            
20        </div>
21        
22    </header>
23</body>
24</html>

css
1/* reset -------------------------------------------- */
2html, body, div, span, object, iframe,
3h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4abbr, address, cite, code,
5del, dfn, em, img, ins, kbd, q, samp,
6small, strong, sub, sup, var,
7b, i,
8dl, dt, dd, ol, ul, li,
9fieldset, form, label, legend,
10table, caption, tbody, tfoot, thead, tr, th, td,
11article, aside, canvas, details, figcaption, figure,
12footer, header, hgroup, menu, nav, section, summary,
13time, mark, audio, video {
14  margin:0;
15  padding:0;
16  border:0;
17  outline:0;
18  font-size:100%;
19  vertical-align:baseline;
20  background:transparent;
21}
22
23ul {
24  list-style:none;
25}
26
27a {
28  text-decoration: none;
29}
30
31a:hover {
32  text-decoration: underline;
33}
34
35body {
36  font-family: sans-serif;
37}
38/* common -------------------------------------------- */
39
40header {
41    height: 60px;
42    background-color: #0D2851;
43}
44
45
46.header_box {
47  margin-left : auto ;
48  margin-right : auto ;
49  width: 960px;
50}
51
52.logo {
53  float: left;
54  display:block;
55}
56
57.cart {
58  float: left;
59  display:block;
60  width:50px;
61  height:50px;
62  background:url("assets/cart_logo.png")  no-repeat;
63}
64
65.menu {
66  float: left;
67  display:block;
68  margin: 15px 0 0 10px;
69  font-weight: bold;
70  font-size: 16px;
71  color: #ffffff;
72}

以下はコードを実行した結果になります。

画像に関しましては、logo.pngが「CodeCampSHOP」と書いてあるもので、cart_logo.pngが白いカートマークの画像になります。
どなたか教えて下さる方いましたら、ご教授よろしくお願いします。

行動規範の内容に同意します

回答2件

原因がよく分からないので，モック画像だけ見て，自分流で適当に作ってみました：
https://thimbleprojects.org/liveasnotes/530815/

一応セマンティックを意識しつつ，雑にスマホ対応もしてたり...
ブラウザによって若干表示が違うので，その辺りは今後の修正課題ですねえ

「HERE」のところをクリックするとソースコードが見れるので，参考程度にどうぞ

投稿2018/08/08 15:26

liveasnotes

総合スコア1284

私なら、ロゴ部分と、ユーザ名やカート箇所をそれぞれにdivなどで区切ってレウアウトを組みます。

ロゴ部分のdivは特にフロートせず、ユーザ名やカートの方のdivに「float : right;」として右揃えにします。

HTML
1    <header>
2     <div class="header_box">
3        <div class="header_left">
4            <a href="item_list.php">
5                <img class="logo" src="assets/css_img/logo.png" alt="CodeSHOP">
6            </a>
7        </div>
8        <div class="header_right">
9            <p class="menu">ユーザー名:</p>
10            <a class="cart" href="cart.php"></a>
11            <a class="menu" href="logout.php" alt="CodeSHOP"></a>
12            <a class="nemu" href="logout.php">ログアウト</a>
13        </div>
14     </div>
15    </header>
16

CSS
1/* reset -------------------------------------------- */
2html, body, div, span, object, iframe,
3h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4abbr, address, cite, code,
5del, dfn, em, img, ins, kbd, q, samp,
6small, strong, sub, sup, var,
7b, i,
8dl, dt, dd, ol, ul, li,
9fieldset, form, label, legend,
10table, caption, tbody, tfoot, thead, tr, th, td,
11article, aside, canvas, details, figcaption, figure,
12footer, header, hgroup, menu, nav, section, summary,
13time, mark, audio, video {
14  margin:0;
15  padding:0;
16  border:0;
17  outline:0;
18  font-size:100%;
19  vertical-align:baseline;
20  background:transparent;
21}
22
23ul {
24  list-style:none;
25}
26
27a {
28  text-decoration: none;
29}
30
31a:hover {
32  text-decoration: underline;
33}
34
35body {
36  font-family: sans-serif;
37}
38/* common -------------------------------------------- */
39
40header {
41    height: 60px;
42    background-color: #0D2851;
43}
44
45
46.header_box {
47  margin-left : auto ;
48  margin-right : auto ;
49  /* width: 960px; */
50  width: 500px;
51}
52
53.logo {
54  float: left;
55  display:block;
56}
57.header_right {
58  float: right;
59}
60
61.header_right p,.header_right a {
62  float: left;
63  display: block;
64}
65.cart {
66  width:50px;
67  height:50px;
68  background:url("assets/cart_logo.png")  no-repeat;
69　display: inline-block;
70}
71
72.menu {
73  margin: 15px 0 0 10px;
74  font-weight: bold;
75  font-size: 16px;
76  color: #ffffff;
77}

細かい調整はしていないのですが、こんな感じにするとレイアウトがし易いと思います。
cart画像が表示されない件は、aタグがインライン要素の為、幅指定が適用されていない為、インラインブロックにして幅指定が有効になるようにすれば大丈夫だと思います。

投稿2017/10/31 10:50

編集2017/10/31 10:56

8yazaki

総合スコア454

newyee

2017/10/31 11:50

ご丁寧なご回答ありがとうございます。ご回答に書いて下さったコードを試させていただいたのですが、何故か全く変わらない状況です... 何かコード以外の所に問題があるのかもしれません... ご丁寧にご説明頂いたの申し訳ないです...

8yazaki

2017/10/31 11:53

カートの画像をCSSで背景として表示ではなく、HTML側にimgタグで挿入するのではだめでしょうか？（多分CSSで背景表示させたい理由があるのでしょうけど^^;）

newyee

2017/10/31 12:17

いえ、実は特にないんですが変にこだわってしまっていたんですよね...ｗ HTML側でimgタグ内に挿入した結果、変化があったのですが、やはり隠れてしまいますね... <header> <div class="header_box"> <div class="header_left"> <a href="item_list.php"> <img class="logo" src="assets/css_img/logo.png" alt="CodeSHOP"> </a> </div> <div class="header_right"> <p class="menu">ユーザー名:</p> <a href="cart.php"> <img class="cart" src="assets/css_img/cart_logo.png" > </a> <a class="menu" href="logout.php" alt="CodeSHOP"></a> <a class="nemu" href="logout.php">ログアウト</a> </div> </div> </header> 以下はcssの変更点です。 .cart { width:50px; height:50px; /* background:url("assets/cart_logo.png") no-repeat; */ 　display: inline-block; } 以下は実行画面の結果となります。 https://i.gyazo.com/3a433545ceec4cf16e991d0e13ea7fe5.png もしよろしければご返信頂ければ幸いに思います...

8yazaki

2017/10/31 12:31

私がテストした環境（下記URL）ではヘッダー内に並ぶので・・・ https://jsfiddle.net/cgd1tx9h/2/

newyee

2017/10/31 13:05

ほんとですね...(:_;) 後は自分で他に問題点がないか調べてみようかと思います... 最後にお聞きしたいのですが、CSSの .header_right p,.header_right a { float: left; display: block; } 「.header_right p,.header_right a 」ここの部分は「header_right 」のp要素とa要素の２つを指定している、ということでしょうか...?

8yazaki

2017/10/31 13:19

はい、「,」で区切ると複数指定することができます

newyee

2017/10/31 13:38

ありがとうございました。

8yazaki

2017/10/31 13:57

いえいえ、結局解決に直結する回答ができなくてすいませんm(_ _)m 他の方からの回答も参考にしてみてください♪

行動規範の内容に同意します

あなたの回答