0
저는 웹 디자인에 경험이 없지만 이것을 함께 해킹하여 작동하는 것처럼 보입니다. 그러나, 나는 알아낼 수없는 작은 문제가 있습니다.드롭 다운 메뉴 하단 공간
탐색 드롭 다운 메뉴를 만들었고 전체 화면보기에는 탐색 드롭 다운 메뉴와 페이지 제목 사이에 패딩이 있지만 화면이 작아지면 패딩이 없습니다. 이 원인은 무엇입니까 ??
웃지 마시고, 여기 내 jfiddle입니다, https://jsfiddle.net/ikeevens/m0njbhf4/ 그리고 여기 내 코드입니다. 귀하가 제공 한 jsfiddle을 바탕으로
는h1 {
margin: 0px;
padding: 0px;
color: #931d03;
font-weight: 100;
font-family: Arial;
font-size: 20px;
padding-bottom: 10px;
margin: 0px auto;
}
h2 {
margin: 0px;
padding: 0px;
color: #931d03;
font-weight: 100;
font: Arial;
font-size: 16px;
padding-bottom: 0px;
margin: 0px auto;
}
h3 {
color: #003564;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 0px auto;
margin: 0px auto;
}
h4 {
color: #842200;
font-weight: 100;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0px auto;
margin: 0px auto;
}
h5 {
margin: 0px;
padding: 0px;
}
h6 {
margin: 0px;
padding: 0px;
}
p {
margin: 0px auto;
line-height: ;
font-size: 12px;
}
sp {
margin: 0px auto;
line-height: ;
font-size: 10px;
}
li {
font-size: 12px;
}
* {
padding: 0px auto;
margin: 0px auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
padding: 0px auto;
margin: 0px auto;
color: #555;
background: #a6b17a;
overflow-y: scroll;
}
img {
max-width: 100%;
height: auto;
margin: 0px 0px 0px 0px;
}
#iefix {
position: relative;
z-index: 1000;
}
div.container {
width: 85%;
height: auto;
background-color: ;
margin: 0px auto;
padding: 0px auto;
-webkit-box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 3px 10px 0px rgba(0, 0, 0, 0.75);
}
div.hsection-inner {
margin: 0px auto;
padding: 0px 0px;
}
div.header {
background-image: ;
background-color: ;
padding: 0px auto;
height: 120px;
}
div.menubar {
background-image: ;
background-color: black;
height: 30px;
padding-left: 0px;
}
.toggletop,
[id^=drop] {
display: none;
}
.toggle,
[id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #000;
background-image: ;
background-repeat: repeat-n;
border-top: 0px solid black;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: ;
}
nav a {
display: block;
padding: 0px 20px;
color: #fff;
font-size: 12px;
line-height: 30px;
text-decoration: none;
background-color: ;
}
nav ul li ul li:hover {
background: red;
background-image: ;
}
nav ul li:hover {
background-color: red;
background-image: ;
}
nav li a:active {
background-color: red;
background-image: ;
}
nav ul ul {
display: none;
position: absolute;
top: 30px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
width: 205px;
float: none;
display: list-item;
position: relative;
background-color: #555;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
margin-top: -1px;
border-top: 1px solid black;
}
nav ul ul ul li {
position: relative;
top: -30px;
left: 205px;
background-color: #555;
}
nav li:last-child {} li > a:after {
content: '';
}
li > a:only-child:after {
content: '';
}
ul.menu {
width: 100%;
}
div.body-content {
padding: 20px 0px;
background-color: rgb(255, 255, 255);
}
div.bsection-inner {
margin: 0px auto;
padding: 5px 75px;
}
div.section-inner {
margin: 0px auto;
padding: 0px 25px;
max-width: 1100px;
}
div.footer {
padding: 10px 10px;
text-align: center;
color: rgb(255, 255, 255);
background-color: rgb(63, 63, 63);
height: 75px;
}
div.fsection-inner {
margin: 0px auto;
padding: 0px 0px;
max-width: 1100px;
}
.clearfix::before {
display: table;
content: "";
}
.clearfix::after {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
.clearfix {}@media screen and (max-width: 1220px) {
.toggle + a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: #000;
padding: 0px 20px;
color: #FFF;
font-size: 12px;
line-height: 30px;
text-decoration: none;
border: none;
}
.toggletop {
display: block;
background-image: ;
background-color: #000;
padding: 0px 20px;
color: #FFF;
font-size: 12px;
line-height: 30px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: red;
background-image: ;
}
[id^=drop]:checked + ul {
display: block;
width: 100%;
}
nav a {
font-size: 12px;
}
nav ul li {
display: block;
width: 100%;
background-color: #000;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #555;
}
nav li:hover > a,
#nav li a.active {
background-color: red;
background-image: ;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #555;
}
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
border-right: 0px solid black;
border-left: 0px solid black;
border-bottom: 0px solid black;
border-top: 1px solid black;
}
nav ul ul ul li {
position: static;
}
nav li:last-child {
border-bottom: 0px solid black;
}
nav :hover {
background: red;
background-image: ;
}
div.menubar {
padding-left: 0px;
}
div.bsection-inner {
padding: 5px 75px;
}
.hide-mobile {
display: none;
}
}
@media screen and (max-width: 1020px) {
.hide-mobile {
display: none;
}
}
@media screen and (max-width: 925px) {
nav {
display: block;
padding: 0px 0px;
color: #fff;
font-size: 11px;
line-height: 30px;
text-decoration: none;
background-color: ;
}
.hide-mobile {
display: none;
}
div.mobile-collapse {
width: auto;
margin-right: 0px;
float: none;
}
div.body-content {
padding: 0px 10px;
}
div.bsection-inner {
padding: 20px 50px;
}
}
@media screen and (max-width: 860px) {
.hide-mobile {
display: none;
}
div.mobile-collapse {
width: auto;
margin-right: 0px;
float: none;
}
div.body-content {
padding: 0px 10px;
}
div.bsection-inner {
padding: 20px 50px;
}
}
@media screen and (max-width: 620px) {
div.header {
height: 100px;
}
p {
font-size: 11px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 13px;
}
div.menubar {
padding-left: 0px;
}
div.body-content {
padding: 0px 10px;
}
div.bsection-inner {
padding: 20px 30px;
}
div.mobile-collapse2 {
width: auto;
margin-right: 0px;
float: none;
}
}
@media screen and (max-width: 500px) {
div.header {
height: 75px;
}
.toggle {
line-height: 20px;
font-size: 11px;
}
nav a {
line-height: 20px;
font-size: 11px;
}
.toggletop {
font-size: 11px;
line-height: 30px;
}
.list li a {
font-size: 11px;
}
div.ftext {
padding: 0px 10px;
font-color: #fff;
font-size: 10px;
font: arial;
font-weight: bold;
line-height: 23px;
}
.toggle:hover {
background-color: red;
background-image: ;
}
nav li:hover > a,
#nav li a.active {
background-color: red;
background-image: ;
}
#hnavbar ul li a {
font-size: 9px;
font-weight: ;
}
div.menubar {
background-image: ;
background-color: black;
height: 25px;
padding-left: 0px;
}
li {
font-size: 11px;
}
.indent1 {
margin-left: 10px;
}
.hide-mobile {
display: none;
}
div.mobile-collapse {
width: auto;
margin-right: 0px;
float: none;
}
div.body-content {
padding: 0px 10px;
}
div.bsection-inner {
padding: 20px 30px;
}
}
@media screen and (max-width: 420px) {
.toggletop {
font-size: 11px;
line-height: 30px;
height: 30px;
}
div.body-content {
padding: 0px 10px;
}
#hnavbar ul li a {
font-size: 8px;
font-weight: ;
}
div.bsection-inner {
padding: 20px 20px;
}
}<!DOCTYPE HTML>
<HTML lang="en">
<HEAD>
<META content="IE=11.0000" http-equiv="X-UA-Compatible">
<META charset="utf-8">
<META http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<TITLE>Responsive Webpage</TITLE>
<META name="viewport" content="width=device-width,initial-scale=1">
<META name="GENERATOR" content="MSHTML 11.00.9600.18212">
</HEAD>
<BODY>
<DIV class="container">
<!-- header -->
<DIV class="header">
<DIV class="hsection-inner">
</DIV>
<!--hsection-inner-->
</DIV>
<!--/header-->
<!-- nav -->
<DIV class="menubar" id="iefix">
<nav>
<label for="drop" class="toggletop">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="index.html">Home</a>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Services</label>
<a href="">Services</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="">Service 1</a>
</li>
<li><a href="">Service 2</a>
</li>
<li><a href="">Service 3</a>
</li>
<li><a href="">Service 4</a>
</li>
<li><a href="">Service 5</a>
</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Products</label>
<a href="">Products</a>
<input type="checkbox" id="drop-2" />
<ul>
<li><a href="">Product 1</a>
</li>
<li><a href="">Product 2</a>
</li>
<li><a href="">Product 3</a>
</li>
<li><a href="">Product 4</a>
</li>
</ul>
</li>
<li><a href="">Contact Us</a>
</li>
<li><a href="">Company Info</a>
</li>
</ul>
</nav>
</DIV>
<!--/nav-->
<!-- body-content -->
<DIV class="body-content">
<DIV class="bsection-inner">
<h1>Page Title</h1>
<hr>
</DIV>
<!--section-inner-->
</DIV>
<!--/body-content-->
<!-- footer -->
<DIV class="footer">
<DIV class="fsection-inner">
</DIV>
<!--fsection-inner-->
</DIV>
<!--/footer-->
</DIV>
<!--/container-->
</BODY>
</HTML>
모든 것이 잘 보입니다. 문제가 무엇인지 더 잘 설명하십시오. 어쩌면 주석 달린 스크린 샷을 제공 할 것입니다. –
아래는 제 jffiddle입니다. 메뉴를 선택하기 전에 메뉴 표시 줄과 페이지 제목 사이에 패딩이 있음을주의하십시오. 패딩이 사라지는 메뉴 바를 클릭하면 나는 menubar가 클릭 될 때 그곳에 패딩이 필요하다. https://jsfiddle.net/ikeevens/m0njbhf4/ –