とくにfooterレイアウトがいうことを聞かないです

Question

Atomで書いてchromに反映してCSSのレイアウトを配置していました。
それを、Atomで書いたものをCode9にアップしたところ、レイアウトが崩れました。
書いたのに、反映されていないコードもあります。

これはなぜでしょうか。

Comments

[m.ts10806]

細かいのですが、プログラムは書いたとおりにしか動かないので
「いうことを聞かない」という認識は捨てたほうがうまくいきます。

>無駄なコードが多い気がする。
では、無駄なコードを省いたミニマムコードで調整するようにしてください。
おそらくそれだけで進みます。

[kei344]

質問タグ「コーディング規約」は関係ないのではずしてください。

Answer 1

ツッコミどころが山ほどありますが、とりあえず以下を修正しよう。

HTMLでは、

        <header>
            <div class="Headerinner">
                <div class="clearfix">
                    <div class="headertop">
                        <div class="logo">
                            <a href="#"><img src="1.png" width="220px" height="35px"></a>
                            <p>header</p>
                        </div>
                        <div class="search">
                            <form action="#">
-                               <input type="search" name="search" placeholder=""="小説名・著者で検索">
+                               <input type="search" name="search" placeholder="小説名・著者で検索">
                                <input type="submit" name="submit" value="検索">
                            </form>
                        </div>
                    </div>
                </div>
+           </div>  <!-- divの終了タグが抜けている -->
        </header>

および、"90pxと、閉じる"が抜けている2箇所に"を追加。

CSSでは、

/* ボディーの中にある広告 */
body aside{
-width: 160px
+width: 160px; /* 末尾に;を追加 */
display: flex;
flex-direction: column;
}

-}
+ /* 余分な}を削除 */

あとは、

• img要素のwidth属性とheight属性で指定する値は単位なしの数値(ピクセル単位に固定)なので、属性値にpxを付けてはいけない。
• ほとんどの場合、img属性にはalt属性を付ける必要がある。単なる装飾であればalt=""を付ける。
• リスト項目の先頭のマークを画像で付けるだけなら、img要素ではなくCSSでlist-style-imageを使う。
• むやみにheightで高さを固定しているために、内容がそこからはみ出している箇所がたくさんある。
• いまからWebページを作るのであれば、floatレイアウトはやめて、flexレイアウトを学習しよう。

広告を付けたり、アイコンを飾りとして付けたりする前に、やるべきことがあるのでは?

Answer 2

CSSに充てていたresetCSSを当てなおしたところ、画像が収まるようになったため、それに合わせて相互の位置のずれが修正されました。

また、codeの書き方が変だとは思っていましたが、具体的にどこがどう変なのかよくわからず、だったので、codeへ指摘をいただいた方をベストアンサーにさせていただきました。

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