• WordPress 5.9.10
    オリジナルテーマ


    以下のサイトをスマホで見ると、文字が枠の上側になってしまいます。
    padding-top: 20px; を入れると真ん中には来ますが、全体が、下の画像の一部と
    重なってしまいます。
    vartical-align: middle; は全く機能しません。
    どうしたらいいでしょういか?

    https://nihonjinji.jp/index.php/servicemuke/

    HTML
    <ul class="umuke">
    <li>&nbsp;&nbsp;&nbsp;研修コース
    </li>
    <li ><a href="https://nihonjinji.jp/index.php/kangomuke/">&lt;&nbsp;訪問介護サービス事業向け
    </li>
    <li><a href="https://nihonjinji.jp/index.php/eventmuke/">&lt;&nbsp;イベントプロデュース企業向け</a>
    </li>
    <li ><a href="https://nihonjinji.jp/index.php/servicemuke/">&lt;&nbsp;サービス事業向け&nbsp;&nbsp;&nbsp;</a>
    </li>


    CSS

    ul.umuke {

      list-style:none; margin: 0 auto;

      padding: 0px;

      width: 100%;

      color: #ffffff;

      position: relative;

      padding-top: 20px;

      }

      ul.umuke li{

       background: #03006b;/*背景色*/

       color: #ffffff;

      margin-bottom: 3px;/*下のバーとの余白*/

      border-bottom: solid 1px #dadada;/*下に灰色線*/

      list-style-type: none!important;/*ポチ消す*/

      text-align: left;  

      padding-left: 20px;

      line-height: 1.0em;

      }
9件の返信を表示中 - 1 - 9件目 (全9件中)
  • テキストの縦方向の位置合わせが適切に行われていないようです。

    vertical-align: middle; はインライン要素やテーブルセルに対してのみ有効であり、ブロック要素には効果がありません。

    以下の CSS ではどうでしょうか。

    ul.umuke {
    list-style: none;
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    color: #ffffff;
    position: relative;
    }

    ul.umuke li {
    background: #03006b; /*背景色*/
    color: #ffffff;
    margin-bottom: 3px; /*下のバーとの余白*/
    border-bottom: solid 1px #dadada; /*下に灰色線*/
    list-style-type: none !important; /*ポチ消す*/
    text-align: left;
    padding: 20px; /*全体にパディングを追加*/
    display: flex;
    align-items: center; /*縦方向の中央揃え*/
    line-height: 1.0em;
    }
    トピック投稿者 kurobon

    (@kurobon)

    Setouchi Kotori さん、お忙しいところありがとうございます。

    確かにナビゲーションはいい感じになりましたが、

    今度下の画像にかぶってしまいました。どうしたらいいでしょういか?

    https://nihonjinji.jp/index.php/servicemuke/

    該当箇所のコードが分かれば、お答えできるかもしれません。

    (最初の状態(見た目)を覚えておらず・・・すみません。)

    トピック投稿者 kurobon

    (@kurobon)

    お手数かけます。元の状態に戻しました。よろしくお願いします。

    https://nihonjinji.jp/index.php/servicemuke/

    コードのご共有をお待ちしているところでございます。

    トピック投稿者 kurobon

    (@kurobon)

    失礼しました。コードは以下です。必要なところだけ抜きました。後は変わりません。


    <ul class="umuke">
    <li class="lmuke1">&nbsp;&nbsp;&nbsp;研修コース
    </li>
    <li class="lmuke2" ><a href="https://nihonjinji.jp/index.php/kangomuke/">&lt;&nbsp;訪問介護サービス事業向け
    </li>
    <li class="lmuke3"><a href="https://nihonjinji.jp/index.php/eventmuke/">&lt;&nbsp;イベントプロデュース企業向け</a>
    </li>
    <li class="lmuke4" ><a href="https://nihonjinji.jp/index.php/servicemuke/">&lt;&nbsp;サービス事業向け&nbsp;&nbsp;&nbsp;</a>
    </li>

    </ul>
    <br />
    <img src="https://nihonjinji.jp/wp-content/themes/sample/images/kensyu_service.jpg" alt="" border="0" />
    <img src="https://nihonjinji.jp/wp-content/themes/sample/images/space.gif" widht="700" height="50" alt="" border="0" />

    スマホで拝見したところ、もともと画像の上部がボタンの下に隠れてしまっていますね。

    リストと画像の領域をそれぞれ div タグでくくり、マージンで調整するとよいのではないでしょうか。

    トピック投稿者 kurobon

    (@kurobon)

    ありがとうございます。 確かにリストと画像の領域をそれぞれ div タグでくくり、というのを忘れてました。 でもなぜか解決できなかったので、やむを得ず、margin-top で位置指定しました。

    ひとまず解決したとのことで、よかったです^^

    パソコン表示がおそらく意図されたとおりに表示されていないのではないかと思います。
    よろしければ、以下のコードをお試しください。

    <style>
    ul.umuke {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    color: #ffffff;
    position: relative;
    }

    ul.umuke li {
    background: #03006b; /*背景色*/
    color: #ffffff;
    margin-bottom: 3px; /*下のバーとの余白*/
    border-bottom: solid 1px #dadada; /*下に灰色線*/
    list-style-type: none !important; /*ポチ消す*/
    text-align: left;
    padding: 15px 20px; /*上下に15px, 左右に20pxのパディング*/
    display: flex;
    align-items: center; /*縦方向の中央揃え*/
    line-height: 1.0em;
    }

    ul.umuke li a {
    color: #ffffff; /*リンクの色を白に*/
    text-decoration: none; /*リンクの下線を消す*/
    }

    ul.umuke li a:hover {
    text-decoration: underline; /*ホバー時に下線を表示*/
    }

    .section {
    margin-bottom: 20px; /*セクション間の余白*/
    }

    img {
    display: block;
    max-width: 100%;
    height: auto;
    }
    </style>

    <div class="section">
    <ul class="umuke">
    <li class="lmuke1">&nbsp;&nbsp;&nbsp;研修コース</li>
    <li class="lmuke2"><a href="https://nihonjinji.jp/index.php/kangomuke/">&lt;&nbsp;訪問介護サービス事業向け</a></li>
    <li class="lmuke3"><a href="https://nihonjinji.jp/index.php/eventmuke/">&lt;&nbsp;イベントプロデュース企業向け</a></li>
    <li class="lmuke4"><a href="https://nihonjinji.jp/index.php/servicemuke/">&lt;&nbsp;サービス事業向け&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
    </div>

    <div class="section">
    <img src="https://nihonjinji.jp/wp-content/themes/sample/images/kensyu_service.jpg" alt="" border="0" />
    <img src="https://nihonjinji.jp/wp-content/themes/sample/images/space.gif" width="700" height="50" alt="" border="0" />
    </div>
9件の返信を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。