制作しているサイトでdiv要素が重なってしまって後筆の要素が隠れてしまっております。
cssがまだまだ不案内で初心者のような質問なのですが、お尋ねさせていただきたく存じます。
前提・実現したいこと
レスポンシブデザインの時にロゴとメニューバーを重ねないで表示をさせたい。
該当のソースコード
html <!-- header --> <header> <div class="logo"><img src="./img/logo.png" alt="ChiePro"></div> <div class="layout_nav"> <nav class="global_nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> </header>
/* header css */ header{ width: 100vw; height: 10vh; } ---省略---
/* navi css */ .layout_nav{ width: 80%; height: 100%; float: right; display: table; } .global_nav { float: right; } .global_nav ul li{ border-left: solid .1vh rgba(199, 36, 36, 1); float: left; } .global_nav ul li :hover{ background-color: rgba(224, 224, 224, .7); } .global_nav ul li a{ font-size: 1.2vw; color: #5e5e5eef; text-decoration: none; } 以下省略
/* logo css */ .logo{ width: 20%; height: 100%; float:left; } .logo img{ height: 100%; }
試したこと
positionやdisplay:tableなどを使用を試みましたが、両者うまくいかずに苦戦しております。
補足情報(FW/ツールのバージョンなど)
確認した環境です。 OS:win10(64bit) デバイス:PC ブラウザ:Chrome(67.0.3396.99)
回答1件
あなたの回答
tips
プレビュー